diff --git a/src/utils/date-util.js b/src/utils/date-util.js index 85c6c3f5..9538bd3e 100644 --- a/src/utils/date-util.js +++ b/src/utils/date-util.js @@ -42,5 +42,5 @@ export function getNowTime (interval) { } // 日期格式转换 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') } diff --git a/src/views/charts/charts/ChartEchart.vue b/src/views/charts/charts/ChartEchart.vue index 562e8ecc..69fde3a3 100644 --- a/src/views/charts/charts/ChartEchart.vue +++ b/src/views/charts/charts/ChartEchart.vue @@ -100,6 +100,15 @@ export default { 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 { const seriesTemplate = this.chartOption.series[0] diff --git a/src/views/charts/charts/options/line.js b/src/views/charts/charts/options/line.js index 29473013..84c81908 100644 --- a/src/views/charts/charts/options/line.js +++ b/src/views/charts/charts/options/line.js @@ -24,8 +24,7 @@ export const line = { formatter: function (value, index, a, b) { return unitConvert(value, unitTypes.number).join(' ') } - }, - minInterval: 1 + } }, animation: false, grid: { diff --git a/src/views/detections/Index.vue b/src/views/detections/Index.vue index 4e90c372..28bf6705 100644 --- a/src/views/detections/Index.vue +++ b/src/views/detections/Index.vue @@ -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() diff --git a/src/views/detections/options/detectionOptions.js b/src/views/detections/options/detectionOptions.js index 42b2ab7d..31019555 100644 --- a/src/views/detections/options/detectionOptions.js +++ b/src/views/detections/options/detectionOptions.js @@ -52,7 +52,7 @@ export const multipleBarOption = { legend: { icon: 'circle', top: 10, - right: 10, + right: 30, itemWidth: 10, // 设置宽度 itemHeight: 10 // 设置高度 }, @@ -72,7 +72,7 @@ export const multipleBarOption = { }, axisLabel: { color: '#737373', - interval: 0 + interval: 'auto' }, splitLine: { show: false @@ -104,6 +104,10 @@ export const multipleBarOption = { { name: 'critical', type: 'bar', + stack:'eventSeverityTrend', + emphasis: { + focus: 'series' + }, barWidth: 15, seriesLayoutBy: 'row', itemStyle: { @@ -113,6 +117,10 @@ export const multipleBarOption = { { name: 'high', type: 'bar', + stack:'eventSeverityTrend', + emphasis: { + focus: 'series' + }, barWidth: 15, seriesLayoutBy: 'row', itemStyle: { @@ -122,6 +130,10 @@ export const multipleBarOption = { { name: 'medium', type: 'bar', + stack:'eventSeverityTrend', + emphasis: { + focus: 'series' + }, barWidth: 15, seriesLayoutBy: 'row', itemStyle: { @@ -131,6 +143,10 @@ export const multipleBarOption = { { name: 'low', type: 'bar', + stack:'eventSeverityTrend', + emphasis: { + focus: 'series' + }, barWidth: 15, seriesLayoutBy: 'row', itemStyle: { @@ -140,6 +156,10 @@ export const multipleBarOption = { { name: 'info', type: 'bar', + stack:'eventSeverityTrend', + emphasis: { + focus: 'series' + }, barWidth: 15, seriesLayoutBy: 'row', itemStyle: {