NEZ-1280 feat: 实现自定义stack

nezha-fronted/src/components/chart/chart/chartNoData.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="nz-chart__no-data"
+  <div class="nz-chart__no-data"></div>
 </template>
 
 <script>

nezha-fronted/src/components/chart/chart/chartTimeSeries.vue

@@ -23,7 +23,7 @@ import bus from '@/libs/bus'
 import { formatScientificNotation } from '@/components/common/js/tools'
 import chartDataFormat from '@/components/charts/chartDataFormat'
 import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
-import { chartType, chartLegendPlacement } from '@/components/common/js/constants'
+import { chartLegendPlacement } from '@/components/common/js/constants'
 import { getChart, setChart } from '@/components/common/js/common'
 import { initColor } from '@/components/chart/chart/tools'
 
@@ -69,14 +69,18 @@ export default {
 
       const { minTime, maxTime, minValue, maxValue } = this.getMinMaxFromData(this.chartData) // 此处时间是秒
       chartOption.xAxis.axisLabel.formatter = this.xAxisLabelFormatter(minTime * 1000, maxTime * 1000) // 需转为毫秒
-      chartOption.tooltip.formatter = this.tooltipFormatter()
+      chartOption.tooltip.formatter = this.tooltipFormatter(this.chartInfo.param.stack)
       chartOption.yAxis.axisLabel.formatter = this.yAxisLabelFormatter(minValue, maxValue)
+      if (chartOption.toolbox.feature) {
+        chartOption.toolbox.feature.myStack.iconStyle.borderColor = this.isStack ? this.toolboxIconColor.active : this.toolboxIconColor.inactive
+        chartOption.toolbox.feature.myStack.onclick = this.stackEvent() // 自定义stack事件
+      }
+      /* 使用setTimeout延迟渲染图表，避免样式错乱 */
       setTimeout(() => {
-        const myChart = echarts.init(document.getElementById(`chart-canvas-${this.chartInfo.id}`))
+        const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartInfo.id}`)) : getChart(this.chartInfo.id)
-        setChart(this.chartInfo.id, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿
         myChart.setOption(chartOption)
-        this.initToolboxEvent(myChart) // 初始化toolbox事件
+        setChart(this.chartInfo.id, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿
-      })
+      }, 200)
     },
     getMinMaxFromData (originalDatas) {
       let minTime = null
@@ -130,7 +134,7 @@ export default {
         }
       }
     },
-    tooltipFormatter () {
+    tooltipFormatter (hasTotal) { // 堆叠图需要total数据
       const self = this
       return function (params) {
         let str = '<div class="nz-chart__tooltip">'
@@ -176,7 +180,7 @@ export default {
             </div>
           `
         })
-        if (self.chartInfo.type === chartType.area) {
+        if (hasTotal) {
           if (!self.stackTotalColor) {
             self.stackTotalColor = randomcolor()
           }
@@ -220,97 +224,42 @@ export default {
         return unit.compute(value, index, -1, 2)
       }
     },
-    initToolboxEvent (myChart) {
+    stackEvent () {
       const self = this
-      myChart.on('magictypechanged', function (params) {
+      // 若isStack=true,则将stack取消，并删掉tooltip的total；否则激活stack。
+      // stack状态改变后，icon颜色需要改变
+      return function () {
+        const myChart = getChart(self.chartInfo.id)
+        const option = myChart.getOption()
+        // 改变颜色
+        option.toolbox[0].feature.myStack.iconStyle.borderColor = self.isStack ? self.toolboxIconColor.inactive : self.toolboxIconColor.active
+        // 切换stack状态
+        option.series.forEach((s, i) => {
+          self.isStack ? (s.stack = i) : (s.stack = 'Total')
+        })
         self.isStack = !self.isStack
-        if (self.isStack) {
+        // 改变tooltip
-          myChart.setOption({
+        option.tooltip[0].formatter = self.tooltipFormatter(self.isStack)
-            toolbox: {
+        myChart.setOption(option)
-              feature: {
+      }
-                dataZoom: {
-                  yAxisIndex: false,
-                  title: {
-                    zoom: self.$t('overall.toolBox.zoom'),
-                    back: self.$t('overall.toolBox.back')
     }
   },
-                magicType: {
+  watch: {
-                  type: ['stack'],
+    chartData: {
-                  title: {
+      deep: true,
-                    stack: self.$t('overall.toolBox.stack')
+      handler (n) {
-                  },
+        if (!this.isInit) {
-                  iconStyle: {
+          this.initChart(this.chartOption)
-                    borderColor: '#7e7e7e'
-                  },
-                  emphasis: {
-                    borderColor: '#53a3cb'
         }
       }
     }
-            }
-          })
-        } else {
-          myChart.setOption({
-            toolbox: {
-              feature: {
-                dataZoom: {
-                  yAxisIndex: false,
-                  title: {
-                    zoom: self.$t('overall.toolBox.zoom'),
-                    back: self.$t('overall.toolBox.back')
-                  }
-                },
-                magicType: {
-                  type: ['stack'],
-                  title: {
-                    stack: self.$t('overall.toolBox.stack')
-                  },
-                  iconStyle: {
-                    borderColor: '#7e7e7e'
-                  },
-                  emphasis: {
-                    borderColor: '#7e7e7e'
-                  }
-                }
-              }
-            }
-          })
-        }
-      })
-    },
-    mouseEnterChart () {
-      const myChart = getChart(this.chartInfo.id)
-      if (myChart) {
-        setTimeout(() => {
-          myChart.setOption({
-            toolbox: {
-              show: true
-            }
-          })
-        }, 300)
-      }
-    },
-    mouseLeaveChart () {
-      const myChart = getChart(this.chartInfo.id)
-      if (myChart) {
-        setTimeout(() => {
-          myChart.setOption({
-            toolbox: {
-              show: false
-            }
-          })
-        }, 300)
-      }
-    }
   },
   mounted () {
     this.chartOption.color || (this.chartOption.color = initColor(20))
     this.colorList = this.chartOption.color
     try {
-      this.isStack = this.chartInfo.param.legend.stack
+      this.isStack = this.chartInfo.param.stack
     } catch (e) {}
-
     this.initChart(this.chartOption)
   }
 }

nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js

@@ -1,5 +1,6 @@
 import { initColor } from '@/components/chart/chart/tools'
 import i18n from '@/components/common/i18n'
+import { stackIconSvg } from '@/components/common/js/constants'
 export const chartTimeSeriesLineOption = {
   title: {
     show: false
@@ -7,6 +8,7 @@ export const chartTimeSeriesLineOption = {
   legend: {
     show: false
   },
+  animation: false,
   toolbox: {
     show: false,
     top: '0',
@@ -20,17 +22,12 @@ export const chartTimeSeriesLineOption = {
           back: i18n.t('overall.toolBox.back')
         }
       },
-      magicType: {
+      // stack使用自定义按钮
-        type: ['stack'],
+      myStack: {
-        title: {
+        show: true,
-          stack: i18n.t('overall.toolBox.stack')
+        title: i18n.t('overall.toolBox.stack'),
-        },
+        icon: stackIconSvg,
-        iconStyle: {
+        iconStyle: {}
-          borderColor: '#7e7e7e'
-        },
-        emphasis: {
-          borderColor: '#7e7e7e'
-        }
       }
     }
   },

nezha-fronted/src/components/chart/chartMixin.js

@@ -1,11 +1,17 @@
 import lodash from 'lodash'
 import { getMetricTypeValue } from '@/components/common/js/tools'
+import { getChart } from '@/components/common/js/common'
 export default {
   data () {
     return {
       colorList: [],
       chartDot: 2,
-      legends: [] // { name, alias, color, statistics: [{type: min, value: xxx}, ...] }
+      isInit: true, // 是否是初始化，初始化时为true，初始化结束后设为false；用于刷新操作不重复绑定事件
+      legends: [], // { name, alias, color, statistics: [{type: min, value: xxx}, ...] }
+      toolboxIconColor: {
+        active: '#53a3cb',
+        inactive: '#7e7e7e'
+      }
     }
   },
   props: {
@@ -102,6 +108,30 @@ export default {
       } else {
         return aliasExpression
       }
+    },
+    mouseEnterChart () {
+      const myChart = getChart(this.chartInfo.id)
+      if (myChart) {
+        setTimeout(() => {
+          myChart.setOption({
+            toolbox: {
+              show: true
+            }
+          })
+        }, 300)
+      }
+    },
+    mouseLeaveChart () {
+      const myChart = getChart(this.chartInfo.id)
+      if (myChart) {
+        setTimeout(() => {
+          myChart.setOption({
+            toolbox: {
+              show: false
+            }
+          })
+        }, 300)
+      }
     }
   }
 }

nezha-fronted/src/components/chart/panelChart.vue

@@ -40,6 +40,7 @@ export default {
     }
   },
   methods: {
+    // 参数 isRefresh 标识是否是刷新操作
     getChartData (isRefresh) {
       // TODO assetInfo、endpointInfo、echarts等进行不同的处理
       let startTime = ''

nezha-fronted/src/components/chart/testData.js

@@ -17,12 +17,12 @@ const chartData = {
         height: 6,
         updateBy: 1,
         updateAt: '2021-11-10 07:06:09',
-        type: 'area',
+        type: 'line',
         unit: 2,
         weight: 0,
         param: '{' +
           '   "style":"area",' +
-          '   "stack":false,' +
+          '   "stack":true,' +
           '   "legend":{' +
           '        "placement":"bottom",' +
           '        "values":["min","max","avg","first","last","total"]' +

nezha-fronted/src/components/common/js/constants.js

@@ -414,3 +414,5 @@ export const chartLegendPlacement = {
   right: 'right',
   bottom: 'bottom'
 }
+
+export const stackIconSvg = 'path://M538.112 998.4a25.6 25.6 0 0 1-11.776-2.88L39.424 743.232a25.6 25.6 0 1 1 23.552-45.44l474.368 245.824 422.592-245.248a25.6 25.6 0 0 1 25.728 44.288l-434.688 252.288a25.728 25.728 0 0 1-12.864 3.456z,M538.112 789.888a25.6 25.6 0 0 1-11.776-2.88L39.424 534.72a25.6 25.6 0 1 1 23.552-45.44l474.368 245.824 422.592-245.248a25.6 25.6 0 1 1 25.728 44.288l-434.688 252.288a25.728 25.728 0 0 1-12.864 3.456z,M538.112 581.312a25.6 25.6 0 0 1-11.776-2.88L39.424 326.144a25.6 25.6 0 0 1-1.088-44.928L473.088 28.928a25.344 25.344 0 0 1 24.64-0.576l486.848 252.288a25.6 25.6 0 0 1 1.088 44.928L550.976 577.856a25.728 25.728 0 0 1-12.864 3.456zM104.384 302.208l432.96 224.384 382.208-221.824-432.96-224.384-382.208 221.824z'

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -95,7 +95,7 @@
                 @on-remove-chart="delChart"
                 @on-add-group-item-chart="addGroupItem"
               ></chart-list>
-              <chart-list :nowTimeType="nowTimeType" ref="chartList" :class="{'show-top':showTopBtn}" :from="fromRoute.panel" :panel-lock="panelLock" @on-edit-chart="editChart" @on-refresh-time="refreshTime"  @on-remove-chart="delChart" @panel-list-loading="load" @on-add-group-item-chart="addGroupItem"></chart-list>
+              <chart-list ref="chartList" :class="{'show-top':showTopBtn}" :from="fromRoute.panel" :nowTimeType="nowTimeType" :panel-lock="panelLock" @on-edit-chart="editChart" @on-refresh-time="refreshTime"  @on-remove-chart="delChart" @on-add-group-item-chart="addGroupItem"></chart-list>
             </div>
           </div>
         </div>