gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复 echarts 部分问题，完善部分功能

Browse Source
This commit is contained in:
@changcode
2022-07-12 20:13:51 +08:00
parent 603aa49d33
commit b1891dc541
9 changed files with 191 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/css/components/views/charts/NetworkOverviewDdosDetection.scss
View File

@@ -1,8 +1,9 @@
.ddos-detection {
display: flex;
height: 100%;
width: 85%;
margin: auto;
padding: 0 20px;
border: 1px solid #E2E5EC;
border-radius: 4px;
flex-direction: column;
justify-content: space-evenly;
.ddos-detection-type {

19
src/assets/css/components/views/charts/NetworkOverviewLine.scss
View File

@@ -2,6 +2,25 @@
height: 100%;
width: 100%;
position: relative;
border: 1px solid #E2E5EC;
border-radius: 4px;
.chart-drawing {
div:nth-of-type(2) {
.cn-chart-tooltip {
display: flex;
justify-content: space-between;
.cn-chart-tooltip-box {
.cn-chart-tooltip__color.cn-chart-tooltip-value {
font-family: NotoSansHans-Medium;
font-size: 12px;
color: #353636;
line-height: 12px;
font-weight: 500;
}
}
}
}
}
#chart {
width: 1288px;
height: 340px;

6
src/assets/css/components/views/charts/NetworkOverviewPerformanceEvent.scss
View File

@@ -1,9 +1,11 @@
.performance-event {
width: 100%;
height: 100%;
border: 1px solid #E2E5EC;
border-radius: 4px;
.performance-event-pie {
width: 100%;
div {
height: 175px;
height: 165px;
width: 324px;
}
.performance-event-pie-hr {

2
src/utils/constants.js
View File

@@ -195,6 +195,8 @@ export const chartColor2 = ['#86B565', '#A37FA7', '#EFAFC7', '#EFC48F', '#B4B1A8
export const chartColor3 = ['#00A7AB', '#7FA054', '#35ADDA', '#E48F3E', '#98709B']
export const chartColor4 = ['#E5F6F6', '#F2F6EE', '#EBF7FC', '#FCF4EB', '#F5F1F5']
export const iso36112 = {
[storageKey.iso36112Capital]: 'data/countriesWithCapital',
[storageKey.iso36112WorldLow]: 'worldChinaLow',

25
src/views/charts/charts/tools.js
View File

@@ -459,3 +459,28 @@ export function categoryBarTooltipFormatter (params, type) {
str += '</div>'
return str
}
export function stackedLineTooltipFormatter (params) {
let str = '<div>'
params.forEach((item, i) => {
const tData = item.data[0]
if (i === 0) {
str += '<div style="margin-bottom: 5px">'
str += dateFormatByAppearance(tData)
str += '</div>'
}
str += '<div class="cn-chart-tooltip">'
str += '<span class="cn-chart-tooltip-box">'
str += item.marker
str += `<span class="cn-chart-tooltip-content">
${item.seriesName}
</span>`
str += '</span>'
str += `<span class="cn-chart-tooltip-value cn-chart-tooltip__color">
${unitConvert(item.data[1], 'number').join(' ')}
</span>`
str += '</div>'
})
str += '</div>'
return str
}

2
src/views/charts2/Chart.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="cn-chart" style="background-color: lightgray;height: 100%;">
<div class="cn-chart" style="height: 100%;">
<loading :loading="loading"></loading>
<chart-no-data v-if="isNoData"></chart-no-data>
<network-overview-line

163
src/views/charts2/charts/NetworkOverviewLine.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="line">
<div id="chart"></div>
<div class="chart-drawing" id="chart"></div>
<div class="line-select">
<div class="line-select-metric">
<span>{{$t('network.metric')}}:</span>
@@ -33,7 +33,7 @@
</div>
<div class="line-value">
<div class="line-value-mpackets" v-for="item in mpackets" :key="item">
<span>{{item}} </span><span>mpackets/s</span>
<span>{{unitConvert(item, unitTypes.number)[0]}}</span>{{unitConvert(item, unitTypes.number)[1]}}<span>packets/s</span>
</div>
</div>
</div>
@@ -43,7 +43,9 @@
import * as echarts from 'echarts'
import { stackedLineChartOption } from '@/views/charts2/charts/options/pie'
import unitConvert from '@/utils/unit-convert'
import { unitTypes } from '@/utils/constants.js'
import { shallowRef } from 'vue'
import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools'
export default {
name: 'NetworkOverviewLine',
props: {
@@ -86,8 +88,9 @@ export default {
}
],
value2: '',
mpackets: [42, 1, 2, 1, 12],
mpackets: [4212211, 111, 112, 111, 1211],
unitConvert,
unitTypes,
chartDateObject: []
}
},
@@ -101,15 +104,15 @@ export default {
dateArr: [
{
stat_time: 1652544000000,
rate: 100
rate: 10000000
},
{
stat_time: 1652544300000,
rate: 50
rate: 20000000
},
{
stat_time: 1652544600000,
rate: 20
rate: 30000000
},
{
stat_time: 1652544900000,
@@ -117,123 +120,123 @@ export default {
},
{
stat_time: 1652545200000,
rate: 45
rate: 40000000
},
{
stat_time: 1652545500000,
rate: 100
rate: 11111111
},
{
stat_time: 1652545800000,
rate: 27
rate: 11111111
},
{
stat_time: 1652546100000,
rate: 45
rate: 11111111
},
{
stat_time: 1652546400000,
rate: 67
rate: 11111111
},
{
stat_time: 1652546700000,
rate: 87
rate: 8000000
},
{
stat_time: 1652547000000,
rate: 32
rate: 11111111
},
{
stat_time: 1652547300000,
rate: 56
rate: 11111111
},
{
stat_time: 1652547600000,
rate: 25
rate: 11111111
},
{
stat_time: 1652547900000,
rate: 56
rate: 11111111
},
{
stat_time: 1652548200000,
rate: 15
rate: 9000000
},
{
stat_time: 1652548500000,
rate: 54
rate: 11111111
},
{
stat_time: 1652548800000,
rate: 56
rate: 11111111
},
{
stat_time: 1652549100000,
rate: 76
rate: 11111111
},
{
stat_time: 1652549400000,
rate: 79
rate: 11111111
},
{
stat_time: 1652549700000,
rate: 76
rate: 11111111
},
{
stat_time: 1652550000000,
rate: 34
rate: 11111111
},
{
stat_time: 1652550300000,
rate: 34
rate: 11111111
},
{
stat_time: 1652550600000,
rate: 34
rate: 11111111
},
{
stat_time: 1652550900000,
rate: 34
rate: 11111111
},
{
stat_time: 1652551200000,
rate: 34
rate: 11111111
},
{
stat_time: 1652551500000,
rate: 65
rate: 11111111
},
{
stat_time: 1652551800000,
rate: 66
rate: 11111111
},
{
stat_time: 1652552100000,
rate: 34
rate: 11111111
},
{
stat_time: 1652552400000,
rate: 23
rate: 11111111
},
{
stat_time: 1652552700000,
rate: 32
rate: 11111111
},
{
stat_time: 1652553000000,
rate: 54
rate: 11111111
},
{
stat_time: 1652553300000,
rate: 32
rate: 11111111
},
{
stat_time: 1652553600000,
rate: 43
rate: 11111111
},
{
stat_time: 1652553900000,
rate: 46
rate: 11111111
},
{
stat_time: 1652554200000,
@@ -241,7 +244,7 @@ export default {
},
{
stat_time: 1652554500000,
rate: 34
rate: 11111111
},
{
stat_time: 1652554800000,
@@ -469,11 +472,11 @@ export default {
},
{
stat_time: 1652571600000,
rate: 13441235
rate: 33441235
},
{
stat_time: 1652571900000,
rate: 13409372
rate: 33409372
},
{
stat_time: 1652572200000,
@@ -1257,11 +1260,11 @@ export default {
dateArr: [
{
stat_time: 1652544000000,
rate: 59770054
rate: 11000000
},
{
stat_time: 1652544300000,
rate: 57705198
rate: 97705191
},
{
stat_time: 1652544600000,
@@ -1269,11 +1272,11 @@ export default {
},
{
stat_time: 1652544900000,
rate: 53932331
rate: 23932331
},
{
stat_time: 1652545200000,
rate: 50820084
rate: 70820084
},
{
stat_time: 1652545500000,
@@ -1285,7 +1288,7 @@ export default {
},
{
stat_time: 1652546100000,
rate: 45092019
rate: 55092019
},
{
stat_time: 1652546400000,
@@ -1309,7 +1312,7 @@ export default {
},
{
stat_time: 1652547900000,
rate: 32593269
rate: 42593269
},
{
stat_time: 1652548200000,
@@ -1605,7 +1608,7 @@ export default {
},
{
stat_time: 1652570100000,
rate: 11730266
rate: 41730266
},
{
stat_time: 1652570400000,
@@ -1625,11 +1628,11 @@ export default {
},
{
stat_time: 1652571600000,
rate: 13441235
rate: 23441235
},
{
stat_time: 1652571900000,
rate: 13409372
rate: 23409372
},
{
stat_time: 1652572200000,
@@ -2413,7 +2416,7 @@ export default {
dateArr: [
{
stat_time: 1652544000000,
rate: 59770054
rate: 12000000
},
{
stat_time: 1652544300000,
@@ -2421,15 +2424,15 @@ export default {
},
{
stat_time: 1652544600000,
rate: 54907153
rate: 84907153
},
{
stat_time: 1652544900000,
rate: 53932331
rate: 83932331
},
{
stat_time: 1652545200000,
rate: 50820084
rate: 60820084
},
{
stat_time: 1652545500000,
@@ -2441,7 +2444,7 @@ export default {
},
{
stat_time: 1652546100000,
rate: 45092019
rate: 25092019
},
{
stat_time: 1652546400000,
@@ -2449,7 +2452,7 @@ export default {
},
{
stat_time: 1652546700000,
rate: 42635307
rate: 62635307
},
{
stat_time: 1652547000000,
@@ -2761,7 +2764,7 @@ export default {
},
{
stat_time: 1652570100000,
rate: 11730266
rate: 21730266
},
{
stat_time: 1652570400000,
@@ -2781,11 +2784,11 @@ export default {
},
{
stat_time: 1652571600000,
rate: 13441235
rate: 73441235
},
{
stat_time: 1652571900000,
rate: 13409372
rate: 73409372
},
{
stat_time: 1652572200000,
@@ -3569,23 +3572,23 @@ export default {
dateArr: [
{
stat_time: 1652544000000,
rate: 59770054
rate: 13000000
},
{
stat_time: 1652544300000,
rate: 57705198
rate: 37705198
},
{
stat_time: 1652544600000,
rate: 54907153
rate: 64907153
},
{
stat_time: 1652544900000,
rate: 53932331
rate: 93932331
},
{
stat_time: 1652545200000,
rate: 50820084
rate: 30820084
},
{
stat_time: 1652545500000,
@@ -3597,7 +3600,7 @@ export default {
},
{
stat_time: 1652546100000,
rate: 45092019
rate: 75092019
},
{
stat_time: 1652546400000,
@@ -3605,7 +3608,7 @@ export default {
},
{
stat_time: 1652546700000,
rate: 42635307
rate: 22635307
},
{
stat_time: 1652547000000,
@@ -3621,7 +3624,7 @@ export default {
},
{
stat_time: 1652547900000,
rate: 32593269
rate: 72593269
},
{
stat_time: 1652548200000,
@@ -3917,7 +3920,7 @@ export default {
},
{
stat_time: 1652570100000,
rate: 11730266
rate: 91730266
},
{
stat_time: 1652570400000,
@@ -3937,11 +3940,11 @@ export default {
},
{
stat_time: 1652571600000,
rate: 13441235
rate: 93441235
},
{
stat_time: 1652571900000,
rate: 13409372
rate: 93409372
},
{
stat_time: 1652572200000,
@@ -4725,19 +4728,19 @@ export default {
dateArr: [
{
stat_time: 1652544000000,
rate: 59770054
rate: 14000000
},
{
stat_time: 1652544300000,
rate: 57705198
rate: 77705198
},
{
stat_time: 1652544600000,
rate: 54907153
rate: 24907153
},
{
stat_time: 1652544900000,
rate: 53932331
rate: 33932331
},
{
stat_time: 1652545200000,
@@ -4753,7 +4756,7 @@ export default {
},
{
stat_time: 1652546100000,
rate: 45092019
rate: 15092019
},
{
stat_time: 1652546400000,
@@ -4761,7 +4764,7 @@ export default {
},
{
stat_time: 1652546700000,
rate: 42635307
rate: 82635307
},
{
stat_time: 1652547000000,
@@ -4777,7 +4780,7 @@ export default {
},
{
stat_time: 1652547900000,
rate: 32593269
rate: 12593269
},
{
stat_time: 1652548200000,
@@ -5073,7 +5076,7 @@ export default {
},
{
stat_time: 1652570100000,
rate: 11730266
rate: 31730266
},
{
stat_time: 1652570400000,
@@ -5093,11 +5096,11 @@ export default {
},
{
stat_time: 1652571600000,
rate: 13441235
rate: 63441235
},
{
stat_time: 1652571900000,
rate: 13409372
rate: 63409372
},
{
stat_time: 1652572200000,
@@ -5884,6 +5887,10 @@ export default {
this.chartOption.series.forEach((t, i) => {
t.data = this.chartDateObject[i].dateArr.map(t => [t.stat_time, t.rate])
})
this.chartOption.tooltip.formatter = (params) => {
const str = stackedLineTooltipFormatter(params)
return str
}
this.myChart.setOption(this.chartOption)
},
// 点击前，高亮legend个数

4
src/views/charts2/charts/NetworkOverviewPerformanceEvent.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="performance-event">
<div class="performance-event-pie">
<div id="chart1"></div>
<div class="chart-drawing" id="chart1"></div>
<div class="performance-event-pie-hr"></div>
<div id="chart2"></div>
<div class="chart-drawing" id="chart2"></div>
</div>
<el-button class="pie-button" size="small">{{$t('network.dashboards')}}<i class="cn-icon cn-icon-arrow-right"></i></el-button>
</div>

64
src/views/charts2/charts/options/pie.js
View File

@@ -1,4 +1,5 @@
import { chartColor1, chartColor2, chartColor3 } from '@/utils/constants'
import { chartColor1, chartColor2, chartColor3, chartColor4, unitTypes } from '@/utils/constants'
import unitConvert from '@/utils/unit-convert'
import * as echarts from 'echarts'
export const pieChartOption1 = {
@@ -110,13 +111,7 @@ export const pieChartOption2 = {
export const stackedLineChartOption = {
color: chartColor3,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
trigger: 'axis'
},
legend: {
type: 'scroll',
@@ -149,16 +144,24 @@ export const stackedLineChartOption = {
],
yAxis: [
{
type: 'value'
type: 'value',
axisLabel: {
formatter: function (value) {
return unitConvert(value, unitTypes.number).join('')
}
}
}
],
series: [
{
name: 'Total',
type: 'line',
stack: 'Total',
symbol: 'circle',
hoverAnimation: false,
smooth: true,
symbolSize: function (value, params) {
return symbolSizeSortChange(0, value[0])
},
showSymbol: false,
emphasis: {
focus: 'series'
@@ -185,9 +188,11 @@ export const stackedLineChartOption = {
{
name: 'Inbound',
type: 'line',
stack: 'Total',
symbol: 'circle',
smooth: true,
symbolSize: function (value, params) {
return symbolSizeSortChange(1, value[0])
},
showSymbol: false,
emphasis: {
focus: 'series'
@@ -214,9 +219,11 @@ export const stackedLineChartOption = {
{
name: 'Outbound',
type: 'line',
stack: 'Total',
symbol: 'circle',
smooth: true,
symbolSize: function (value, params) {
return symbolSizeSortChange(2, value[0])
},
showSymbol: false,
emphasis: {
focus: 'series'
@@ -243,9 +250,11 @@ export const stackedLineChartOption = {
{
name: 'Internal',
type: 'line',
stack: 'Total',
symbol: 'circle',
smooth: true,
symbolSize: function (value, params) {
return symbolSizeSortChange(3, value[0])
},
showSymbol: false,
emphasis: {
focus: 'series'
@@ -272,9 +281,11 @@ export const stackedLineChartOption = {
{
name: 'Other',
type: 'line',
stack: 'Total',
symbol: 'circle',
smooth: true,
symbolSize: function (value, params) {
return symbolSizeSortChange(4, value[0])
},
showSymbol: false,
emphasis: {
focus: 'series'
@@ -300,3 +311,28 @@ export const stackedLineChartOption = {
}
]
}
const sizes = [3, 6, 8, 9, 10]
function symbolSizeSortChange (index, time) {
const totalData = stackedLineChartOption.series[0].data.find(t => t[0] === time) // [time, value]
const inboundData = stackedLineChartOption.series[1].data.find(t => t[0] === time)
const outboundData = stackedLineChartOption.series[2].data.find(t => t[0] === time)
const internalData = stackedLineChartOption.series[3].data.find(t => t[0] === time)
const otherData = stackedLineChartOption.series[4].data.find(t => t[0] === time)
totalData[2] = 0
inboundData[2] = 1
outboundData[2] = 2
internalData[2] = 3
otherData[2] = 4
const dataIntegrationArray = [totalData, inboundData, outboundData, internalData, otherData]
dataIntegrationArray.sort((a, b) => { return a[1] - b[1] })
const sortIndex = dataIntegrationArray.findIndex(a => a[2] === index)
// stackedLineChartOption.series[sortIndex].itemStyle = {
// emphasis: {
// borderColor: chartColor4[sortIndex],
// borderWidth: 2,
// shadowColor: chartColor4[sortIndex],
// shadowBlur: sizes[sortIndex] + 2
// }
// }
return sizes[sortIndex]
}