NEZ-1283 feat: chart-pie 组件开发

2021-12-07 17:43:21 +08:00
parent 2b8737562c
commit c47f6f2ac3
13 changed files with 428 additions and 51 deletions
--- a/nezha-fronted/src/components/chart/chart-list-grid.vue
+++ b/nezha-fronted/src/components/chart/chart-list-grid.vue
@@ -377,8 +377,8 @@ export default {
    resizeEvent: function (i, newH, newW, newHPx, newWPx) {
      const msg = 'RESIZE i=' + i + ', H=' + newH + ', W=' + newW + ', H(px)=' + newHPx + ', W(px)=' + newWPx
      this.eventLog.push(msg)
-      console.log(msg,this.$refs['editChart' + i])
-      setTimeout(()=>{
+      console.log(msg, this.$refs['editChart' + i])
+      setTimeout(() => {
        this.$refs['editChart' + i][0].chartResize()
      })
    },
@@ -386,9 +386,9 @@ export default {
      const msg = 'RESIZED i=' + i + ', X=' + newX + ', Y=' + newY + ', H(px)=' + newHPx + ', W(px)=' + newWPx
      this.eventLog.push(msg)
      console.log(msg)
-      setTimeout(()=>{
+      setTimeout(() => {
        this.$refs['editChart' + i][0].chartResize()
-      },50)
+      }, 50)
    },
    containerResizedEvent: function (i, newH, newW, newHPx, newWPx) {
      const msg = 'CONTAINER RESIZED i=' + i + ', H=' + newH + ', W=' + newW + ', H(px)=' + newHPx + ', W(px)=' + newWPx
@@ -778,7 +778,6 @@ export default {
      }
      this.$get('visual/panel/chart?panelId=' + params.panelId + '&groupId=0' + '&pageSize=-1').then(response => {
        response = chartData
-        console.log(chartData)
        if (response.code === 200) {
          setTimeout(() => {
            this.finshGetData = false
@@ -1802,8 +1801,8 @@ export default {
      this.$nextTick(() => {
        const chartBox = document.getElementById('chart-' + item.id)
        if (chartBox) {
-          chartBox.style.width = `100%`
-          chartBox.style.height = `100%`
+          chartBox.style.width = '100%'
+          chartBox.style.height = '100%'
          if (item.type === 'group') {
            chartBox.style.height = 'auto'
          }
--- a/nezha-fronted/src/components/chart/chart.vue
+++ b/nezha-fronted/src/components/chart/chart.vue
@@ -10,6 +10,13 @@
        :chart-option="chartOption"
        :is-fullscreen="isFullscreen"
      ></chart-time-series>
+      <chart-pie
+        v-if="isChartPie(chartInfo.type)"
+        :chart-data="chartData"
+        :chart-info="chartInfo"
+        :chart-option="chartOption"
+        :is-fullscreen="isFullscreen"
+      ></chart-pie>
      <chartHexagon
        :ref="'chart'+chartInfo.id"
        v-if="isHexagonFigure(chartInfo.type)"
@@ -53,7 +60,7 @@ import chartTreemap from './chart/chartTreemap'
 import chartUrl from './chart/chartUrl'
 import chartValue from './chart/chartValue'
 import chartHexagon from './chart/chartHexagon'
-import { getOption, isTimeSeries, isHexagonFigure, isUrl, isText } from './chart/tools'
+import { getOption, isTimeSeries, isHexagonFigure, isUrl, isText, isChartPie } from './chart/tools'
 import lodash from 'lodash'

 export default {
@@ -101,6 +108,7 @@ export default {
  methods: {
    isTimeSeries,
    isHexagonFigure,
+    isChartPie,
    isUrl,
    isText,
    resize () {
--- a/nezha-fronted/src/components/chart/chart/chartHexagon.vue
+++ b/nezha-fronted/src/components/chart/chart/chartHexagon.vue
@@ -257,7 +257,6 @@ export default {
      }
      this.assetData.id = data
      const boxWidth = this.$refs.hexagonBox.$el.offsetWidth
-      console.log(boxWidth)
      this.boxWidth = boxWidth
      // this.assetData.rate=window.screen.height/1297;
      this.$nextTick(() => {
@@ -284,12 +283,10 @@ export default {
        this.assetData.position.mt = e.offsetY - (window.innerHeight - this.$refs.alertLabel.$el.offsetHeight)
      }
      if (boxWidth / 2 > e.offsetX) {
-        console.log(123)
        this.assetData.position.left = e.offsetX + 35
        this.assetData.position.right = 0
        this.LRTriangle = true
      } else {
-        console.log(456)
        this.assetData.position.right = boxWidth - (e.offsetX - 35)
        this.assetData.position.left = 0
        this.LRTriangle = false
--- a/nezha-fronted/src/components/chart/chart/chartPie.vue
+++ b/nezha-fronted/src/components/chart/chart/chartPie.vue
@@ -1,10 +1,214 @@
 <template>
-
+  <div
+    :class="legendPlacement"
+    ref="pie-chart-box"
+    class="nz-chart__component nz-chart__component--time-series" @mouseenter="mouseEnterChart"
+    @mouseleave="mouseLeaveChart"
+  >
+    <div :id="`chart-canvas-${chartId}`" class="chart__canvas"></div>
+    <chart-legend
+      v-if="hasLegend"
+      :chart-data="chartData"
+      :chart-info="chartInfo"
+      :legends="legends"
+      :is-fullscreen="isFullscreen"
+    ></chart-legend>
+  </div>
 </template>

 <script>
+import legend from '@/components/chart/chart/legend'
+import chartMixin from '@/components/chart/chartMixin'
+import { chartLegendPlacement } from '@/components/common/js/constants'
+import * as echarts from 'echarts'
+import { getChart, setChart } from '@/components/common/js/common'
+import moment from 'moment-timezone'
+import bus from '@/libs/bus'
+import { formatScientificNotation, getMetricTypeValue } from '@/components/common/js/tools'
+import chartDataFormat from '@/components/charts/chartDataFormat'
+import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
+import { initColor } from '@/components/chart/chart/tools'
+import lodash from 'lodash'
+
 export default {
-  name: 'chart-pie'
+  name: 'chart-pie',
+  components: {
+    chartLegend: legend
+  },
+  mixins: [chartMixin],
+  props: {
+    chartInfo: Object,
+    chartData: Array,
+    chartOption: Object,
+    isFullscreen: Boolean
+  },
+  computed: {
+    hasLegend () {
+      try {
+        return [chartLegendPlacement.bottom, chartLegendPlacement.left, chartLegendPlacement.right].indexOf(this.chartInfo.param.legend.placement) > -1
+      } catch (e) {
+        return false
+      }
+    },
+    legendPlacement () {
+      try {
+        switch (this.chartInfo.param.legend.placement) {
+          case 'left':
+          case 'right':
+          case 'bottom': {
+            return `nz-chart__component--${this.chartInfo.param.legend.placement}`
+          }
+          default: return ''
+        }
+      } catch (e) {
+        return ''
+      }
+    }
+  },
+  data () {
+    return {
+      colorList: [],
+      chartDot: 2,
+      isInit: true, // 是否是初始化，初始化时为true，图表初始化结束后设为false
+      legends: [], // { name, alias, color, statistics: [{type: min, value: xxx}, ...] }
+      toolboxIconColor: {
+        active: '#53a3cb',
+        inactive: '#7e7e7e'
+      },
+      chartId: ''
+    }
+  },
+  methods: {
+    initChart (chartOption) {
+      this.legends = []
+      chartOption.series = this.initPieData(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
+      // chartOption.series.label.formatter = this.pieFormatterLabel
+      chartOption.tooltip.formatter = this.formatterFunc
+      console.log(chartOption, 'chartOption')
+      /* 使用setTimeout延迟渲染图表，避免样式错乱 */
+      setTimeout(() => {
+        const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartId}`)) : getChart(this.chartId)
+        myChart.setOption(chartOption)
+        this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿
+        this.isInit = false
+      }, 200)
+    },
+    getMinMaxFromData (originalDatas) {
+      let minTime = null
+      let maxTime = null
+      let minValue = null
+      let maxValue = null
+      // 将数据提为二维数组
+      let datas = []
+      originalDatas.forEach((originalData, expressionIndex) => {
+        originalData.forEach((data, dataIndex) => {
+          datas = [...datas, ...data.values]
+        })
+      })
+      const timeSorted = datas.sort((a, b) => {
+        return a[0] - b[0]
+      })
+      const valueSorted = datas.sort((a, b) => {
+        return a[1] - b[1]
+      })
+      console.log(timeSorted, valueSorted)
+      minTime = timeSorted.length ? timeSorted[0][0] : ''
+      maxTime = timeSorted.length ? timeSorted[timeSorted.length - 1][0] : ''
+      minValue = valueSorted.length ? valueSorted[0][1] : ''
+      maxValue = valueSorted.length ? valueSorted[valueSorted.length - 1][1] : ''
+      return { minTime, maxTime, minValue, maxValue }
+    },
+    initPieData (chartInfo, seriesTemplate, originalDatas) {
+      let colorIndex = 0
+      const s = lodash.cloneDeep(seriesTemplate)
+      s.data = []
+      originalDatas.forEach((originalData, expressionIndex) => {
+        originalData.forEach((data, dataIndex) => {
+          if (s) {
+            const value = getMetricTypeValue(data.values, chartInfo.param.statistics)
+            const mapping = this.selectMapping(value, chartInfo.param.valueMapping)
+            console.log(mapping)
+            // eslint-disable-next-line vue/no-mutating-props
+            mapping && (this.chartOption.color[colorIndex] = mapping.color.bac)
+            s.data.push({
+              value: chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2),
+              realValue: value,
+              name: this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex),
+              labels: data.metric,
+              seriesIndex: expressionIndex,
+              dataIndex: dataIndex,
+              mapping: mapping,
+              label: {
+                ...s.label,
+                formatter: this.pieFormatterLabel,
+                rich: {
+                  color: {
+                    color: mapping ? mapping.color.text : '#333333'
+                  }
+                }
+              }
+            })
+            colorIndex++
+          }
+        })
+      })
+      return s
+    },
+    pieFormatterLabel (params) {
+      let str = '{color|'
+      if (this.chartInfo.param.text === 'all') {
+        str += params.data.name
+        str += ' : '
+        str += params.data.mapping && params.data.mapping.display ? params.data.mapping.display : params.data.value
+      }
+      if (this.chartInfo.param.text === 'value') {
+        str += params.data.mapping && params.data.mapping.display ? params.data.mapping.display : params.data.value
+      }
+      if (this.chartInfo.param.text === 'legend') {
+        str += params.data.name
+      }
+      if (this.chartInfo.param.text === 'none') {
+        str += ''
+      }
+      str += '}'
+      return str
+    },
+    formatterFunc: function (params, ticket, callback) {
+      const chartInfo = this.chartInfo
+      return `<div>
+                    <div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;  min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;">
+                        <div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.name}</div>
+                        <div style="font-size:12px;display:flex;justify-content: space-between;">
+                            <div>value</div>
+                            <div style="display: ${params.data.mapping && params.data.mapping.display ? 'none' : 'inline-block'}">${chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value, null, -1, 2)}</div>
+                            <div style="display: ${params.data.mapping && params.data.mapping.display ? 'inline-block' : 'none'}">${params.data.mapping.display}</div>
+                        </div>
+                        <div style="font-size:12px;display:flex;justify-content: space-between;">
+                            <div>percent</div>
+                            <div>${params.percent}%</div>
+                        </div>
+                    </div>
+                </div>
+               `
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler (n) {
+        this.initChart(this.chartOption)
+      }
+    }
+  },
+  mounted () {
+    // eslint-disable-next-line vue/no-mutating-props
+    this.chartOption.color || (this.chartOption.color = initColor(20))
+    this.colorList = this.chartOption.color
+    try {
+      this.isStack = this.chartInfo.param.stack
+    } catch (e) {}
+    // this.initChart(this.chartOption)
+  }
 }
 </script>

--- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
@@ -102,10 +102,11 @@ export default {
      const valueSorted = datas.sort((a, b) => {
        return a[1] - b[1]
      })
-      minTime = timeSorted[0][0]
-      maxTime = timeSorted[timeSorted.length - 1][0]
-      minValue = valueSorted[0][1]
-      maxValue = valueSorted[valueSorted.length - 1][1]
+      console.log(timeSorted, valueSorted)
+      minTime = timeSorted.length ? timeSorted[0][0] : ''
+      maxTime = timeSorted.length ? timeSorted[timeSorted.length - 1][0] : ''
+      minValue = valueSorted.length ? valueSorted[0][1] : ''
+      maxValue = valueSorted.length ? valueSorted[valueSorted.length - 1][1] : ''
      return { minTime, maxTime, minValue, maxValue }
    },
    xAxisLabelFormatter (minTime, maxTime) {
--- a/nezha-fronted/src/components/chart/chart/options/chartPie.js
+++ b/nezha-fronted/src/components/chart/chart/options/chartPie.js
@@ -1,4 +1,29 @@
 const chartPieOption = {
-
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    show: false
+  },
+  series: [
+    {
+      type: 'pie',
+      radius: '55%',
+      center: ['50%', '50%'],
+      data: [],
+      label: {
+        show: true,
+        color: '#333',
+        position: 'inside',
+        rotate: true,
+        width: 200,
+        overflow: 'truncate',
+        ellipsis: '...'
+      },
+      labelLine: {
+        show: true
+      }
+    }
+  ]
 }
 export default chartPieOption
--- a/nezha-fronted/src/components/chart/chart/tools.js
+++ b/nezha-fronted/src/components/chart/chart/tools.js
@@ -54,7 +54,9 @@ export function isTimeSeries (type) {
 export function isHexagonFigure (type) {
  return type === chartType.hexagonFigure
 }
-
+export function isChartPie (type) {
+  return type === chartType.pie
+}
 export function isUrl (type) {
  return type === chartType.url
 }
--- a/nezha-fronted/src/components/chart/chartList.vue
+++ b/nezha-fronted/src/components/chart/chartList.vue
@@ -141,6 +141,7 @@ export default {
          } catch (e) {
            console.info(e)
          }
+          console.log(param)
          param.showHeader = true
          return {
            ...item,
--- a/nezha-fronted/src/components/chart/chartMixin.js
+++ b/nezha-fronted/src/components/chart/chartMixin.js
@@ -1,6 +1,6 @@
 import lodash from 'lodash'
 import { getMetricTypeValue } from '@/components/common/js/tools'
-import {getChart, setChart} from '@/components/common/js/common'
+import { getChart, setChart } from '@/components/common/js/common'
 export default {
  data () {
    return {
@@ -23,34 +23,38 @@ export default {
  },
  methods: {
    handleTimeSeries (chartInfo, seriesTemplate, originalDatas) {
+      console.log(chartInfo, seriesTemplate, originalDatas)
      const series = []
      let colorIndex = 0
      originalDatas.forEach((originalData, expressionIndex) => {
        originalData.forEach((data, dataIndex) => {
          const s = lodash.cloneDeep(seriesTemplate)
-          s.data = data.values
-          s.name = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
-          if (chartInfo.param.stack) { // 堆叠
-            s.stack = 'Total'
-          }
-          if (!lodash.isEmpty(chartInfo.param.thresholds)) { // 阈值
-            s.markLine = {
-              symbol: 'circle',
-              symbolSize: 5
+          console.log(seriesTemplate)
+          if (s) {
+            s.data = data.values
+            s.name = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
+            if (chartInfo.param.stack) { // 堆叠
+              s.stack = 'Total'
            }
-            s.markLine.data = chartInfo.param.thresholds.map(threshold => {
-              return {
-                yAxis: threshold.val,
-                lineStyle: {
-                  color: threshold.color,
-                  width: 2,
-                  type: 'dotted'
-                }
+            if (!lodash.isEmpty(chartInfo.param.thresholds)) { // 阈值
+              s.markLine = {
+                symbol: 'circle',
+                symbolSize: 5
              }
-            })
+              s.markLine.data = chartInfo.param.thresholds.map(threshold => {
+                return {
+                  yAxis: threshold.val,
+                  lineStyle: {
+                    color: threshold.color,
+                    width: 2,
+                    type: 'dotted'
+                  }
+                }
+              })
+            }
+            series.push(s)
+            colorIndex++
          }
-          series.push(s)
-          colorIndex++
        })
      })
      return series
@@ -78,13 +82,14 @@ export default {
      }
      // 处理legend别名
      let alias = this.handleLegendAlias(legend, chartInfo.elements[expressionIndex].legend)
+      console.log(alias)
      if (!alias) {
        alias = legend
      }
-      const name = legend + '-' + chartInfo.elements[expressionIndex].id + '-' + dataIndex
+      const name = alias + '-' + dataIndex

      // 若需要统计，处理统计数据
-      const statisticsTypes = chartInfo.param.legend.values
+      const statisticsTypes = chartInfo.param.legend ? chartInfo.param.legend.values : ''
      let statistics = []
      if (!lodash.isEmpty(statisticsTypes)) {
        statistics = statisticsTypes.map(type => {
@@ -111,6 +116,30 @@ export default {
        return aliasExpression
      }
    },
+    selectMapping (value, valueMapping) {
+      let mapping = ''
+      if (valueMapping.show) {
+        valueMapping.mapping.forEach(item => {
+          if (item.type === 'value') {
+            if (value == item.value) {
+              mapping = item
+            }
+          }
+          if (item.type === 'range') {
+            if (value > item.from && value < item.to) {
+              mapping = item
+            }
+          }
+          if (item.type === 'regx') {
+            const reg = new RegExp(item.regx)
+            if (reg.test(value)) {
+              mapping = item
+            }
+          }
+        })
+      }
+      return mapping
+    },
    mouseEnterChart () {
      const myChart = getChart(this.chartId)
      if (myChart) {
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/nezha-fronted/src/components/chart/panelChart.vue
@@ -24,7 +24,7 @@
 <script>
 import chartHeader from '@/components/chart/chartHeader'
 import chart from '@/components/chart/chart'
-import { isTimeSeries } from './chart/tools'
+import { isChartPie, isTimeSeries } from './chart/tools'
 import { chartType, fromRoute } from '@/components/common/js/constants'
 import bus from '@/libs/bus'
 import axios from 'axios'
@@ -77,7 +77,7 @@ export default {
      this.query(elements, startTime, endTime, step)
    },
    query (elements, startTime, endTime, step) {
-      console.log(this.chartInfo.datasource,elements, startTime, endTime, step)
+      console.log(this.chartInfo.datasource, elements, startTime, endTime, step)
      try {
        switch (this.chartInfo.datasource) {
          case 'metrics':
@@ -96,6 +96,9 @@ export default {
              if (isTimeSeries(this.chartInfo.type)) {
                query += `&nullType=${this.chartInfo.param.nullType || 'null'}`
              }
+              if (isChartPie(this.chartInfo.type)) {
+                query += `&statistics=${this.chartInfo.param.statistics || 'last'}`
+              }
              query += `&query=${element.expression}`
              return this.$get(query)
            })
@@ -109,6 +112,7 @@ export default {
                  chartData.push({ error: r.msg || r.error || r })
                }
              })
+              console.log(chartData)
              this.chartData = chartData
            }).finally(() => {
              this.loading = false
--- a/nezha-fronted/src/components/chart/testData.js
+++ b/nezha-fronted/src/components/chart/testData.js
@@ -885,6 +885,119 @@ const chartData = {
        },
        children: [

+        ],
+        chartNums: null,
+        asset: null,
+        varType: null,
+        varId: null,
+        varName: null
+      },
+      {
+        id: 690506,
+        name: '123',
+        panelId: 1243,
+        groupId: 0,
+        datasource: 'metrics',
+        span: 4,
+        height: 4,
+        updateBy: 1,
+        updateAt: '2021-11-10 07:06:09',
+        type: 'pie',
+        unit: 2,
+        weight: 0,
+        param: JSON.stringify(
+          {
+            nullType: 'null',
+            statistics: 'last',
+            text: 'all',
+            valueMapping:
+              {
+                show: true,
+                mapping: [
+                  { type: 'value', show: true, value: 2, display: 'value', color: { bac: '#8ef9ab', text: '#6a21bc' } },
+                  { type: 'range', show: true, display: 'range', color: { bac: '#ef1cd0', text: '#66d815' }, from: 0, to: 123123 },
+                  { type: 'regx', show: true, display: 'regx', color: { bac: '#d406e2', text: '#f722ec' }, regx: '123' }]
+              }
+          }),
+        pid: null,
+        buildIn: 0,
+        remark: '123',
+        seq: null,
+        x: 0,
+        y: 12,
+        w: 6,
+        h: 4,
+        i: 690506,
+        elements: [
+          {
+            id: 68527,
+            chartId: 690483,
+            // expression: 'up{asset="44.37"}',
+            expression: 'label_replace(up{instance=~\'.*10090\',job=\'\'},"asset","$1","instance","(.*)")',
+            type: 'expert',
+            legend: '{{asset}}',
+            buildIn: 0,
+            seq: null,
+            name: 'A'
+          },
+          {
+            id: 68528,
+            chartId: 690483,
+            expression: 'Hadoop_HBase_Healthy',
+            type: 'expert',
+            legend: '{{asset}}',
+            buildIn: 0,
+            seq: null,
+            name: 'B'
+          }
+        ],
+        sync: null,
+        panel: {
+          id: 1243,
+          name: 'test',
+          createBy: null,
+          type: null,
+          link: null,
+          pid: null,
+          weight: null,
+          buildIn: null,
+          seq: null,
+          children: null,
+          parent: null,
+          chartNum: null
+        },
+        group: {
+          id: 0,
+          name: null,
+          panelId: null,
+          groupId: null,
+          span: null,
+          height: null,
+          updateBy: null,
+          updateAt: null,
+          type: null,
+          unit: null,
+          weight: null,
+          param: null,
+          pid: null,
+          buildIn: null,
+          remark: null,
+          seq: null,
+          x: null,
+          y: null,
+          elements: null,
+          sync: null,
+          panel: null,
+          group: null,
+          children: null,
+          chartNums: null,
+          asset: null,
+          varType: null,
+          varId: null,
+          varName: null
+        },
+        children: [
+
        ],
        chartNums: null,
        asset: null,
--- a/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue
+++ b/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue
@@ -172,7 +172,6 @@ export default {
      immediate: false,
      deep: true,
      handler (n) {
-        console.log('hexData', n)
        this.init()
      }
    },
@@ -180,7 +179,6 @@ export default {
      immediate: false,
      deep: true,
      handler () {
-        console.log('col')
        this.init()
      }
    },
@@ -295,7 +293,6 @@ export default {
    },
    reload () {
      if (!document.hidden) {
-        console.log('reload')
        this.init()
      }
    },
@@ -816,7 +813,6 @@ export default {
      getHexagon(this.hexagonSvgID).svgPolyline.on('mouseout', PolylineOut)
    },
    clearData () { // 清除数据 以及解绑事件 防止内存崩溃
-      console.log(123123123)
      if (getHexagon(this.hexagonSvgID) && getHexagon(this.hexagonSvgID).hexagonSvg) {
        this.allHexagon.forEach((item) => {
          item.off('mouseover', this.hexagonOver)
@@ -837,7 +833,6 @@ export default {
      }
      const dom = document.getElementById(this.hexagonSvgID)
      const child = document.getElementById('SvgHex' + this.hexagonSvgID)
-      console.log(dom, child)
      if (dom) {
        dom.removeChild(child)
      }
@@ -848,7 +843,6 @@ export default {

  },
  beforeDestroy () {
-    console.log('beforeDestroy')
    this.clearData()
    if (getHexagon(this.hexagonSvgID)) {
      getHexagon(this.hexagonSvgID).allHexagonRect = null// 文本框
--- a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
@@ -530,7 +530,7 @@
                  </el-form-item>
                  <el-form-item
                    v-if="item.type === 'range'"
-                    :prop="'param.valueMapping.mapping.' + index + 'to'"
+                    :prop="'param.valueMapping.mapping.' + index + '.to'"
                    :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
                    class="thresholds-from-item"
                  >