feat: chart颜色定义

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 = {
   xAxis: {
     type: 'time'
@@ -19,6 +22,7 @@ const line = {
     bottom: 45,
     top: 30
   },
+  color: chartColor,
   legend: {
     show: true,
     right: 30,
@@ -54,6 +58,7 @@ const lineWithStatistics = {
   yAxis: {
     type: 'value'
   },
+  color: chartColor,
   grid: {
     left: 55,
     bottom: 45,
@@ -79,6 +84,7 @@ const lineStack = {
   xAxis: {
     type: 'time'
   },
+  color: chartColor,
   yAxis: {
     type: 'value'
   },
@@ -120,6 +126,7 @@ const pieWithTable = {
   tooltip: {
     trigger: 'item'
   },
+  color: chartColor,
   animation: false,
   legend: {
     orient: 'vertical',

src/views/charts/Chart.vue

@@ -141,7 +141,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'
@@ -323,6 +324,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 => {