CN-342 图表优化

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

View File

@@ -235,118 +235,99 @@ export default {
initEventSeverityTrendData (params) {
this.loading = true
getData(api.detection[this.pageType].eventSeverityTrend, params).then(data => {
/* data = [
/*data = [
{
"stat_time": "2022-01-01T10:07:03.008Z",
"event_severity": "critical",
"statTime": "2022-01-01T10:07:03.008Z",
"eventSeverity": "critical",
"count": 5
},
{
"stat_time": "2022-01-02T10:07:03.008Z",
"event_severity": "critical",
"statTime": "2022-01-02T10:07:03.008Z",
"eventSeverity": "critical",
"count": 15
},{
"stat_time": "2022-01-03T10:07:03.008Z",
"event_severity": "critical",
"statTime": "2022-01-03T10:07:03.008Z",
"eventSeverity": "critical",
"count": 25
},
{
"stat_time": "2022-01-04T10:07:03.008Z",
"event_severity": "critical",
"statTime": "2022-01-04T10:07:03.008Z",
"eventSeverity": "critical",
"count": 7
},{
"stat_time": "2022-01-01T10:07:03.008Z",
"event_severity": "high",
"statTime": "2022-01-01T10:07:03.008Z",
"eventSeverity": "high",
"count": 8
},
{
"stat_time": "2022-01-02T10:07:03.008Z",
"event_severity": "high",
"statTime": "2022-01-02T10:07:03.008Z",
"eventSeverity": "high",
"count": 2
},{
"stat_time": "2022-01-03T10:07:03.008Z",
"event_severity": "high",
"statTime": "2022-01-03T10:07:03.008Z",
"eventSeverity": "high",
"count": 25
},
{
"stat_time": "2022-01-04T10:07:03.008Z",
"event_severity": "high",
"statTime": "2022-01-04T10:07:03.008Z",
"eventSeverity": "high",
"count": 7
},{
"stat_time": "2022-01-01T10:07:03.008Z",
"event_severity": "medium",
"statTime": "2022-01-01T10:07:03.008Z",
"eventSeverity": "medium",
"count": 9
},
{
"stat_time": "2022-01-02T10:07:03.008Z",
"event_severity": "medium",
"statTime": "2022-01-02T10:07:03.008Z",
"eventSeverity": "medium",
"count": 15
},{
"stat_time": "2022-01-03T10:07:03.008Z",
"event_severity": "medium",
"statTime": "2022-01-03T10:07:03.008Z",
"eventSeverity": "medium",
"count": 35
},
{
"stat_time": "2022-01-04T10:07:03.008Z",
"event_severity": "medium",
"statTime": "2022-01-04T10:07:03.008Z",
"eventSeverity": "medium",
"count": 7
},{
"stat_time": "2022-01-01T10:07:03.008Z",
"event_severity": "low",
"statTime": "2022-01-01T10:07:03.008Z",
"eventSeverity": "low",
"count": 5
},
{
"stat_time": "2022-01-02T10:07:03.008Z",
"event_severity": "low",
"statTime": "2022-01-02T10:07:03.008Z",
"eventSeverity": "low",
"count": 1
},{
"stat_time": "2022-01-03T10:07:03.008Z",
"event_severity": "low",
"statTime": "2022-01-03T10:07:03.008Z",
"eventSeverity": "low",
"count": 25
},
{
"stat_time": "2022-01-04T10:07:03.008Z",
"event_severity": "low",
"statTime": "2022-01-04T10:07:03.008Z",
"eventSeverity": "low",
"count": 17
},{
"stat_time": "2022-01-01T10:07:03.008Z",
"event_severity": "info",
"statTime": "2022-01-01T10:07:03.008Z",
"eventSeverity": "info",
"count": 5
},
{
"stat_time": "2022-01-02T10:07:03.008Z",
"event_severity": "info",
"statTime": "2022-01-02T10:07:03.008Z",
"eventSeverity": "info",
"count": 15
},{
"stat_time": "2022-01-03T10:07:03.008Z",
"event_severity": "info",
"statTime": "2022-01-03T10:07:03.008Z",
"eventSeverity": "info",
"count": 25
},
{
"stat_time": "2022-01-04T10:07:03.008Z",
"event_severity": "info",
"statTime": "2022-01-04T10:07:03.008Z",
"eventSeverity": "info",
"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
if (!this.$_.isEmpty(data)) {
const dataMap = new Map()