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

CN-342 图表优化

Browse Source 
1.type=11的折线图，Y轴最小间隔是1，需要将其放开为包含小数，使曲线可以充满图表
2.detection顶部柱状图优化调整：
    (1).不同严重程度的柱体展示从并排改为堆叠
    (2).x轴时间格式精简为mm:ss，且数量过多导致x轴label重叠时，隐藏一部分label
This commit is contained in:
hyx
2022-03-09 15:05:46 +08:00
parent 1fda36a1bd
commit 9aedf25dd2
5 changed files with 75 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/utils/date-util.js
View File

@@ -42,5 +42,5 @@ export function getNowTime (interval) {
} }
// 日期格式转换 // 日期格式转换
export function rTime (date) { export function rTime (date) {
return window.$dayJs.tz(new Date(date)).format('YYYY-MM-DD HH:mm:ss') return window.$dayJs.tz(new Date(date)).format('mm:ss')
} }

9
src/views/charts/charts/ChartEchart.vue
View File

@@ -100,6 +100,15 @@ export default {
unitType: chartParams.unitType ? chartParams.unitType : 'number' unitType: chartParams.unitType ? chartParams.unitType : 'number'
} }
}) })
}else {
this.chartOption.series[0].data = this.chartData.map(d => {
return {
name: lineToSpace(d.name),
data: d,
value: parseInt(d.num),
unitType: chartParams.unitType ? chartParams.unitType : 'number'
}
})
} }
} else { } else {
const seriesTemplate = this.chartOption.series[0] const seriesTemplate = this.chartOption.series[0]

3
src/views/charts/charts/options/line.js
View File

@@ -24,8 +24,7 @@ export const line = {
formatter: function (value, index, a, b) { formatter: function (value, index, a, b) {
return unitConvert(value, unitTypes.number).join(' ') return unitConvert(value, unitTypes.number).join(' ')
} }
}, }
minInterval: 1
}, },
animation: false, animation: false,
grid: { grid: {

103
src/views/detections/Index.vue
View File

@@ -235,118 +235,99 @@ export default {
initEventSeverityTrendData (params) { initEventSeverityTrendData (params) {
this.loading = true this.loading = true
getData(api.detection[this.pageType].eventSeverityTrend, params).then(data => { getData(api.detection[this.pageType].eventSeverityTrend, params).then(data => {
/* data = [ /*data = [
{ {
"stat_time": "2022-01-01T10:07:03.008Z", "statTime": "2022-01-01T10:07:03.008Z",
"event_severity": "critical", "eventSeverity": "critical",
"count": 5 "count": 5
}, },
{ {
"stat_time": "2022-01-02T10:07:03.008Z", "statTime": "2022-01-02T10:07:03.008Z",
"event_severity": "critical", "eventSeverity": "critical",
"count": 15 "count": 15
},{ },{
"stat_time": "2022-01-03T10:07:03.008Z", "statTime": "2022-01-03T10:07:03.008Z",
"event_severity": "critical", "eventSeverity": "critical",
"count": 25 "count": 25
}, },
{ {
"stat_time": "2022-01-04T10:07:03.008Z", "statTime": "2022-01-04T10:07:03.008Z",
"event_severity": "critical", "eventSeverity": "critical",
"count": 7 "count": 7
},{ },{
"stat_time": "2022-01-01T10:07:03.008Z", "statTime": "2022-01-01T10:07:03.008Z",
"event_severity": "high", "eventSeverity": "high",
"count": 8 "count": 8
}, },
{ {
"stat_time": "2022-01-02T10:07:03.008Z", "statTime": "2022-01-02T10:07:03.008Z",
"event_severity": "high", "eventSeverity": "high",
"count": 2 "count": 2
},{ },{
"stat_time": "2022-01-03T10:07:03.008Z", "statTime": "2022-01-03T10:07:03.008Z",
"event_severity": "high", "eventSeverity": "high",
"count": 25 "count": 25
}, },
{ {
"stat_time": "2022-01-04T10:07:03.008Z", "statTime": "2022-01-04T10:07:03.008Z",
"event_severity": "high", "eventSeverity": "high",
"count": 7 "count": 7
},{ },{
"stat_time": "2022-01-01T10:07:03.008Z", "statTime": "2022-01-01T10:07:03.008Z",
"event_severity": "medium", "eventSeverity": "medium",
"count": 9 "count": 9
}, },
{ {
"stat_time": "2022-01-02T10:07:03.008Z", "statTime": "2022-01-02T10:07:03.008Z",
"event_severity": "medium", "eventSeverity": "medium",
"count": 15 "count": 15
},{ },{
"stat_time": "2022-01-03T10:07:03.008Z", "statTime": "2022-01-03T10:07:03.008Z",
"event_severity": "medium", "eventSeverity": "medium",
"count": 35 "count": 35
}, },
{ {
"stat_time": "2022-01-04T10:07:03.008Z", "statTime": "2022-01-04T10:07:03.008Z",
"event_severity": "medium", "eventSeverity": "medium",
"count": 7 "count": 7
},{ },{
"stat_time": "2022-01-01T10:07:03.008Z", "statTime": "2022-01-01T10:07:03.008Z",
"event_severity": "low", "eventSeverity": "low",
"count": 5 "count": 5
}, },
{ {
"stat_time": "2022-01-02T10:07:03.008Z", "statTime": "2022-01-02T10:07:03.008Z",
"event_severity": "low", "eventSeverity": "low",
"count": 1 "count": 1
},{ },{
"stat_time": "2022-01-03T10:07:03.008Z", "statTime": "2022-01-03T10:07:03.008Z",
"event_severity": "low", "eventSeverity": "low",
"count": 25 "count": 25
}, },
{ {
"stat_time": "2022-01-04T10:07:03.008Z", "statTime": "2022-01-04T10:07:03.008Z",
"event_severity": "low", "eventSeverity": "low",
"count": 17 "count": 17
},{ },{
"stat_time": "2022-01-01T10:07:03.008Z", "statTime": "2022-01-01T10:07:03.008Z",
"event_severity": "info", "eventSeverity": "info",
"count": 5 "count": 5
}, },
{ {
"stat_time": "2022-01-02T10:07:03.008Z", "statTime": "2022-01-02T10:07:03.008Z",
"event_severity": "info", "eventSeverity": "info",
"count": 15 "count": 15
},{ },{
"stat_time": "2022-01-03T10:07:03.008Z", "statTime": "2022-01-03T10:07:03.008Z",
"event_severity": "info", "eventSeverity": "info",
"count": 25 "count": 25
}, },
{ {
"stat_time": "2022-01-04T10:07:03.008Z", "statTime": "2022-01-04T10:07:03.008Z",
"event_severity": "info", "eventSeverity": "info",
"count": 27 "count": 27
}, },
] */ ]*/
/* data2 = [
{
legend: 'critical',
values: [[1435781430781, '999'], [1435781431781, '222'], [1435781432781, '11'], [1435781433781, '3']]
},
{
legend: 'high',
values: [[1435781430781, '2'], [1435781431781, '3'], [1435781432781, '6'], [1435781433781, '4']]
}, {
legend: 'medium',
values: [[1435781430781, '4'], [1435781431781, '1'], [1435781432781, '5'], [1435781433781, '3']]
}, {
legend: 'low',
values: [[1435781430781, '1'], [1435781431781, '4'], [1435781432781, '1'], [1435781433781, '3']]
}, {
legend: 'info',
values: [[1435781430781, '5'], [1435781431781, '7'], [1435781432781, '5'], [1435781433781, '8']]
}
] */
this.eventSeverityData = data this.eventSeverityData = data
if (!this.$_.isEmpty(data)) { if (!this.$_.isEmpty(data)) {
const dataMap = new Map() const dataMap = new Map()

24
src/views/detections/options/detectionOptions.js
View File

@@ -52,7 +52,7 @@ export const multipleBarOption = {
legend: { legend: {
icon: 'circle', icon: 'circle',
top: 10, top: 10,
right: 10, right: 30,
itemWidth: 10, // 设置宽度 itemWidth: 10, // 设置宽度
itemHeight: 10 // 设置高度 itemHeight: 10 // 设置高度
}, },
@@ -72,7 +72,7 @@ export const multipleBarOption = {
}, },
axisLabel: { axisLabel: {
color: '#737373', color: '#737373',
interval: 0 interval: 'auto'
}, },
splitLine: { splitLine: {
show: false show: false
@@ -104,6 +104,10 @@ export const multipleBarOption = {
{ {
name: 'critical', name: 'critical',
type: 'bar', type: 'bar',
stack:'eventSeverityTrend',
emphasis: {
focus: 'series'
},
barWidth: 15, barWidth: 15,
seriesLayoutBy: 'row', seriesLayoutBy: 'row',
itemStyle: { itemStyle: {
@@ -113,6 +117,10 @@ export const multipleBarOption = {
{ {
name: 'high', name: 'high',
type: 'bar', type: 'bar',
stack:'eventSeverityTrend',
emphasis: {
focus: 'series'
},
barWidth: 15, barWidth: 15,
seriesLayoutBy: 'row', seriesLayoutBy: 'row',
itemStyle: { itemStyle: {
@@ -122,6 +130,10 @@ export const multipleBarOption = {
{ {
name: 'medium', name: 'medium',
type: 'bar', type: 'bar',
stack:'eventSeverityTrend',
emphasis: {
focus: 'series'
},
barWidth: 15, barWidth: 15,
seriesLayoutBy: 'row', seriesLayoutBy: 'row',
itemStyle: { itemStyle: {
@@ -131,6 +143,10 @@ export const multipleBarOption = {
{ {
name: 'low', name: 'low',
type: 'bar', type: 'bar',
stack:'eventSeverityTrend',
emphasis: {
focus: 'series'
},
barWidth: 15, barWidth: 15,
seriesLayoutBy: 'row', seriesLayoutBy: 'row',
itemStyle: { itemStyle: {
@@ -140,6 +156,10 @@ export const multipleBarOption = {
{ {
name: 'info', name: 'info',
type: 'bar', type: 'bar',
stack:'eventSeverityTrend',
emphasis: {
focus: 'series'
},
barWidth: 15, barWidth: 15,
seriesLayoutBy: 'row', seriesLayoutBy: 'row',
itemStyle: { itemStyle: {