fix chart编辑的bug

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

@@ -78,25 +78,8 @@ export default {
   },
   methods: {
     initChart (chartOption) {
-      const self = this
       this.legends = []
       chartOption.series = this.initTreeMapData(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
-      chartOption.xAxis.data = chartOption.series.data.map(item => item.name)
-      chartOption.axisLabel = {
-        margin: 8,
-        formatter (params) {
-          const dataLength = chartOption.series.data.length || 1
-          const chartWidth = (document.getElementById('chart-canvas-' + self.chartInfo.id).offsetWidth - 80) / dataLength// 容器宽 - padding - 空余
-          const length = Math.ceil((chartWidth) / 16)
-          let val = ''
-          if (params.length > length) {
-            val = params.substr(0, length) + '...'
-            return val
-          } else {
-            return params
-          }
-        }
-      }
       chartOption.tooltip.formatter = this.formatterFunc
       /* 使用setTimeout延迟渲染图表，避免样式错乱 */
       setTimeout(() => {
@@ -131,6 +114,7 @@ export default {
               label: {
                 ...s.label,
                 formatter: this.pieFormatterLabel,
+                verticalAlign: 'middle',
                 rich: {
                   color: {
                     color: mapping ? mapping.color.text : '#000000'
@@ -149,6 +133,9 @@ export default {
     },
     formatterFunc (params, ticket, callback) {
       const self = this
+      if (!params.data) {
+        return ''
+      }
       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;">

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

@@ -13,7 +13,6 @@ const chartTreemapOption = {
         '<div class="tooltip-title">' +
         formatUtil.encodeHTML(treePath.join('/')) +
         '</div>',
-        'Disk Usage: ' + formatUtil.addCommas(value) + ' KB'
       ].join('')
     }
   },
@@ -24,11 +23,16 @@ const chartTreemapOption = {
       visibleMin: 10,
       label: {
         show: true,
-        formatter: '{b}'
+        position: 'inside',
+        formatter: '{b}',
+        verticalAlign: 'middle'
       },
       itemStyle: {
         borderColor: '#fff'
       },
+      breadcrumb: {
+        show: false
+      },
       levels: [
         {
           itemStyle: {

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

@@ -6,10 +6,10 @@ export default {
       if (this.chartInfo.param.text === 'all') {
         str += params.data.name
         str += ' : '
-        str += params.data.mapping && params.data.mapping.display ? self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.value }) : params.data.value
+        str += params.data.mapping && params.data.mapping.display ? self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : params.data.showValue
       }
       if (this.chartInfo.param.text === 'value') {
-        str += params.data.mapping && params.data.mapping.display ? self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.value }) : params.data.value
+        str += params.data.mapping && params.data.mapping.display ? self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : params.data.showValue
       }
       if (this.chartInfo.param.text === 'legend') {
         str += params.data.name

nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue

@@ -273,7 +273,7 @@
             placeholder=""
             popper-class="right-box-select-top prevent-clickoutside"
             size="small"
-            @change="change, $forceUpdate()"
+            @change="change"
           >
             <el-option v-for="item in statisticsList" :key="item.value" :label="$t(item.label)" :value="item.value">
               <span class="panel-dropdown-label-txt" >{{$t(item.label)}}</span>
@@ -294,7 +294,7 @@
             placeholder=""
             popper-class="right-box-select-top prevent-clickoutside"
             size="small"
-            @change="change, $forceUpdate()"
+            @change="change"
           >
             <el-option
               v-for="item in nullTypeList"
@@ -317,7 +317,7 @@
             placeholder=""
             popper-class="right-box-select-top prevent-clickoutside"
             size="small"
-            @change="change, $forceUpdate()"
+            @change="change"
           >
             <el-option
               v-for="item in textList"
@@ -351,7 +351,7 @@
                 placeholder=""
                 popper-class="right-box-select-top prevent-clickoutside"
                 size="small"
-                @change="change, $forceUpdate()"
+                @change="change"
               >
                 <el-option
                   v-for="item in legendPositionList"
@@ -374,7 +374,7 @@
                 :placeholder="$t('el.select.placeholder')"
                 popper-class="right-box-select-top prevent-clickoutside"
                 size="small"
-                @change="change, $forceUpdate()"
+                @change="change"
               >
                 <el-option
                   v-for="item in statisticsList"
@@ -775,7 +775,7 @@ export default {
           this.chartConfig.param = {
             nullType: this.chartConfig.param.nullType,
             statistics: 'last',
-            text: 'all',
+            text: 'value',
             valueMapping: {
               show: true,
               mapping: []

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

@@ -121,6 +121,7 @@
 <!--      ></chart-box>-->
       <chart-right-box
         v-if="chartRightBoxShow"
+        v-loading="rightBox.loading"
         ref="addChartModal"
         :chart="chart"
         :from="fromRoute.panel"
@@ -172,7 +173,8 @@ export default {
       rightBox: { // 面板弹出框相关
         chart: { show: false },
         chartTemp: { show: false },
-        panel: { show: false }
+        panel: { show: false },
+        loading: false
       },
       tableHover: false,
       searchTime: bus.getTimezontDateRange(),
@@ -304,7 +306,9 @@ export default {
       this.showPanel = val
       this.showPanel.type = 'dashboard'
       this.filter.panelId = this.showPanel.id
-      this.dateChange()
+      // this.dateChange()
+      this.getTableData()
+      this.getData(this.filter)
       this.$refs.chartList.cleanData()
     },
 
@@ -400,7 +404,9 @@ export default {
         this.chart.panelName = this.showPanel.name
         this.chart.id = ''
       } else {
+        this.rightBox.loading = true
         this.$get('visual/panel/chart/' + data.id).then(res => {
+          this.rightBox.loading = false
           if (res.code === 200) {
             const chartData = res.data.data
             this.chart = JSON.parse(JSON.stringify(chartData))
@@ -418,6 +424,7 @@ export default {
     },
     closeChartBox (refresh) {
       // this.rightBox.chart.show = false
+      this.chart = {}
       this.$store.dispatch('clearPanel')
       /* if (refresh) {
          this.getData(this.filter)
@@ -450,6 +457,8 @@ export default {
               message: this.$t('tip.deleteSuccess')
             })
             this.getData(this.filter)
+            this.chart = {}
+            this.$store.dispatch('clearPanel')
             // this.$refs.chartList.loadChartData(this.scrollbarWrap.scrollTop)
             // if(nextChart&&prevChart){ //删除图表为中间位置
             //   prevChart.next = nextChart.id;
@@ -801,7 +810,7 @@ export default {
         this.$nextTick(() => {
           if (add) {
             if (add === 'chart') {
-              this.addChart()
+              this.addChartBefore()
             }
             if (add === 'panel') {
               this.toAdd()