diff --git a/src/components/charts/chart-options.js b/src/components/charts/chart-options.js index 3e4e25f6..29b41950 100644 --- a/src/components/charts/chart-options.js +++ b/src/components/charts/chart-options.js @@ -5,7 +5,10 @@ */ import { format } from 'echarts' import _ from 'lodash' - +export const chartColor = ['#73A0FA', '#73DEB3', '#F7C739', '#EB7E65', '#FFAB67', '#A285D2', '#FFA8CB'] +export function getChartColor (index) { + return chartColor[index % chartColor.length] +} const line = { tooltip: { appendToBody: true, @@ -30,6 +33,7 @@ const line = { bottom: 45, top: 30 }, + color: chartColor, legend: { show: true, right: 30, @@ -76,6 +80,7 @@ const lineWithStatistics = { yAxis: { type: 'value' }, + color: chartColor, grid: { left: 55, bottom: 45, @@ -112,6 +117,7 @@ const lineStack = { xAxis: { type: 'time' }, + color: chartColor, yAxis: { type: 'value' }, @@ -154,6 +160,7 @@ const pieWithTable = { appendToBody: true, trigger: 'item' }, + color: chartColor, animation: false, legend: { orient: 'vertical', diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue index b39ad127..c190f113 100644 --- a/src/views/charts/Chart.vue +++ b/src/views/charts/Chart.vue @@ -155,7 +155,8 @@ import { isEchartsWithTable, isEchartsWithStatistics, isMapLine, - isTabs + isTabs, + getChartColor } from '@/components/charts/chart-options' import EchartsFrame from '@/components/charts/EchartsFrame' import SingleValue from '@/components/charts/ChartSingleValue' @@ -338,6 +339,28 @@ export default { }) }) } else if (this.isEchartsWithStatistics) { + const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000) } + get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => { + if (response.code === 200) { + this.statisticsData = response.data.result + const seriesTemplate = this.chartOption.series[0] + this.chartOption.series = response.data.result.map((r, i) => { + return { + ...seriesTemplate, + name: r.legend, + data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1])]), + lineStyle: { + color: getChartColor[i] + } + } + }) + } + this.myChart.setOption(this.chartOption) + this.$nextTick(() => { + this.myChart.resize() + }) + }) + } else { const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000) } get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => { if (response.code === 200) {