CN-35 feat: traffic summary
This commit is contained in:
chenjinsong
@@ -59,9 +59,12 @@ $--color-monitor: #98AEC5; //全局停用色灰色
|
||||
$--chart-single-value-icon-background-color: #E8F6FF;
|
||||
|
||||
$--content-right-background-color: #EFF2F5; //右侧背景色
|
||||
|
||||
$--chart-height-unit: 40;
|
||||
/** 改变 icon 字体路径变量，并引入element-ui变量文件 **/
|
||||
$--font-path: '~element-plus/lib/theme-chalk/fonts';
|
||||
@import "~element-plus/packages/theme-chalk/src/index";
|
||||
:export {
|
||||
themeColor: $--color-primary;
|
||||
chartHeightUnit: $--chart-height-unit;
|
||||
}
|
||||
@@ -7,112 +7,6 @@ import { calculateTextWidth } from '@/utils/tools'
|
||||
const timeData = [['1988/10/4', 89], ['1988/10/5', 95], ['1988/10/6', 94], ['1988/10/7', 86], ['1988/10/8', 95], ['1988/10/9', 93], ['1988/10/10', 88], ['1988/10/11', 80], ['1988/10/12', 89], ['1988/10/13', 83], ['1988/10/14', 85], ['1988/10/15', 83], ['1988/10/16', 73], ['1988/10/17', 79], ['1988/10/18', 82], ['1988/10/19', 77], ['1988/10/20', 80], ['1988/10/21', 75], ['1988/10/22', 79], ['1988/10/23', 75], ['1988/10/24', 83], ['1988/10/25', 85], ['1988/10/26', 77], ['1988/10/27', 74], ['1988/10/28', 70], ['1988/10/29', 80], ['1988/10/30', 71], ['1988/10/31', 73], ['1988/11/1', 77], ['1988/11/2', 78], ['1988/11/3', 81], ['1988/11/4', 89], ['1988/11/5', 79], ['1988/11/6', 76], ['1988/11/7', 80], ['1988/11/8', 77], ['1988/11/9', 72], ['1988/11/10', 68], ['1988/11/11', 58], ['1988/11/12', 54], ['1988/11/13', 50], ['1988/11/14', 41], ['1988/11/15', 36], ['1988/11/16', 43], ['1988/11/17', 45], ['1988/11/18', 54], ['1988/11/19', 49], ['1988/11/20', 45], ['1988/11/21', 42], ['1988/11/22', 41], ['1988/11/23', 33], ['1988/11/24', 23], ['1988/11/25', 19], ['1988/11/26', 18], ['1988/11/27', 13], ['1988/11/28', 4], ['1988/11/29', 4], ['1988/11/30', -4], ['1988/12/1', -4], ['1988/12/2', 0], ['1988/12/3', 4], ['1988/12/4', -2], ['1988/12/5', -11], ['1988/12/6', -2], ['1988/12/7', -1], ['1988/12/8', 3], ['1988/12/9', 6], ['1988/12/10', 10], ['1988/12/11', 10], ['1988/12/12', 14], ['1988/12/13', 10], ['1988/12/14', 7], ['1988/12/15', 1], ['1988/12/16', 0], ['1988/12/17', 1], ['1988/12/18', 2], ['1988/12/19', -6], ['1988/12/20', 3], ['1988/12/21', 9], ['1988/12/22', 3], ['1988/12/23', 4], ['1988/12/24', 12], ['1988/12/25', 8], ['1988/12/26', 0], ['1988/12/27', -8], ['1988/12/28', -10], ['1988/12/29', -13], ['1988/12/30', -10], ['1988/12/31', -13], ['1989/1/1', -3], ['1989/1/2', 5], ['1989/1/3', -5], ['1989/1/4', -9], ['1989/1/5', 1], ['1989/1/6', 5], ['1989/1/7', -1], ['1989/1/8', 4], ['1989/1/9', 9], ['1989/1/10', -1], ['1989/1/11', 6], ['1989/1/12', 1], ['1989/1/13', 11], ['1989/1/14', 11], ['1989/1/15', 7], ['1989/1/16', 1], ['1989/1/17', 0], ['1989/1/18', -5], ['1989/1/19', -9], ['1989/1/20', -8], ['1989/1/21', -12], ['1989/1/22', -6], ['1989/1/23', -6], ['1989/1/24', -9], ['1989/1/25', -13], ['1989/1/26', -23], ['1989/1/27', -25], ['1989/1/28', -21], ['1989/1/29', -21], ['1989/1/30', -22], ['1989/1/31', -31], ['1989/2/1', -23], ['1989/2/2', -17], ['1989/2/3', -19], ['1989/2/4', -26], ['1989/2/5', -28], ['1989/2/6', -24], ['1989/2/7', -26], ['1989/2/8', -33], ['1989/2/9', -30], ['1989/2/10', -39], ['1989/2/11', -37], ['1989/2/12', -36], ['1989/2/13', -32], ['1989/2/14', -39], ['1989/2/15', -30], ['1989/2/16', -28], ['1989/2/17', -19], ['1989/2/18', -19], ['1989/2/19', -20], ['1989/2/20', -17], ['1989/2/21', -26], ['1989/2/22', -26], ['1989/2/23', -32], ['1989/2/24', -35], ['1989/2/25', -44], ['1989/2/26', -44], ['1989/2/27', -48], ['1989/2/28', -46], ['1989/3/1', -53], ['1989/3/2', -57], ['1989/3/3', -50], ['1989/3/4', -44], ['1989/3/5', -43], ['1989/3/6', -48], ['1989/3/7', -58], ['1989/3/8', -67], ['1989/3/9', -58], ['1989/3/10', -53], ['1989/3/11', -52], ['1989/3/12', -59], ['1989/3/13', -67], ['1989/3/14', -59], ['1989/3/15', -51], ['1989/3/16', -49], ['1989/3/17', -40], ['1989/3/18', -39], ['1989/3/19', -48], ['1989/3/20', -48], ['1989/3/21', -52], ['1989/3/22', -47], ['1989/3/23', -53], ['1989/3/24', -46], ['1989/3/25', -53], ['1989/3/26', -57], ['1989/3/27', -67], ['1989/3/28', -65], ['1989/3/29', -68], ['1989/3/30', -62], ['1989/3/31', -53], ['1989/4/1', -46], ['1989/4/2', -42], ['1989/4/3', -40], ['1989/4/4', -45], ['1989/4/5', -42], ['1989/4/6', -47], ['1989/4/7', -46], ['1989/4/8', -55], ['1989/4/9', -60], ['1989/4/10', -55], ['1989/4/11', -45], ['1989/4/12', -50], ['1989/4/13', -40], ['1989/4/14', -48], ['1989/4/15', -53], ['1989/4/16', -51], ['1989/4/17', -46], ['1989/4/18', -43], ['1989/4/19', -38], ['1989/4/20', -44]]
|
||||
const timeData2 = [['1988/10/4', 69], ['1988/10/5', 65], ['1988/10/6', 64], ['1988/10/7', 66], ['1988/10/8', 65], ['1988/10/9', 63], ['1988/10/10', 68], ['1988/10/11', 60], ['1988/10/12', 69], ['1988/10/13', 63], ['1988/10/14', 65], ['1988/10/15', 63], ['1988/10/16', 73], ['1988/10/17', 79], ['1988/10/18', 62], ['1988/10/19', 77], ['1988/10/20', 60], ['1988/10/21', 75], ['1988/10/22', 79], ['1988/10/23', 75], ['1988/10/24', 63], ['1988/10/25', 65], ['1988/10/26', 77], ['1988/10/27', 74], ['1988/10/28', 70], ['1988/10/29', 60], ['1988/10/30', 71], ['1988/10/31', 73], ['1988/11/1', 77], ['1988/11/2', 78], ['1988/11/3', 61], ['1988/11/4', 69], ['1988/11/5', 79], ['1988/11/6', 76], ['1988/11/7', 60], ['1988/11/8', 77], ['1988/11/9', 72], ['1988/11/10', 68], ['1988/11/11', 58], ['1988/11/12', 54], ['1988/11/13', 50], ['1988/11/14', 41], ['1988/11/15', 36], ['1988/11/16', 43], ['1988/11/17', 45], ['1988/11/18', 54], ['1988/11/19', 49], ['1988/11/20', 45], ['1988/11/21', 42], ['1988/11/22', 41], ['1988/11/23', 33], ['1988/11/24', 23], ['1988/11/25', 19], ['1988/11/26', 18], ['1988/11/27', 13], ['1988/11/28', 4], ['1988/11/29', 4], ['1988/11/30', -4], ['1988/12/1', -4], ['1988/12/2', 0], ['1988/12/3', 4], ['1988/12/4', -2], ['1988/12/5', -11], ['1988/12/6', -2], ['1988/12/7', -1], ['1988/12/8', 3], ['1988/12/9', 6], ['1988/12/10', 10], ['1988/12/11', 10], ['1988/12/12', 14], ['1988/12/13', 10], ['1988/12/14', 7], ['1988/12/15', 1], ['1988/12/16', 0], ['1988/12/17', 1], ['1988/12/18', 2], ['1988/12/19', -6], ['1988/12/20', 3], ['1988/12/21', 9], ['1988/12/22', 3], ['1988/12/23', 4], ['1988/12/24', 12], ['1988/12/25', 6], ['1988/12/26', 0], ['1988/12/27', -8], ['1988/12/28', -10], ['1988/12/29', -13], ['1988/12/30', -10], ['1988/12/31', -13], ['1989/1/1', -3], ['1989/1/2', 5], ['1989/1/3', -5], ['1989/1/4', -9], ['1989/1/5', 1], ['1989/1/6', 5], ['1989/1/7', -1], ['1989/1/8', 4], ['1989/1/9', 9], ['1989/1/10', -1], ['1989/1/11', 6], ['1989/1/12', 1], ['1989/1/13', 11], ['1989/1/14', 11], ['1989/1/15', 7], ['1989/1/16', 1], ['1989/1/17', 0], ['1989/1/18', -5], ['1989/1/19', -9], ['1989/1/20', -8], ['1989/1/21', -12], ['1989/1/22', -6], ['1989/1/23', -6], ['1989/1/24', -9], ['1989/1/25', -13], ['1989/1/26', -23], ['1989/1/27', -25], ['1989/1/28', -21], ['1989/1/29', -21], ['1989/1/30', -22], ['1989/1/31', -31], ['1989/2/1', -23], ['1989/2/2', -17], ['1989/2/3', -19], ['1989/2/4', -26], ['1989/2/5', -28], ['1989/2/6', -24], ['1989/2/7', -26], ['1989/2/8', -33], ['1989/2/9', -30], ['1989/2/10', -39], ['1989/2/11', -37], ['1989/2/12', -36], ['1989/2/13', -32], ['1989/2/14', -39], ['1989/2/15', -30], ['1989/2/16', -28], ['1989/2/17', -19], ['1989/2/18', -19], ['1989/2/19', -20], ['1989/2/20', -17], ['1989/2/21', -26], ['1989/2/22', -26], ['1989/2/23', -32], ['1989/2/24', -35], ['1989/2/25', -44], ['1989/2/26', -44], ['1989/2/27', -48], ['1989/2/28', -46], ['1989/3/1', -53], ['1989/3/2', -57], ['1989/3/3', -50], ['1989/3/4', -44], ['1989/3/5', -43], ['1989/3/6', -48], ['1989/3/7', -58], ['1989/3/8', -67], ['1989/3/9', -58], ['1989/3/10', -53], ['1989/3/11', -52], ['1989/3/12', -59], ['1989/3/13', -67], ['1989/3/14', -59], ['1989/3/15', -51], ['1989/3/16', -49], ['1989/3/17', -40], ['1989/3/18', -39], ['1989/3/19', -48], ['1989/3/20', -48], ['1989/3/21', -52], ['1989/3/22', -47], ['1989/3/23', -53], ['1989/3/24', -46], ['1989/3/25', -53], ['1989/3/26', -57], ['1989/3/27', -67], ['1989/3/28', -65], ['1989/3/29', -68], ['1989/3/30', -62], ['1989/3/31', -53], ['1989/4/1', -46], ['1989/4/2', -42], ['1989/4/3', -40], ['1989/4/4', -45], ['1989/4/5', -42], ['1989/4/6', -47], ['1989/4/7', -46], ['1989/4/8', -55], ['1989/4/9', -60], ['1989/4/10', -55], ['1989/4/11', -45], ['1989/4/12', -50], ['1989/4/13', -40], ['1989/4/14', -48], ['1989/4/15', -53], ['1989/4/16', -51], ['1989/4/17', -46], ['1989/4/18', -43], ['1989/4/19', -38], ['1989/4/20', -44]]
|
||||
const timeData3 = [['1988/10/4', 49], ['1988/10/5', 45], ['1988/10/6', 44], ['1988/10/7', 46], ['1988/10/8', 45], ['1988/10/9', 43], ['1988/10/10', 48], ['1988/10/11', 40], ['1988/10/12', 49], ['1988/10/13', 43], ['1988/10/14', 45], ['1988/10/15', 43], ['1988/10/16', 73], ['1988/10/17', 79], ['1988/10/18', 42], ['1988/10/19', 77], ['1988/10/20', 40], ['1988/10/21', 75], ['1988/10/22', 79], ['1988/10/23', 75], ['1988/10/24', 63], ['1988/10/25', 65], ['1988/10/26', 77], ['1988/10/27', 74], ['1988/10/28', 70], ['1988/10/29', 60], ['1988/10/30', 71], ['1988/10/31', 73], ['1988/11/1', 77], ['1988/11/2', 78], ['1988/11/3', 61], ['1988/11/4', 69], ['1988/11/5', 79], ['1988/11/6', 76], ['1988/11/7', 60], ['1988/11/8', 77], ['1988/11/9', 72], ['1988/11/10', 68], ['1988/11/11', 58], ['1988/11/12', 54], ['1988/11/13', 50], ['1988/11/14', 41], ['1988/11/15', 36], ['1988/11/16', 43], ['1988/11/17', 45], ['1988/11/18', 54], ['1988/11/19', 49], ['1988/11/20', 45], ['1988/11/21', 42], ['1988/11/22', 41], ['1988/11/23', 33], ['1988/11/24', 23], ['1988/11/25', 19], ['1988/11/26', 18], ['1988/11/27', 13], ['1988/11/28', 4], ['1988/11/29', 4], ['1988/11/30', -4], ['1988/12/1', -4], ['1988/12/2', 0], ['1988/12/3', 4], ['1988/12/4', -2], ['1988/12/5', -11], ['1988/12/6', -2], ['1988/12/7', -1], ['1988/12/8', 3], ['1988/12/9', 6], ['1988/12/10', 10], ['1988/12/11', 10], ['1988/12/12', 14], ['1988/12/13', 10], ['1988/12/14', 7], ['1988/12/15', 1], ['1988/12/16', 0], ['1988/12/17', 1], ['1988/12/18', 2], ['1988/12/19', -6], ['1988/12/20', 3], ['1988/12/21', 9], ['1988/12/22', 3], ['1988/12/23', 4], ['1988/12/24', 12], ['1988/12/25', 6], ['1988/12/26', 0], ['1988/12/27', -8], ['1988/12/28', -10], ['1988/12/29', -13], ['1988/12/30', -10], ['1988/12/31', -13], ['1989/1/1', -3], ['1989/1/2', 5], ['1989/1/3', -5], ['1989/1/4', -9], ['1989/1/5', 1], ['1989/1/6', 5], ['1989/1/7', -1], ['1989/1/8', 4], ['1989/1/9', 9], ['1989/1/10', -1], ['1989/1/11', 6], ['1989/1/12', 1], ['1989/1/13', 11], ['1989/1/14', 11], ['1989/1/15', 7], ['1989/1/16', 1], ['1989/1/17', 0], ['1989/1/18', -5], ['1989/1/19', -9], ['1989/1/20', -8], ['1989/1/21', -12], ['1989/1/22', -6], ['1989/1/23', -6], ['1989/1/24', -9], ['1989/1/25', -13], ['1989/1/26', -23], ['1989/1/27', -25], ['1989/1/28', -21], ['1989/1/29', -21], ['1989/1/30', -22], ['1989/1/31', -31], ['1989/2/1', -23], ['1989/2/2', -17], ['1989/2/3', -19], ['1989/2/4', -26], ['1989/2/5', -28], ['1989/2/6', -24], ['1989/2/7', -26], ['1989/2/8', -33], ['1989/2/9', -30], ['1989/2/10', -39], ['1989/2/11', -37], ['1989/2/12', -36], ['1989/2/13', -32], ['1989/2/14', -39], ['1989/2/15', -30], ['1989/2/16', -28], ['1989/2/17', -19], ['1989/2/18', -19], ['1989/2/19', -20], ['1989/2/20', -17], ['1989/2/21', -26], ['1989/2/22', -26], ['1989/2/23', -32], ['1989/2/24', -35], ['1989/2/25', -44], ['1989/2/26', -44], ['1989/2/27', -48], ['1989/2/28', -46], ['1989/3/1', -53], ['1989/3/2', -57], ['1989/3/3', -50], ['1989/3/4', -44], ['1989/3/5', -43], ['1989/3/6', -48], ['1989/3/7', -58], ['1989/3/8', -67], ['1989/3/9', -58], ['1989/3/10', -53], ['1989/3/11', -52], ['1989/3/12', -59], ['1989/3/13', -67], ['1989/3/14', -59], ['1989/3/15', -51], ['1989/3/16', -49], ['1989/3/17', -40], ['1989/3/18', -39], ['1989/3/19', -48], ['1989/3/20', -48], ['1989/3/21', -52], ['1989/3/22', -47], ['1989/3/23', -53], ['1989/3/24', -46], ['1989/3/25', -53], ['1989/3/26', -57], ['1989/3/27', -67], ['1989/3/28', -65], ['1989/3/29', -68], ['1989/3/30', -62], ['1989/3/31', -53], ['1989/4/1', -46], ['1989/4/2', -42], ['1989/4/3', -40], ['1989/4/4', -45], ['1989/4/5', -42], ['1989/4/6', -47], ['1989/4/7', -46], ['1989/4/8', -55], ['1989/4/9', -60], ['1989/4/10', -55], ['1989/4/11', -45], ['1989/4/12', -50], ['1989/4/13', -40], ['1989/4/14', -48], ['1989/4/15', -53], ['1989/4/16', -51], ['1989/4/17', -46], ['1989/4/18', -43], ['1989/4/19', -38], ['1989/4/20', -44]]
|
||||
const pieData = [
|
||||
{ value: 1, name: 'uniq_domain' },
|
||||
{ value: 2, name: 'bytes' },
|
||||
{ value: 3, name: 'packets' },
|
||||
{ value: 4, name: 'sessions' },
|
||||
{ value: 5, name: 'fqdn_category_name' },
|
||||
{ value: 1, name: 'uniq_domain1' },
|
||||
{ value: 2, name: 'bytes1' },
|
||||
{ value: 3, name: 'packets1' },
|
||||
{ value: 4, name: 'sessions1' },
|
||||
{ value: 5, name: 'fqdn_category_name1' }
|
||||
// { value: 1, name: 'uniq_domain2' },
|
||||
// { value: 2, name: 'bytes2' },
|
||||
// { value: 3, name: 'packets2' },
|
||||
// { value: 4, name: 'sessions2' },
|
||||
// { value: 5, name: 'fqdn_category_name2' },
|
||||
// { value: 1, name: 'uniq_domain3' },
|
||||
// { value: 2, name: 'bytes3' },
|
||||
// { value: 3, name: 'packets3' },
|
||||
// { value: 4, name: 'sessions3' },
|
||||
// { value: 5, name: 'fqdn_category_name3' },
|
||||
// { value: 1, name: 'uniq_domain4' },
|
||||
// { value: 2, name: 'bytes4' },
|
||||
// { value: 3, name: 'packets4' },
|
||||
// { value: 4, name: 'sessions4' },
|
||||
// { value: 5, name: 'fqdn_category_name4' }
|
||||
]
|
||||
export const pieTableDatas = [
|
||||
{
|
||||
domain: '12306.com',
|
||||
bytes: '170537133646',
|
||||
packets: '123454646',
|
||||
sessions: '26682',
|
||||
children: [
|
||||
{
|
||||
domain: '192.168.36.120',
|
||||
bytes: '170537133646',
|
||||
packets: '123454646',
|
||||
sessions: '26682'
|
||||
},
|
||||
{
|
||||
domain: '192.168.36.120',
|
||||
bytes: '170537133646',
|
||||
packets: '123454646',
|
||||
sessions: '26682'
|
||||
},
|
||||
{
|
||||
domain: '192.168.36.120',
|
||||
bytes: '170537133646',
|
||||
packets: '123454646',
|
||||
sessions: '26682'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
domain: '12306.com',
|
||||
bytes: '170537133646',
|
||||
packets: '123454646',
|
||||
sessions: '26682',
|
||||
children: [
|
||||
{
|
||||
domain: '192.168.36.120',
|
||||
bytes: '170537133646',
|
||||
packets: '123454646',
|
||||
sessions: '26682'
|
||||
},
|
||||
{
|
||||
domain: '192.168.36.120',
|
||||
bytes: '170537133646',
|
||||
packets: '123454646',
|
||||
sessions: '26682'
|
||||
},
|
||||
{
|
||||
domain: '192.168.36.120',
|
||||
bytes: '170537133646',
|
||||
packets: '123454646',
|
||||
sessions: '26682'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
domain: '12306.com',
|
||||
bytes: '170537133646',
|
||||
packets: '123454646',
|
||||
sessions: '26682',
|
||||
children: [
|
||||
{
|
||||
domain: '192.168.36.120',
|
||||
bytes: '170537133646',
|
||||
packets: '123454646',
|
||||
sessions: '26682'
|
||||
},
|
||||
{
|
||||
domain: '192.168.36.120',
|
||||
bytes: '170537133646',
|
||||
packets: '123454646',
|
||||
sessions: '26682'
|
||||
},
|
||||
{
|
||||
domain: '192.168.36.120',
|
||||
bytes: '170537133646',
|
||||
packets: '123454646',
|
||||
sessions: '26682'
|
||||
}
|
||||
]
|
||||
}]
|
||||
const line = {
|
||||
xAxis: {
|
||||
type: 'time'
|
||||
@@ -143,18 +37,11 @@ const line = {
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'a',
|
||||
name: '',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
data: timeData
|
||||
},
|
||||
{
|
||||
name: 'b',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
data: timeData2
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -337,4 +224,3 @@ export function getLayout (type) {
|
||||
}
|
||||
return layout
|
||||
}
|
||||
export const heightUnit = 50
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
grid-auto-flow: row;
|
||||
grid-auto-rows: 50px;
|
||||
grid-auto-rows: #{$--chart-height-unit}px;
|
||||
grid-gap: 10px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@@ -154,12 +154,9 @@
|
||||
.cn-chart__header {
|
||||
border-bottom: 1px solid $--content-right-background-color;
|
||||
.header__operations {
|
||||
display: grid;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
grid-template-rows: 30px;
|
||||
grid-template-columns: repeat(5, auto);
|
||||
grid-column-gap: 10px;
|
||||
|
||||
.header__operation.header__operation--table {
|
||||
display: flex;
|
||||
@@ -250,7 +247,7 @@
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
td {
|
||||
padding: 7px 0;
|
||||
padding: 4px 0;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,10 +6,10 @@ import en from './en'
|
||||
|
||||
const i18n = createI18n({
|
||||
locale: localStorage.getItem(storageKey.language) || 'en',
|
||||
messages: {
|
||||
/*messages: {
|
||||
cn: cn,
|
||||
en: en
|
||||
}
|
||||
}*/
|
||||
})
|
||||
export async function loadI18n () {
|
||||
const items = await getI18n()
|
||||
|
||||
@@ -104,6 +104,7 @@ import * as echarts from 'echarts'
|
||||
import * as am4Core from '@amcharts/amcharts4/core'
|
||||
import * as am4Maps from '@amcharts/amcharts4/maps'
|
||||
import am4GeoDataWorldLow from '@amcharts/amcharts4-geodata/worldChinaLow'
|
||||
import countries2 from '@amcharts/amcharts4-geodata/data/countries2'
|
||||
|
||||
import {
|
||||
isEcharts,
|
||||
@@ -115,9 +116,7 @@ import {
|
||||
getTypeCategory,
|
||||
getLayout,
|
||||
layoutConstant,
|
||||
heightUnit,
|
||||
isEchartsWithTable,
|
||||
pieTableDatas,
|
||||
isMapLine
|
||||
} from '@/components/charts/chart-options'
|
||||
import EchartsFrame from '@/components/charts/EchartsFrame'
|
||||
@@ -168,7 +167,7 @@ export default {
|
||||
const chartParams = this.chartInfo.params ? JSON.parse(this.chartInfo.params) : null // 图表参数
|
||||
if (this.isMap) {
|
||||
this.myChart = this.initMap(`chart${this.chartInfo.id}`)
|
||||
const queryParams = { startTime: 1593070343, endTime: this.endTime } // 统计数据的查询参数
|
||||
/*const queryParams = { startTime: 1593070343, endTime: this.endTime } // 统计数据的查询参数
|
||||
if (chartParams) {
|
||||
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(mapResponse => {
|
||||
if (mapResponse.data.length > 100) {
|
||||
@@ -216,22 +215,16 @@ export default {
|
||||
imageSeries.data = pointData
|
||||
}
|
||||
})
|
||||
}
|
||||
}*/
|
||||
} else if (this.isEcharts) {
|
||||
const dom = document.getElementById(`chart${this.chartInfo.id}`)
|
||||
this.myChart = echarts.init(dom)
|
||||
if (chartParams) {
|
||||
if (this.isEchartsWithTable) {
|
||||
const queryParams = { startTime: 1593070343, endTime: this.endTime } // 统计数据的查询参数
|
||||
const tableQueryParams = { startTime: 1593070343, endTime: this.endTime } // 统计数据的查询参数
|
||||
const queryParams = { startTime: 1593070343, endTime: this.endTime, limit: 10 } // 统计数据的查询参数
|
||||
const tableQueryParams = { startTime: 1593070343, endTime: this.endTime, limit: 10 } // 统计数据的查询参数
|
||||
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
|
||||
const data = response.data.map(d => {
|
||||
const trans = {}
|
||||
Object.keys(d).forEach(k => {
|
||||
trans[lineToHump(k)] = d[k]
|
||||
})
|
||||
return trans
|
||||
})
|
||||
const data = response.data.result
|
||||
this.chartOption.legend.formatter = (name) => { // 根据图表宽 显示legend的字数
|
||||
let str = name
|
||||
const length = Math.floor(dom.offsetWidth / 75)
|
||||
@@ -263,6 +256,19 @@ export default {
|
||||
})
|
||||
})
|
||||
} else {
|
||||
const queryParams = { startTime: 1593070343, endTime: this.endTime }
|
||||
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
|
||||
if (response.code === 200) {
|
||||
const seriesTemplate = this.chartOption.series[0]
|
||||
this.chartOption.series = response.data.result.map(r => {
|
||||
return {
|
||||
...seriesTemplate,
|
||||
name: r.legend,
|
||||
data: r.values
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
this.myChart.setOption(this.chartOption)
|
||||
}
|
||||
}
|
||||
@@ -294,7 +300,219 @@ export default {
|
||||
}
|
||||
},
|
||||
initMap (id) {
|
||||
const myChart = am4Core.create(id, am4Maps.MapChart)
|
||||
const chart = am4Core.create(id, am4Maps.MapChart)
|
||||
chart.geodata = am4GeoDataWorldLow
|
||||
chart.projection = new am4Maps.projections.Miller()
|
||||
const polygonSeries = chart.series.push(new am4Maps.MapPolygonSeries())
|
||||
polygonSeries.useGeodata = true
|
||||
polygonSeries.exclude = ['AQ'] // 排除南极洲
|
||||
// 鼠标悬停提示
|
||||
const polygonTemplate = polygonSeries.mapPolygons.template
|
||||
polygonTemplate.tooltipText = '{name}:{value}'
|
||||
const hs = polygonTemplate.states.create('hover')
|
||||
hs.properties.fill = am4Core.color('#91cc75')
|
||||
|
||||
// 热力图规则
|
||||
polygonSeries.heatRules.push({
|
||||
property: 'fill',
|
||||
target: polygonSeries.mapPolygons.template,
|
||||
min: am4Core.color('#ffffff'),
|
||||
max: am4Core.color(this.theme.themeColor)
|
||||
})
|
||||
|
||||
// Add expectancy data
|
||||
polygonSeries.data = [
|
||||
{ id: "AF", value: 60.524 },
|
||||
{ id: "AL", value: 77.185 },
|
||||
{ id: "DZ", value: 70.874 },
|
||||
{ id: "AO", value: 51.498 },
|
||||
{ id: "AR", value: 76.128 },
|
||||
{ id: "AM", value: 74.469 },
|
||||
{ id: "AU", value: 82.364 },
|
||||
{ id: "AT", value: 80.965 },
|
||||
{ id: "AZ", value: 70.686 },
|
||||
{ id: "BH", value: 76.474 },
|
||||
{ id: "BD", value: 70.258 },
|
||||
{ id: "BY", value: 69.829 },
|
||||
{ id: "BE", value: 80.373 },
|
||||
{ id: "BJ", value: 59.165 },
|
||||
{ id: "BT", value: 67.888 },
|
||||
{ id: "BO", value: 66.969 },
|
||||
{ id: "BA", value: 76.211 },
|
||||
{ id: "BW", value: 47.152 },
|
||||
{ id: "BR", value: 73.667 },
|
||||
{ id: "BN", value: 78.35 },
|
||||
{ id: "BG", value: 73.448 },
|
||||
{ id: "BF", value: 55.932 },
|
||||
{ id: "BI", value: 53.637 },
|
||||
{ id: "KH", value: 71.577 },
|
||||
{ id: "CM", value: 54.61 },
|
||||
{ id: "CA", value: 81.323 },
|
||||
{ id: "CV", value: 74.771 },
|
||||
{ id: "CF", value: 49.517 },
|
||||
{ id: "TD", value: 50.724 },
|
||||
{ id: "CL", value: 79.691 },
|
||||
{ id: "CN", value: 75.178 },
|
||||
{ id: "CO", value: 73.835 },
|
||||
{ id: "KM", value: 60.661 },
|
||||
{ id: "CD", value: 49.643 },
|
||||
{ id: "CG", value: 58.32 },
|
||||
{ id: "CR", value: 79.712 },
|
||||
{ id: "CI", value: 50.367 },
|
||||
{ id: "HR", value: 76.881 },
|
||||
{ id: "CU", value: 79.088 },
|
||||
{ id: "CY", value: 79.674 },
|
||||
{ id: "CZ", value: 77.552 },
|
||||
{ id: "DK", value: 79.251 },
|
||||
{ id: "GL", value: 79.251 },
|
||||
{ id: "DJ", value: 61.319 },
|
||||
{ id: "DO", value: 73.181 },
|
||||
{ id: "EC", value: 76.195 },
|
||||
{ id: "EG", value: 70.933 },
|
||||
{ id: "SV", value: 72.361 },
|
||||
{ id: "GQ", value: 52.562 },
|
||||
{ id: "ER", value: 62.329 },
|
||||
{ id: "EE", value: 74.335 },
|
||||
{ id: "ET", value: 62.983 },
|
||||
{ id: "FJ", value: 69.626 },
|
||||
{ id: "FI", value: 80.362 },
|
||||
{ id: "FR", value: 81.663 },
|
||||
{ id: "GA", value: 63.115 },
|
||||
{ id: "GF", value: 79.9 },
|
||||
{ id: "GM", value: 58.59 },
|
||||
{ id: "GE", value: 74.162 },
|
||||
{ id: "DE", value: 80.578 },
|
||||
{ id: "GH", value: 60.979 },
|
||||
{ id: "GR", value: 80.593 },
|
||||
{ id: "GT", value: 71.77 },
|
||||
{ id: "GN", value: 55.865 },
|
||||
{ id: "GW", value: 54.054 },
|
||||
{ id: "GY", value: 66.134 },
|
||||
{ id: "HT", value: 62.746 },
|
||||
{ id: "HN", value: 73.503 },
|
||||
{ id: "HK", value: 83.199 },
|
||||
{ id: "HU", value: 74.491 },
|
||||
{ id: "IS", value: 81.96 },
|
||||
{ id: "IN", value: 66.168 },
|
||||
{ id: "ID", value: 70.624 },
|
||||
{ id: "IR", value: 73.736 },
|
||||
{ id: "IQ", value: 69.181 },
|
||||
{ id: "IE", value: 80.531 },
|
||||
{ id: "IL", value: 81.641 },
|
||||
{ id: "IT", value: 82.235 },
|
||||
{ id: "JM", value: 73.338 },
|
||||
{ id: "JP", value: 83.418 },
|
||||
{ id: "JO", value: 73.7 },
|
||||
{ id: "KZ", value: 66.394 },
|
||||
{ id: "KE", value: 61.115 },
|
||||
{ id: "KP", value: 69.701 },
|
||||
{ id: "KR", value: 81.294 },
|
||||
{ id: "KW", value: 74.186 },
|
||||
{ id: "KG", value: 67.37 },
|
||||
{ id: "LA", value: 67.865 },
|
||||
{ id: "LV", value: 72.045 },
|
||||
{ id: "LB", value: 79.716 },
|
||||
{ id: "LS", value: 48.947 },
|
||||
{ id: "LR", value: 60.23 },
|
||||
{ id: "LY", value: 75.13 },
|
||||
{ id: "LT", value: 71.942 },
|
||||
{ id: "LU", value: 80.371 },
|
||||
{ id: "MK", value: 75.041 },
|
||||
{ id: "MG", value: 64.28 },
|
||||
{ id: "MW", value: 54.798 },
|
||||
{ id: "MY", value: 74.836 },
|
||||
{ id: "ML", value: 54.622 },
|
||||
{ id: "MR", value: 61.39 },
|
||||
{ id: "MU", value: 73.453 },
|
||||
{ id: "MX", value: 77.281 },
|
||||
{ id: "MD", value: 68.779 },
|
||||
{ id: "MN", value: 67.286 },
|
||||
{ id: "ME", value: 74.715 },
|
||||
{ id: "MA", value: 70.714 },
|
||||
{ id: "EH", value: 70.714 },
|
||||
{ id: "MZ", value: 49.91 },
|
||||
{ id: "MM", value: 65.009 },
|
||||
{ id: "NA", value: 64.014 },
|
||||
{ id: "NP", value: 67.989 },
|
||||
{ id: "NL", value: 80.906 },
|
||||
{ id: "NZ", value: 80.982 },
|
||||
{ id: "NI", value: 74.515 },
|
||||
{ id: "NE", value: 57.934 },
|
||||
{ id: "NG", value: 52.116 },
|
||||
{ id: "NO", value: 81.367 },
|
||||
{ id: "SJ", value: 81.367 },
|
||||
{ id: "OM", value: 76.287 },
|
||||
{ id: "PK", value: 66.42 },
|
||||
{ id: "PA", value: 77.342 },
|
||||
{ id: "PG", value: 62.288 },
|
||||
{ id: "PY", value: 72.181 },
|
||||
{ id: "PE", value: 74.525 },
|
||||
{ id: "PH", value: 68.538 },
|
||||
{ id: "PL", value: 76.239 },
|
||||
{ id: "PT", value: 79.732 },
|
||||
{ id: "QA", value: 78.231 },
|
||||
{ id: "RO", value: 73.718 },
|
||||
{ id: "RU", value: 67.874 },
|
||||
{ id: "RW", value: 63.563 },
|
||||
{ id: "SA", value: 75.264 },
|
||||
{ id: "SN", value: 63.3 },
|
||||
{ id: "RS", value: 73.934 },
|
||||
{ id: "SL", value: 45.338 },
|
||||
{ id: "SG", value: 82.155 },
|
||||
{ id: "SK", value: 75.272 },
|
||||
{ id: "SI", value: 79.444 },
|
||||
{ id: "SB", value: 67.465 },
|
||||
{ id: "SO", value: 54 },
|
||||
{ id: "ZA", value: 56.271 },
|
||||
{ id: "SS", value: 54.666 },
|
||||
{ id: "ES", value: 81.958 },
|
||||
{ id: "LK", value: 74.116 },
|
||||
{ id: "SD", value: 61.875 },
|
||||
{ id: "SR", value: 70.794 },
|
||||
{ id: "SZ", value: 48.91 },
|
||||
{ id: "SE", value: 81.69 },
|
||||
{ id: "CH", value: 82.471 },
|
||||
{ id: "SY", value: 71 },
|
||||
{ id: "TW", value: 79.45 },
|
||||
{ id: "TJ", value: 67.118 },
|
||||
{ id: "TZ", value: 60.885 },
|
||||
{ id: "TH", value: 74.225 },
|
||||
{ id: "TL", value: 67.033 },
|
||||
{ id: "TG", value: 56.198 },
|
||||
{ id: "TT", value: 69.761 },
|
||||
{ id: "TN", value: 75.632 },
|
||||
{ id: "TR", value: 74.938 },
|
||||
{ id: "TM", value: 65.299 },
|
||||
{ id: "UG", value: 58.668 },
|
||||
{ id: "UA", value: 68.414 },
|
||||
{ id: "AE", value: 76.671 },
|
||||
{ id: "GB", value: 80.396 },
|
||||
{ id: "US", value: 78.797 },
|
||||
{ id: "UY", value: 77.084 },
|
||||
{ id: "UZ", value: 68.117 },
|
||||
{ id: "VE", value: 74.477 },
|
||||
{ id: "PS", value: 73.018 },
|
||||
{ id: "VN", value: 75.793 },
|
||||
{ id: "YE", value: 62.923 },
|
||||
{ id: "ZM", value: 57.037 },
|
||||
{ id: "ZW", value: 58.142 }
|
||||
];
|
||||
|
||||
const lineSeries = chart.series.push(new am4Maps.MapLineSeries())
|
||||
lineSeries.mapLines.template.stroke = am4Core.color('#A258EC')
|
||||
lineSeries.mapLines.template.line.nonScalingStroke = true
|
||||
lineSeries.mapLines.template.line.strokeDasharray = '4 3'
|
||||
lineSeries.data = [
|
||||
{
|
||||
multiGeoLine: mapResponse3.data.map(d => {
|
||||
return [{ id: d.server_id }, { id: d.client_id }]
|
||||
})
|
||||
/*multiGeoLine: mapResponse.data.map(d => {
|
||||
return [{ latitude: parseFloat(d.server_latitude), longitude: parseFloat(d.server_longitude) }, { latitude: parseFloat(d.client_latitude), longitude: parseFloat(d.client_longitude) }]
|
||||
})*/
|
||||
}
|
||||
]
|
||||
/*const myChart = am4Core.create(id, am4Maps.MapChart)
|
||||
myChart.geodata = am4GeoDataWorldLow
|
||||
myChart.projection = new am4Maps.projections.Miller()
|
||||
const polygonSeries = myChart.series.push(new am4Maps.MapPolygonSeries())
|
||||
@@ -303,9 +521,9 @@ export default {
|
||||
const polygonTemplate = polygonSeries.mapPolygons.template
|
||||
polygonTemplate.tooltipText = '{name}'
|
||||
polygonTemplate.fill = am4Core.color('#E7EDF6')
|
||||
/* const hs = polygonTemplate.states.create('hover') // 添加hover事件
|
||||
hs.properties.fill = am4Core.color('#B7BDC6') */
|
||||
return myChart
|
||||
const hs = polygonTemplate.states.create('hover') // 添加hover事件
|
||||
hs.properties.fill = am4Core.color('#B7BDC6')
|
||||
return myChart*/
|
||||
},
|
||||
pageJump (val) {
|
||||
this.table.currentPageData = this.getTargetPageData(val, this.table.pageSize, this.table.tableData)
|
||||
@@ -346,7 +564,45 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const mapResponse3 = JSON.parse(`{
|
||||
"code": "200666",
|
||||
"data": [{
|
||||
"level": 0,
|
||||
"server_id": "US",
|
||||
"server_longitude": "110.290534",
|
||||
"server_latitude": "30.816222",
|
||||
"server_country": "America",
|
||||
"server_region": "Washington",
|
||||
"client_id": "CN",
|
||||
"client_longitude": "116.352963",
|
||||
"client_latitude": "40.409079",
|
||||
"client_country": "China",
|
||||
"client_region": "Beijing",
|
||||
"bytes": 27010,
|
||||
"sessions": 40
|
||||
}, {
|
||||
"level": 0,
|
||||
"server_id": "RU",
|
||||
"server_longitude": "2.352222",
|
||||
"server_latitude": "48.856614",
|
||||
"server_country": "America",
|
||||
"server_region": "Washington",
|
||||
"client_id": "CN",
|
||||
"client_longitude": "-74.005973",
|
||||
"client_latitude": "40.712775",
|
||||
"client_country": "China",
|
||||
"client_region": "Beijing",
|
||||
"bytes": 67010,
|
||||
"sessions": 30
|
||||
}],
|
||||
"status": 200,
|
||||
"statistics": {
|
||||
"result_rows": 0,
|
||||
"elapsed": 0,
|
||||
"rows_read": 0,
|
||||
"result_size": 0
|
||||
}
|
||||
}`)
|
||||
const mapResponse = JSON.parse(`{
|
||||
"code": "200666",
|
||||
"data": [{
|
||||
@@ -379,7 +635,28 @@ const mapResponse = JSON.parse(`{
|
||||
"rows_read": 0,
|
||||
"result_size": 0
|
||||
}
|
||||
}`)
|
||||
}`)/*
|
||||
const mapResponse2 = JSON.parse(`{
|
||||
"code": "200666",
|
||||
"data": [{
|
||||
"id": "US",
|
||||
"name": "United States",
|
||||
"value": 100,
|
||||
"fill": am4core.color("#F05C5C")
|
||||
}, {
|
||||
"id": "FR",
|
||||
"name": "France",
|
||||
"value": 50,
|
||||
"fill": am4core.color("#5C5CFF")
|
||||
}],
|
||||
"status": 200,
|
||||
"statistics": {
|
||||
"result_rows": 0,
|
||||
"elapsed": 0,
|
||||
"rows_read": 0,
|
||||
"result_size": 0
|
||||
}
|
||||
}`)*/
|
||||
const tableResponse = JSON.parse(`{
|
||||
"status": 200,
|
||||
"success": true,
|
||||
|
||||
@@ -51,16 +51,7 @@ export default {
|
||||
}
|
||||
},
|
||||
async mounted () {
|
||||
const panels = await getPanelList({ type: this.panelType })
|
||||
if (panels && panels.length > 0) {
|
||||
this.panel = panels[0]
|
||||
}
|
||||
if (this.panel.id) {
|
||||
this.chartList = (await getChartList({ panelId: this.panel.id })).map(chart => { // 记得改回mao
|
||||
chart.i = chart.id
|
||||
return chart
|
||||
})
|
||||
}
|
||||
await this.init()
|
||||
},
|
||||
setup (props, ctx) {
|
||||
// data
|
||||
@@ -101,16 +92,16 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
async init () {
|
||||
// const panels = await getPanelList({ type: this.panelType })
|
||||
// if (panels && panels.length > 0) {
|
||||
// this.panel = panels[0]
|
||||
// }
|
||||
// if (this.panel.id) {
|
||||
// this.chartList = (await getChartList({ panelId: this.panel.id })).map(chart => {
|
||||
// chart.i = chart.id
|
||||
// return chart
|
||||
// })
|
||||
// }
|
||||
const panels = await getPanelList({ type: this.panelType })
|
||||
if (panels && panels.length > 0) {
|
||||
this.panel = panels[0]
|
||||
}
|
||||
if (this.panel.id) {
|
||||
this.chartList = (await getChartList({ panelId: this.panel.id, pageSize: -1 })).map(chart => {
|
||||
chart.i = chart.id
|
||||
return chart
|
||||
})
|
||||
}
|
||||
},
|
||||
timeRefreshChange () {
|
||||
if (!this.$refs.dateTimeRange) {
|
||||
|
||||
Reference in New Issue
Block a user