NEZ-1280 feat: 实现自定义stack

2021-11-30 19:21:59 +08:00
parent f9e20e292a
commit 42bd653ae1
8 changed files with 83 additions and 104 deletions
--- a/nezha-fronted/src/components/chart/chart/chartNoData.vue
+++ b/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>
--- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
+++ b/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}`))
-        setChart(this.chartInfo.id, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿
+        const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartInfo.id}`)) : getChart(this.chartInfo.id)
        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) {
-          myChart.setOption({
-            toolbox: {
-              feature: {
-                dataZoom: {
-                  yAxisIndex: false,
-                  title: {
-                    zoom: self.$t('overall.toolBox.zoom'),
-                    back: self.$t('overall.toolBox.back')
+        // 改变tooltip
+        option.tooltip[0].formatter = self.tooltipFormatter(self.isStack)
+        myChart.setOption(option)
+      }
    }
  },
-                magicType: {
-                  type: ['stack'],
-                  title: {
-                    stack: self.$t('overall.toolBox.stack')
-                  },
-                  iconStyle: {
-                    borderColor: '#7e7e7e'
-                  },
-                  emphasis: {
-                    borderColor: '#53a3cb'
+  watch: {
+    chartData: {
+      deep: true,
+      handler (n) {
+        if (!this.isInit) {
+          this.initChart(this.chartOption)
        }
      }
    }
-            }
-          })
-        } 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)
  }
 }
--- a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
+++ b/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: {
-        type: ['stack'],
-        title: {
-          stack: i18n.t('overall.toolBox.stack')
-        },
-        iconStyle: {
-          borderColor: '#7e7e7e'
-        },
-        emphasis: {
-          borderColor: '#7e7e7e'
-        }
+      // stack使用自定义按钮
+      myStack: {
+        show: true,
+        title: i18n.t('overall.toolBox.stack'),
+        icon: stackIconSvg,
+        iconStyle: {}
      }
    }
  },
--- a/nezha-fronted/src/components/chart/chartMixin.js
+++ b/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)
+      }
    }
  }
 }
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/nezha-fronted/src/components/chart/panelChart.vue
@@ -40,6 +40,7 @@ export default {
    }
  },
  methods: {
+    // 参数 isRefresh 标识是否是刷新操作
    getChartData (isRefresh) {
      // TODO assetInfo、endpointInfo、echarts等进行不同的处理
      let startTime = ''
--- a/nezha-fronted/src/components/chart/testData.js
+++ b/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"]' +
--- a/nezha-fronted/src/components/common/js/constants.js
+++ b/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'
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/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>