From 65b1eb40a56fd18afc8134d8ecd9dd17b246d5ef Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Tue, 6 Apr 2021 16:46:56 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9Aendpoint=20=E5=85=A8=E5=B1=8F=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=AF=94=E8=BE=83=E5=B7=AE=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/charts/line-chart-block.vue    | 3280 ++++++++---------
 .../page/dashboard/overview/chart.vue         | 1051 +++---
 2 files changed, 2177 insertions(+), 2154 deletions(-)

diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index 9e5cedec5..b3cd4dcee 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -181,538 +181,513 @@
 </template>
 
 <script>
-  import axios from 'axios'
-  import * as echarts from 'echarts'
-  import bus from '../../libs/bus'
-  import loading from '../common/loading'
-  import chartDataFormat from './chartDataFormat'
-  import { randomcolor } from '../common/js/radomcolor/randomcolor.js'
-  import chartConfig from '../page/dashboard/overview/chartConfig'
-  import { getChart, setChart, lineChartMove, getMousePoint } from '../common/js/common'
-  import { getMetricTypeValue } from '../common/js/tools'
+import axios from 'axios'
+import * as echarts from 'echarts'
+import bus from '../../libs/bus'
+import loading from '../common/loading'
+import chartDataFormat from './chartDataFormat'
+import { randomcolor } from '../common/js/radomcolor/randomcolor.js'
+import chartConfig from '../page/dashboard/overview/chartConfig'
+import { getChart, setChart, lineChartMove, getMousePoint } from '../common/js/common'
+import { getMetricTypeValue } from '../common/js/tools'
 
-  export default {
-    name: 'lineChartBlock',
-    components: {
-      loading: loading
+export default {
+  name: 'lineChartBlock',
+  components: {
+    loading: loading
+  },
+  props: {
+    chartData: {
+      type: Object
     },
-    props: {
-      chartData: {
-        type: Object
-      },
-      // 看板id
-      panelId: {
-        type: Number,
-        default: 0
-      },
-      chartIndex: {
-        type: Number,
-        default: 0
-      },
-      // 展示设置内容
-      showSetting: {
-        type: Boolean,
-        default: true
-      },
-      isExplore: {
-        type: Boolean,
-        default: false
-      },
-      tempDom: Object,
-      from: { type: String },
-      isLock: { type: Boolean, default: false },
-      chartTitleShow: {
-        type: Boolean,
-        default: true
-      }
+    // 看板id
+    panelId: {
+      type: Number,
+      default: 0
     },
-    computed: {
-      getButtonCode () {
-        return function (from, type) {
-          let code = ''
-          switch (from) {
-            case this.$CONSTANTS.fromRoute.panel:
-              if (type == 'chartToEdit') {
-                code = ''
-              }
-          }
-          return code
+    chartIndex: {
+      type: Number,
+      default: 0
+    },
+    // 展示设置内容
+    showSetting: {
+      type: Boolean,
+      default: true
+    },
+    isExplore: {
+      type: Boolean,
+      default: false
+    },
+    tempDom: Object,
+    from: { type: String },
+    isLock: { type: Boolean, default: false },
+    chartTitleShow: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    getButtonCode () {
+      return function (from, type) {
+        let code = ''
+        switch (from) {
+          case this.$CONSTANTS.fromRoute.panel:
+            if (type == 'chartToEdit') {
+              code = ''
+            }
         }
+        return code
       }
-    },
-    data () {
-      return {
-        data: {}, // 该图表信息,chartItem
-        noData: false,
-        seriesLength: 20,
-        seriesItem: [], // 保存信息
-        seriesItemArr: [], // 初次加载的数据
-        seriesItemScreen: [],
-        seriesItemArrScreen: [],
-        legendListMore: [],
-        screenLegendListMore: [],
-        chartInfo: {},
-        images: '',
-        isStackArea: false,
-        isError: false,
-        errorContent: '',
-        toolbox: false,
-        items: {
-          metric_name: [], // 每条数据列名称
-          xAxis: [],
-          theData: [] // series数据组
-        },
-        panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-        chartName: '',
-        firstLoad: false, // 是否第一次加载
-        divFirstShow: false,
-        /* highchartStore: null, // 保存图表数据
+    }
+  },
+  data () {
+    return {
+      data: {}, // 该图表信息,chartItem
+      noData: false,
+      seriesLength: 20,
+      seriesItem: [], // 保存信息
+      seriesItemArr: [], // 初次加载的数据
+      seriesItemScreen: [],
+      seriesItemArrScreen: [],
+      legendListMore: [],
+      screenLegendListMore: [],
+      chartInfo: {},
+      images: '',
+      isStackArea: false,
+      isError: false,
+      errorContent: '',
+      toolbox: false,
+      items: {
+        metric_name: [], // 每条数据列名称
+        xAxis: [],
+        theData: [] // series数据组
+      },
+      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
+      chartName: '',
+      firstLoad: false, // 是否第一次加载
+      divFirstShow: false,
+      /* highchartStore: null, // 保存图表数据
           echartStore:null,// 保存图表数据
           echartModalStore: null, // 全屏查看时数据 */
-        chartType: 'line', // 图表类型
-        screenModal: false,
-        // 查询数据使用
-        filter: {
-          start_time: '',
-          end_time: '',
-          from: ''
-        },
-        stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
-        /* legend:[],
+      chartType: 'line', // 图表类型
+      screenModal: false,
+      // 查询数据使用
+      filter: {
+        start_time: '',
+        end_time: '',
+        from: ''
+      },
+      stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
+      /* legend:[],
           legendList:[],
           screenLegendList:[], */
-        isGrey: [],
-        isGreyScreen: [],
-        bgColorList: [],
-        stackTotalColor: null,
-        firstShow: false, // 默认不显示操作按钮,
-        caretShow: false,
-        dropdownMenuShow: false,
-        showLegend: true,
-        searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
-        oldSearchTime: [],
-        screenTitleHeight: 58,
-        hasLegendOptions: false,
-        /* legendOptions:[], */
-        screenLegendOptions: []
+      isGrey: [],
+      isGreyScreen: [],
+      bgColorList: [],
+      stackTotalColor: null,
+      firstShow: false, // 默认不显示操作按钮,
+      caretShow: false,
+      dropdownMenuShow: false,
+      showLegend: true,
+      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
+      oldSearchTime: [],
+      screenTitleHeight: 58,
+      hasLegendOptions: false,
+      /* legendOptions:[], */
+      screenLegendOptions: []
+    }
+  },
+  watch: {
+    dropdownMenuShow (n) {
+      this.$emit('dropmenu-change', n)
+    }
+  },
+  methods: {
+    startResize (e) {
+      const vm = this
+      this.$chartResizeTool.start(vm, this.chartData, e, this.chartIndex)
+    },
+    setDivFirstShow (showDiv) {
+      this.divFirstShow = showDiv
+    },
+    mouseEnterChart () {
+      this.caretShow = true
+      if (getChart(this.chartIndex)) {
+        setTimeout(() => {
+          getChart(this.chartIndex).setOption({
+            toolbox: {
+              show: true
+            }
+          })
+        }, 300)
       }
     },
-    watch: {
-      dropdownMenuShow (n) {
-        this.$emit('dropmenu-change', n)
+    mouseLeaveChart () {
+      this.caretShow = false
+      if (getChart(this.chartIndex)) {
+        setTimeout(() => {
+          getChart(this.chartIndex).setOption({
+            toolbox: {
+              show: false
+            }
+          })
+        }, 300)
       }
     },
-    methods: {
-      startResize (e) {
-        const vm = this
-        this.$chartResizeTool.start(vm, this.chartData, e, this.chartIndex)
-      },
-      setDivFirstShow (showDiv) {
-        this.divFirstShow = showDiv
-      },
-      mouseEnterChart () {
-        this.caretShow = true
-        if (getChart(this.chartIndex)) {
-          setTimeout(() => {
-            getChart(this.chartIndex).setOption({
-              toolbox: {
-                show: true
-              }
-            })
-          }, 300)
-        }
-      },
-      mouseLeaveChart () {
-        this.caretShow = false
-        if (getChart(this.chartIndex)) {
-          setTimeout(() => {
-            getChart(this.chartIndex).setOption({
+    mouseEnterFullChart () {
+      if (this.echartModalStore) {
+        setTimeout(() => {
+          this.echartModalStore.setOption({
+            toolbox: {
+              show: true
+            }
+          })
+        }, 300)
+      }
+    },
+    mouseLeaveFullChart () {
+      if (this.echartModalStore) {
+        setTimeout(() => {
+          if (this.echartModalStore) {
+            this.echartModalStore.setOption({
               toolbox: {
                 show: false
               }
             })
-          }, 300)
-        }
-      },
-      mouseEnterFullChart () {
-        if (this.echartModalStore) {
-          setTimeout(() => {
-            this.echartModalStore.setOption({
-              toolbox: {
-                show: true
-              }
-            })
-          }, 300)
-        }
-      },
-      mouseLeaveFullChart () {
-        if (this.echartModalStore) {
-          setTimeout(() => {
-            if (this.echartModalStore) {
-              this.echartModalStore.setOption({
-                toolbox: {
-                  show: false
-                }
-              })
-            }
-          }, 300)
-        }
-      },
-      clickLegend (legendName, index) {
-        /* 点击legend
+          }
+        }, 300)
+      }
+    },
+    clickLegend (legendName, index) {
+      /* 点击legend
           * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
           * 2.如果点击的是唯一高亮的legend，则变为全高亮状态
           * 3.否则只改变被点击的legend状态
           * */
-        let highlightNum = 0 // 高亮数量
-        this.isGrey.forEach(g => {
-          if (!g) {
-            highlightNum++
-          }
-        })
-        const hasGrey = highlightNum < this.isGrey.length // 是否有置灰的
-        const curIsGrey = this.isGrey[index] // 当前legend的状态
-        const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的
-
-        const echart = getChart(this.chartIndex)
-        if (echart) {
-          if (!hasGrey) { // 1.除当前legend外全置灰
-            echart.dispatchAction({
-              type: 'legendInverseSelect'
-            })
-            echart.dispatchAction({
-              type: 'legendSelect',
-              name: legendName
-            })
-            this.isGrey = this.isGrey.map((g, i) => i !== index)
-          } else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
-            echart.dispatchAction({
-              type: 'legendAllSelect'
-            })
-            this.isGrey = this.isGrey.map(() => false)
-          } else {
-            const type = curIsGrey ? 'legendSelect' : 'legendUnSelect'
-            echart.dispatchAction({
-              type: type,
-              name: legendName
-            })
-            this.$set(this.isGrey, index, !this.isGrey[index])
-          }
+      let highlightNum = 0 // 高亮数量
+      this.isGrey.forEach(g => {
+        if (!g) {
+          highlightNum++
         }
-      },
-      clickLegend2 (legendName, index) {
-        // 点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
-        const curIsGrey = this.isGrey[index]
-        if (getChart(this.chartIndex)) {
-          this.legendListMore.forEach((item, i) => {
-            const isGrey = this.isGrey[i]
-            if (index != i) {
-              if (!curIsGrey && !isGrey) {
-                getChart(this.chartIndex).dispatchAction({
-                  type: 'legendUnSelect',
-                  name: item.name
-                })
-              } else if (!curIsGrey && isGrey) {
-                getChart(this.chartIndex).dispatchAction({
-                  type: 'legendSelect',
-                  name: item.name
-                })
-              } else {
-                getChart(this.chartIndex).dispatchAction({
-                  type: 'legendUnSelect',
-                  name: item.name
-                })
-              }
-            } else {
+      })
+      const hasGrey = highlightNum < this.isGrey.length // 是否有置灰的
+      const curIsGrey = this.isGrey[index] // 当前legend的状态
+      const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的
+
+      const echart = getChart(this.chartIndex)
+      if (echart) {
+        if (!hasGrey) { // 1.除当前legend外全置灰
+          echart.dispatchAction({
+            type: 'legendInverseSelect'
+          })
+          echart.dispatchAction({
+            type: 'legendSelect',
+            name: legendName
+          })
+          this.isGrey = this.isGrey.map((g, i) => i !== index)
+        } else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
+          echart.dispatchAction({
+            type: 'legendAllSelect'
+          })
+          this.isGrey = this.isGrey.map(() => false)
+        } else {
+          const type = curIsGrey ? 'legendSelect' : 'legendUnSelect'
+          echart.dispatchAction({
+            type: type,
+            name: legendName
+          })
+          this.$set(this.isGrey, index, !this.isGrey[index])
+        }
+      }
+    },
+    clickLegend2 (legendName, index) {
+      // 点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
+      const curIsGrey = this.isGrey[index]
+      if (getChart(this.chartIndex)) {
+        this.legendListMore.forEach((item, i) => {
+          const isGrey = this.isGrey[i]
+          if (index != i) {
+            if (!curIsGrey && !isGrey) {
+              getChart(this.chartIndex).dispatchAction({
+                type: 'legendUnSelect',
+                name: item.name
+              })
+            } else if (!curIsGrey && isGrey) {
               getChart(this.chartIndex).dispatchAction({
                 type: 'legendSelect',
                 name: item.name
               })
-            }
-          })
-          this.isGrey.forEach((item, i) => {
-            if (index != i) {
-              if (!curIsGrey && !item) {
-                this.$set(this.isGrey, i, true)
-              } else if (!curIsGrey && item) {
-                this.$set(this.isGrey, i, false)
-              } else {
-                this.$set(this.isGrey, i, true)
-              }
             } else {
-              if (item === true) {
-                this.$set(this.isGrey, i, false)
-              }
+              getChart(this.chartIndex).dispatchAction({
+                type: 'legendUnSelect',
+                name: item.name
+              })
             }
-          })
-        }
-      },
-      clickScreenLegend (legendName, index) {
-        /* 点击legend
+          } else {
+            getChart(this.chartIndex).dispatchAction({
+              type: 'legendSelect',
+              name: item.name
+            })
+          }
+        })
+        this.isGrey.forEach((item, i) => {
+          if (index != i) {
+            if (!curIsGrey && !item) {
+              this.$set(this.isGrey, i, true)
+            } else if (!curIsGrey && item) {
+              this.$set(this.isGrey, i, false)
+            } else {
+              this.$set(this.isGrey, i, true)
+            }
+          } else {
+            if (item === true) {
+              this.$set(this.isGrey, i, false)
+            }
+          }
+        })
+      }
+    },
+    clickScreenLegend (legendName, index) {
+      /* 点击legend
           * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
           * 2.如果点击的是唯一高亮的legend，则变为全高亮状态
           * 3.否则只改变被点击的legend状态
           * */
-        let highlightNum = 0 // 高亮数量
-        this.isGreyScreen.forEach(g => {
-          if (!g) {
-            highlightNum++
-          }
-        })
-        const hasGrey = highlightNum < this.isGreyScreen.length // 是否有置灰的
-        const curIsGrey = this.isGreyScreen[index] // 当前legend的状态
-        const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的
-
-        const echart = this.echartModalStore
-        if (echart) {
-          if (!hasGrey) { // 1.除当前legend外全置灰
-            echart.dispatchAction({
-              type: 'legendInverseSelect'
-            })
-            echart.dispatchAction({
-              type: 'legendSelect',
-              name: legendName
-            })
-            this.isGreyScreen = this.isGreyScreen.map((g, i) => i !== index)
-          } else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
-            echart.dispatchAction({
-              type: 'legendAllSelect'
-            })
-            this.isGreyScreen = this.isGreyScreen.map(() => false)
-          } else {
-            const type = curIsGrey ? 'legendSelect' : 'legendUnSelect'
-            echart.dispatchAction({
-              type: type,
-              name: legendName
-            })
-            this.$set(this.isGreyScreen, index, !this.isGreyScreen[index])
-          }
+      let highlightNum = 0 // 高亮数量
+      this.isGreyScreen.forEach(g => {
+        if (!g) {
+          highlightNum++
         }
-      },
-      clickScreenLegend2 (legendName, index) {
-        // 点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
-        const curIsGrey = this.isGreyScreen[index]
-        if (this.echartModalStore) {
-          this.screenLegendListMore.forEach((item, i) => {
-            const isGrey = this.isGreyScreen[i]
-            if (index != i) {
-              if (!curIsGrey && !isGrey) {
-                this.echartModalStore.dispatchAction({
-                  type: 'legendUnSelect',
-                  name: item.name
-                })
-              } else if (!curIsGrey && isGrey) {
-                this.echartModalStore.dispatchAction({
-                  type: 'legendSelect',
-                  name: item.name
-                })
-              } else {
-                this.echartModalStore.dispatchAction({
-                  type: 'legendUnSelect',
-                  name: item.name
-                })
-              }
-            } else {
+      })
+      const hasGrey = highlightNum < this.isGreyScreen.length // 是否有置灰的
+      const curIsGrey = this.isGreyScreen[index] // 当前legend的状态
+      const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的
+
+      const echart = this.echartModalStore
+      if (echart) {
+        if (!hasGrey) { // 1.除当前legend外全置灰
+          echart.dispatchAction({
+            type: 'legendInverseSelect'
+          })
+          echart.dispatchAction({
+            type: 'legendSelect',
+            name: legendName
+          })
+          this.isGreyScreen = this.isGreyScreen.map((g, i) => i !== index)
+        } else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
+          echart.dispatchAction({
+            type: 'legendAllSelect'
+          })
+          this.isGreyScreen = this.isGreyScreen.map(() => false)
+        } else {
+          const type = curIsGrey ? 'legendSelect' : 'legendUnSelect'
+          echart.dispatchAction({
+            type: type,
+            name: legendName
+          })
+          this.$set(this.isGreyScreen, index, !this.isGreyScreen[index])
+        }
+      }
+    },
+    clickScreenLegend2 (legendName, index) {
+      // 点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
+      const curIsGrey = this.isGreyScreen[index]
+      if (this.echartModalStore) {
+        this.screenLegendListMore.forEach((item, i) => {
+          const isGrey = this.isGreyScreen[i]
+          if (index != i) {
+            if (!curIsGrey && !isGrey) {
+              this.echartModalStore.dispatchAction({
+                type: 'legendUnSelect',
+                name: item.name
+              })
+            } else if (!curIsGrey && isGrey) {
               this.echartModalStore.dispatchAction({
                 type: 'legendSelect',
                 name: item.name
               })
-            }
-          })
-          this.isGreyScreen.forEach((item, i) => {
-            if (index != i) {
-              if (!curIsGrey && !item) {
-                this.$set(this.isGreyScreen, i, true)
-              } else if (!curIsGrey && item) {
-                this.$set(this.isGreyScreen, i, false)
-              } else {
-                this.$set(this.isGreyScreen, i, true)
-              }
             } else {
-              if (item === true) {
-                this.$set(this.isGreyScreen, i, false)
-              }
+              this.echartModalStore.dispatchAction({
+                type: 'legendUnSelect',
+                name: item.name
+              })
             }
-          })
-        }
-      },
-      clearData () {
-        if (getChart(this.chartIndex)) {
-          getChart(this.chartIndex).clear()
-          // getChart(this.chartIndex).dispose();//关闭销毁实例 不再占用内存
-        }
-      },
-      formatLegend (chartWidth, name) {
-        if (!name) {
-          return ''
-        }
-        // 计算宽度
-        const span = document.querySelector('.temp-dom')
-        span.textContent = name
-        const txtWidth = parseFloat(window.getComputedStyle(span).width) - this.tempDom.width
-        if (txtWidth < chartWidth) {
-          return name
-        } else {
-          const charNum = `${(chartWidth - 100) / (txtWidth / name.length)}`
-          return name.slice(0, charNum) + '...'
-        }
-      },
-      // chartSite用于区分是全屏显示还是局部显示
-      initChart (chartInfo, dataArg, ele, chartSite, legend) {
-        this.legendMagicType = legend
-        this.chartInfo = chartInfo
-        const self = this
-        this.chartType = '' // 图表类型
-        if (chartInfo.type === 4) { // line,bar
-          this.chartType = 'line'
-        }
-        const minusTime = (new Date(this.searchTime[0]).getTime() - new Date(this.$refs.pickTime.$refs.multipleTime.searchTime[0]).getTime())
-        this.minusTime = minusTime
-        let minTime = null
-        let maxTime = null
-        if (dataArg.length > 0 && dataArg[0].data &&
-          dataArg[0].data.length > 0 && dataArg[0].data[0].length > 0) {
-          const len = dataArg[0].data.length - 1
-          minTime = dataArg[0].data[0][0]
-          maxTime = dataArg[0].data[len][0]
-        }
-        if (chartSite === 'local') {
-          setChart(this.chartIndex, echarts.init(ele))
-          // getChart(this.chartIndex) = echarts.init(ele);
-          // chartId='lineChartArea';
-        } else if (chartSite === 'screen') {
-          this.echartModalStore = echarts.init(ele)
-          // chartId='screenShowArea';
-        }
-        const chartWidth = ele.clientWidth
-
-        const stackIconBorderColor = (chartInfo.type === 'stackArea' ? '#53a3cb' : '#7e7e7e')
-        const stackIconChooseBorderColor = (chartInfo.type === 'stackArea' ? '#7e7e7e' : '#53a3cb')
-        let maxValueCopies = this.getMaxValue(dataArg, chartInfo)
-        const maxValue = maxValueCopies.maxValue
-        // let minValue = maxValueCopies.minValue
-        if (chartInfo.unit && dataArg.length > 0) {
-          // maxValue = dataArg[0].data[0][1]
-          // minValue = dataArg[0].data[0][1]
-          for (let j = 0; j < dataArg.length; j++) {
-            dataArg[j].showAllSymbol = false
+          } else {
+            this.echartModalStore.dispatchAction({
+              type: 'legendSelect',
+              name: item.name
+            })
           }
+        })
+        this.isGreyScreen.forEach((item, i) => {
+          if (index != i) {
+            if (!curIsGrey && !item) {
+              this.$set(this.isGreyScreen, i, true)
+            } else if (!curIsGrey && item) {
+              this.$set(this.isGreyScreen, i, false)
+            } else {
+              this.$set(this.isGreyScreen, i, true)
+            }
+          } else {
+            if (item === true) {
+              this.$set(this.isGreyScreen, i, false)
+            }
+          }
+        })
+      }
+    },
+    clearData () {
+      if (getChart(this.chartIndex)) {
+        getChart(this.chartIndex).clear()
+        // getChart(this.chartIndex).dispose();//关闭销毁实例 不再占用内存
+      }
+    },
+    formatLegend (chartWidth, name) {
+      if (!name) {
+        return ''
+      }
+      // 计算宽度
+      const span = document.querySelector('.temp-dom')
+      span.textContent = name
+      const txtWidth = parseFloat(window.getComputedStyle(span).width) - this.tempDom.width
+      if (txtWidth < chartWidth) {
+        return name
+      } else {
+        const charNum = `${(chartWidth - 100) / (txtWidth / name.length)}`
+        return name.slice(0, charNum) + '...'
+      }
+    },
+    // chartSite用于区分是全屏显示还是局部显示
+    initChart (chartInfo, dataArg, ele, chartSite, legend) {
+      this.legendMagicType = legend
+      this.chartInfo = chartInfo
+      const self = this
+      this.chartType = '' // 图表类型
+      if (chartInfo.type === 4) { // line,bar
+        this.chartType = 'line'
+      }
+      const minusTime = (new Date(this.searchTime[0]).getTime() - new Date(this.$refs.pickTime.$refs.multipleTime.searchTime[0]).getTime())
+      this.minusTime = minusTime
+      let minTime = null
+      let maxTime = null
+      if (dataArg.length > 0 && dataArg[0].data &&
+          dataArg[0].data.length > 0 && dataArg[0].data[0].length > 0) {
+        const len = dataArg[0].data.length - 1
+        minTime = dataArg[0].data[0][0]
+        maxTime = dataArg[0].data[len][0]
+      }
+      if (chartSite === 'local') {
+        setChart(this.chartIndex, echarts.init(ele))
+        // getChart(this.chartIndex) = echarts.init(ele);
+        // chartId='lineChartArea';
+      } else if (chartSite === 'screen') {
+        this.echartModalStore = echarts.init(ele)
+        // chartId='screenShowArea';
+      }
+      const chartWidth = ele.clientWidth
+
+      const stackIconBorderColor = (chartInfo.type === 'stackArea' ? '#53a3cb' : '#7e7e7e')
+      const stackIconChooseBorderColor = (chartInfo.type === 'stackArea' ? '#7e7e7e' : '#53a3cb')
+      let maxValueCopies = this.getMaxValue(dataArg, chartInfo)
+      const maxValue = maxValueCopies.maxValue
+      // let minValue = maxValueCopies.minValue
+      if (chartInfo.unit && dataArg.length > 0) {
+        // maxValue = dataArg[0].data[0][1]
+        // minValue = dataArg[0].data[0][1]
+        for (let j = 0; j < dataArg.length; j++) {
+          dataArg[j].showAllSymbol = false
         }
-        let dot = maxValueCopies.dot
-        const copies = maxValueCopies.copies
-        const unit = maxValueCopies.unit
-        const oldDot = maxValueCopies.oldDot
-        let option = {
-          title: {
-            show: false
-          },
-          color: this.bgColorList,
-          toolbox: {
-            show: false,
-            top: '0',
-            right: '18',
-            showTitle: false,
-            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: stackIconBorderColor
-                },
-                emphasis: {
-                  borderColor: stackIconChooseBorderColor
-                }
+      }
+      let dot = maxValueCopies.dot
+      const copies = maxValueCopies.copies
+      const unit = maxValueCopies.unit
+      const oldDot = maxValueCopies.oldDot
+      let option = {
+        title: {
+          show: false
+        },
+        color: this.bgColorList,
+        toolbox: {
+          show: false,
+          top: '0',
+          right: '18',
+          showTitle: false,
+          feature: {
+            dataZoom: {
+              yAxisIndex: false,
+              title: {
+                zoom: self.$t('overall.toolBox.zoom'),
+                back: self.$t('overall.toolBox.back')
               }
             },
-            tooltip: { // 和 option.tooltip 的配置项相同
-              show: true,
-              position: 'top',
-              formatter: function (param) {
-                return param.title // 自定义的 DOM 结构
+            magicType: {
+              type: ['stack'],
+              title: {
+                stack: self.$t('overall.toolBox.stack')
               },
-              backgroundColor: 'rgba(255,255,255,0)',
-              borderColor: 'rgba(255,255,255,0)',
-              textStyle: {
-                fontSize: 12,
-                color: '#439AC6'
+              iconStyle: {
+                borderColor: stackIconBorderColor
+              },
+              emphasis: {
+                borderColor: stackIconChooseBorderColor
               }
             }
           },
-          tooltip: {
-            trigger: 'axis',
-            confine: false,
-            backgroundColor: 'rgba(221,228,237,1)',
+          tooltip: { // 和 option.tooltip 的配置项相同
+            show: true,
+            position: 'top',
+            formatter: function (param) {
+              return param.title // 自定义的 DOM 结构
+            },
+            backgroundColor: 'rgba(255,255,255,0)',
+            borderColor: 'rgba(255,255,255,0)',
             textStyle: {
-              color: '#000'
-            },
-            axisPointer: {
-              snap: false,
-              animation: false
-            },
-            extraCssText: 'z-index:1000;',
-            /* enterable:true, 导致tooltip不消失，显示多个tooltip */
-            position: function (point, params, dom, rect, size) {
-              dom.style.transform = 'translateZ(0)'
-              const windowWidth = window.innerWidth// 窗口宽度
-              const windowHeight = window.innerHeight// 窗口高度
-              const windowMouse = getMousePoint()
-              // 提示框位置
-              let x = 0
-              let y = 0
-              // 当前鼠标位置
-              const pointX = point[0]
-              const pointY = point[1]
-              // 外层div大小
-              const viewWidth = size.viewSize[0]
-              // const viewHeight = size.viewSize[1]
-              // 提示框大小
-              const boxWidth = size.contentSize[0]
-              const boxHeight = size.contentSize[1]
-              if (chartSite === 'local') { // 本地显示
-                const chartDom = document.getElementById(chartInfo.title + '_' + chartInfo.id)
-                if (chartDom) {
-                  // const parTop = document.getElementById(chartInfo.title + '_' + chartInfo.id).offsetTop
-                  const parleft = document.getElementById(chartInfo.title + '_' + chartInfo.id).offsetLeft
+              fontSize: 12,
+              color: '#439AC6'
+            }
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          confine: false,
+          backgroundColor: 'rgba(221,228,237,1)',
+          textStyle: {
+            color: '#000'
+          },
+          axisPointer: {
+            snap: false,
+            animation: false
+          },
+          extraCssText: 'z-index:1000;',
+          /* enterable:true, 导致tooltip不消失，显示多个tooltip */
+          position: function (point, params, dom, rect, size) {
+            dom.style.transform = 'translateZ(0)'
+            const windowWidth = window.innerWidth// 窗口宽度
+            const windowHeight = window.innerHeight// 窗口高度
+            const windowMouse = getMousePoint()
+            // 提示框位置
+            let x = 0
+            let y = 0
+            // 当前鼠标位置
+            const pointX = point[0]
+            const pointY = point[1]
+            // 外层div大小
+            const viewWidth = size.viewSize[0]
+            // const viewHeight = size.viewSize[1]
+            // 提示框大小
+            const boxWidth = size.contentSize[0]
+            const boxHeight = size.contentSize[1]
+            if (chartSite === 'local') { // 本地显示
+              const chartDom = document.getElementById(chartInfo.title + '_' + chartInfo.id)
+              if (chartDom) {
+                // const parTop = document.getElementById(chartInfo.title + '_' + chartInfo.id).offsetTop
+                const parleft = document.getElementById(chartInfo.title + '_' + chartInfo.id).offsetLeft
 
-                  const parent = document.getElementById('tableList')
-                  // const parClientHeight = parent.clientHeight// 可视高度
-                  const parClientWidth = parent.clientWidth// 可视宽度
-                  // const parScrollTop = parent.scrollTop
-                  if ((parClientWidth - pointX - parleft - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框
-                    x = pointX + 10
-                  } else {
-                    x = pointX - boxWidth
-                  }
-                  if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-                    y = pointY + 15
-                  } else {
-                    y = pointY - boxHeight - 10
-                  }
-                  return [x, y]
-                } else { // preview page
-                  if (windowMouse.x < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
-                    x = pointX + 15
-                  } else {
-                    x = pointX - boxWidth - 15
-                  }
-                  if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-                    y = pointY + 15
-                  } else {
-                    y = pointY - boxHeight - 10
-                  }
-                  return [x, y]
-                }
-              } else {
-                if (pointX < (viewWidth / 2)) { // 说明鼠标在左边放不下提示框
+                const parent = document.getElementById('tableList')
+                // const parClientHeight = parent.clientHeight// 可视高度
+                const parClientWidth = parent.clientWidth// 可视宽度
+                // const parScrollTop = parent.scrollTop
+                if ((parClientWidth - pointX - parleft - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框
                   x = pointX + 10
                 } else {
                   x = pointX - boxWidth
@@ -723,590 +698,615 @@
                   y = pointY - boxHeight - 10
                 }
                 return [x, y]
+              } else { // preview page
+                if (windowMouse.x < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
+                  x = pointX + 15
+                } else {
+                  x = pointX - boxWidth - 15
+                }
+                if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
+                  y = pointY + 15
+                } else {
+                  y = pointY - boxHeight - 10
+                }
+                return [x, y]
               }
-            },
-            formatter: function (params) {
-              let str = '<div>'
-              let sum = 0
-              let minusFlag = true
-              params.forEach((item, i) => {
-                const tip = legend[item.seriesIndex]
-                const color = self.bgColorList[item.seriesIndex]
-                if (i === 0 && tip.alias.indexOf('Previous ') === -1) {
-                  const value = item.data[0]
-                  const tData = new Date(value)
-                  str += '<div style="margin-bottom: 5px">'
-                  str += bus.timeFormate(tData)
-                  str += '</div>'
-                }
-                if (tip.alias.indexOf('Previous ') !== -1 && minusFlag) {
-                  if (i !== 0) {
-                    str += '<div style="border:1px dashed #333;width:100%;margin-top: 5px"></div>'
-                  }
-                  const value = item.data[0] - self.minusTime
-                  const tData = new Date(value)
-                  str += '<div style="margin-bottom: 5px;margin-top: 5px">'
-                  str += bus.timeFormate(tData)
-                  str += '</div>'
-                  minusFlag = false
-                }
-                const previousItem = params.find((series) => ('Previous ' + item.seriesName) === series.seriesName)
-                let val = item.data[1] ? parseFloat(Number(item.data[1]).toFixed(2)) : ''
-                if (val === 0) {
-                  val = Number(item.data[1]).toExponential(2)
-                }
-                sum += self.numberWithEConvent(val)
-                str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
-                str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
-                str += '<div style="padding-left: 10px;">'
-                str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, -1, oldDot)
-                str += '</div>'
-                if (previousItem) {
-                  str += '<div style="padding-left: 10px;">'
-                  let previousval = parseFloat(Number(previousItem.data[1]).toFixed(2))
-                  if (previousval === 0) {
-                    previousval = Number(item.data[1]).toExponential(2)
-                  }
-                  let minusVal = 0
-                  if (previousval <= val) {
-                    minusVal = val - previousval
-                    str += '+'
-                  } else {
-                    minusVal = previousval - val
-                    str += '-'
-                  }
-
-                  str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(minusVal, null, 2)
-                  str += '</div>'
-                }
-                str += '</div>'
-              })
-              if (self.data.type === 'stackArea' || self.isStackArea) {
-                if (!self.stackTotalColor || self.stackTotalColor == '') {
-                  self.stackTotalColor = randomcolor()
-                }
-                sum = parseFloat(Number(sum).toFixed(2))
-                str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
-                str += '<div style="line-height: 18px; font-size: 12px;padding-left:0px;">'
-                str += `<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${self.stackTotalColor};}'></span>`
-                str += self.$t('dashboard.panel.chartTotal')
-                str += '</div>'
-                str += '<div style="padding-left: 10px;">'
-                str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(sum, null, 2)
-                str += '</div>'
-                str += '</div>'
+            } else {
+              if (pointX < (viewWidth / 2)) { // 说明鼠标在左边放不下提示框
+                x = pointX + 10
+              } else {
+                x = pointX - boxWidth
               }
-
-              str += '</div>'
-              return str
+              if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
+                y = pointY + 15
+              } else {
+                y = pointY - boxHeight - 10
+              }
+              return [x, y]
             }
           },
-          legend: {
+          formatter: function (params) {
+            let str = '<div>'
+            let sum = 0
+            let minusFlag = true
+            params.forEach((item, i) => {
+              const tip = legend[item.seriesIndex]
+              const color = self.bgColorList[item.seriesIndex]
+              if (i === 0 && tip.alias.indexOf('Previous ') === -1) {
+                const value = item.data[0]
+                const tData = new Date(value)
+                str += '<div style="margin-bottom: 5px">'
+                str += bus.timeFormate(tData)
+                str += '</div>'
+              }
+              if (tip.alias.indexOf('Previous ') !== -1 && minusFlag) {
+                if (i !== 0) {
+                  str += '<div style="border:1px dashed #333;width:100%;margin-top: 5px"></div>'
+                }
+                const value = item.data[0] - self.minusTime
+                const tData = new Date(value)
+                str += '<div style="margin-bottom: 5px;margin-top: 5px">'
+                str += bus.timeFormate(tData)
+                str += '</div>'
+                minusFlag = false
+              }
+              const previousItem = params.find((series) => ('Previous ' + item.seriesName) === series.seriesName)
+              let val = item.data[1] ? parseFloat(Number(item.data[1]).toFixed(2)) : ''
+              if (val === 0) {
+                val = Number(item.data[1]).toExponential(2)
+              }
+              sum += self.numberWithEConvent(val)
+              str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
+              str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
+              str += '<div style="padding-left: 10px;">'
+              str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, -1, oldDot)
+              str += '</div>'
+              if (previousItem) {
+                str += '<div style="padding-left: 10px;">'
+                let previousval = parseFloat(Number(previousItem.data[1]).toFixed(2))
+                if (previousval === 0) {
+                  previousval = Number(item.data[1]).toExponential(2)
+                }
+                let minusVal = 0
+                if (previousval <= val) {
+                  minusVal = val - previousval
+                  str += '+'
+                } else {
+                  minusVal = previousval - val
+                  str += '-'
+                }
+
+                str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(minusVal, null, 2)
+                str += '</div>'
+              }
+              str += '</div>'
+            })
+            if (self.data.type === 'stackArea' || self.isStackArea) {
+              if (!self.stackTotalColor || self.stackTotalColor == '') {
+                self.stackTotalColor = randomcolor()
+              }
+              sum = parseFloat(Number(sum).toFixed(2))
+              str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
+              str += '<div style="line-height: 18px; font-size: 12px;padding-left:0px;">'
+              str += `<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${self.stackTotalColor};}'></span>`
+              str += self.$t('dashboard.panel.chartTotal')
+              str += '</div>'
+              str += '<div style="padding-left: 10px;">'
+              str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(sum, null, 2)
+              str += '</div>'
+              str += '</div>'
+            }
+
+            str += '</div>'
+            return str
+          }
+        },
+        legend: {
+          show: false
+        },
+        grid: {
+          top: 30,
+          left: 0,
+          right: 30,
+          containLabel: true,
+          bottom: 8// 156
+        },
+        xAxis: {
+          type: 'time',
+          animation: false,
+          showAllSymbol: false,
+          axisLabel: {
+            interval: '0',
+            showMaxLabel: false,
+            rotate: 0,
+            show: true,
+            fontSize: 10,
+            formatter: function (value) {
+              const tData = new Date(value)
+              let hour = tData.getHours()
+              hour = hour > 9 ? hour : '0' + hour // 加0补充为两位数字
+              let minute = tData.getMinutes()
+              minute = minute > 9 ? minute : '0' + minute // 如果分钟小于10,则在前面加0补充为两位数字
+              if (minTime !== null && maxTime !== null) {
+                const diffSec = (maxTime - minTime) / 1000
+                const secOneDay = 24 * 60 * 60// 1天的秒数
+                const secOneMonth = secOneDay * 30// 30天的秒数
+                if (diffSec <= secOneDay) { // 同一天
+                  return [hour, minute].join(':')
+                } else if (diffSec < secOneMonth) { // 大于1天，小于30天
+                  return [tData.getMonth() + 1, tData.getDate()].join('/') + ' ' + [hour, minute].join(':')
+                } else { // 大于等于30天
+                  return [tData.getMonth() + 1, tData.getDate()].join('/')
+                }
+              } else {
+                return [tData.getFullYear(), tData.getMonth() + 1, tData.getDate()].join('/') + '\n' +
+                    [hour, minute].join(':')
+              }
+            }
+          },
+          axisPointer: { // y轴上显示指针对应的值
+            show: true
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#d9d9d9',
+              opacity: 0.8,
+              width: 1
+            }
+          },
+          axisLine: {
             show: false
           },
-          grid: {
-            top: 30,
-            left: 0,
-            right: 30,
-            containLabel: true,
-            bottom: 8// 156
-          },
-          xAxis: {
-            type: 'time',
-            animation: false,
-            showAllSymbol: false,
-            axisLabel: {
-              interval: '0',
-              showMaxLabel: false,
-              rotate: 0,
-              show: true,
-              fontSize: 10,
-              formatter: function (value) {
-                const tData = new Date(value)
-                let hour = tData.getHours()
-                hour = hour > 9 ? hour : '0' + hour // 加0补充为两位数字
-                let minute = tData.getMinutes()
-                minute = minute > 9 ? minute : '0' + minute // 如果分钟小于10,则在前面加0补充为两位数字
-                if (minTime !== null && maxTime !== null) {
-                  const diffSec = (maxTime - minTime) / 1000
-                  const secOneDay = 24 * 60 * 60// 1天的秒数
-                  const secOneMonth = secOneDay * 30// 30天的秒数
-                  if (diffSec <= secOneDay) { // 同一天
-                    return [hour, minute].join(':')
-                  } else if (diffSec < secOneMonth) { // 大于1天，小于30天
-                    return [tData.getMonth() + 1, tData.getDate()].join('/') + ' ' + [hour, minute].join(':')
-                  } else { // 大于等于30天
-                    return [tData.getMonth() + 1, tData.getDate()].join('/')
-                  }
-                } else {
-                  return [tData.getFullYear(), tData.getMonth() + 1, tData.getDate()].join('/') + '\n' +
-                    [hour, minute].join(':')
-                }
-              }
-            },
-            axisPointer: { // y轴上显示指针对应的值
-              show: true
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: '#d9d9d9',
-                opacity: 0.8,
-                width: 1
-              }
-            },
-            axisLine: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            }
-            // boundaryGap:['20%', '0'],
-          },
-          yAxis: {
-            type: 'value',
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: '#d9d9d9',
-                opacity: 0.8,
-                width: 1
-              }
-            },
-            // maxInterval:{},
-            // 去掉y轴--start
-            axisLine: {
-              show: false
-            },
-            minInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'min'),
-            maxInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(dataArg.length / 5),
-            axisTick: {
-              show: false
-            },
-            // 去掉y轴--end
-            axisLabel: {
-              show: true,
-              fontSize: 10,
-              formatter: function (val, index) {
-                let value = val
-                if (val !== 0) {
-                  value = parseFloat(Number(val).toFixed(2))
-                  if (value === 0) {
-                    value = Number(val).toExponential(2)
-                  }
-                }
-                let chartUnit = chartInfo.unit
-                chartUnit = chartUnit || 2
-                const unit = chartDataFormat.getUnit(chartUnit)
-                const flag = JSON.stringify(value).length > JSON.stringify(chartDataFormat.Interval(maxValue, copies, unit.type)).length
-                if (chartDataFormat.Interval(maxValue, copies, unit.type, 'min') < 1 && dot < 2) {
-                  dot = 2
-                }
-                if (flag || dot == 0) {
-                  dot = 1
-                }
-                return unit.compute(value, index, -1, dot)
-              }
-            }
-            // boundaryGap:[0,0.2]
-          },
-          useUTC: false, // 使用本地时间
-          series: dataArg
-        }
-        if (unit.type == 'Time') {
-          delete option.yAxis.maxInterval
-        }
-        // params.series = dataArg;
-        if (chartSite === 'local') { // 本地显示
-          if (legend) {
-            this.legendList = []
-            this.isGrey = []
-            legend.forEach((item, i) => {
-              const legend = {
-                name: item.name,
-                alias: item.alias,
-                color: item.color,
-                showText: this.formatLegend(chartWidth, item.name)
-              }
-              this.legendList.push(legend)
-              this.isGrey.push(false)
-            })
+          axisTick: {
+            show: false
           }
-          this.legendListMore = this.legendList.filter((item, index) => index < this.seriesLength)
-          if (this.hasLegendOptions) {
-            this.computeLegendData(this.legendListMore, dataArg, 'local')
+          // boundaryGap:['20%', '0'],
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#d9d9d9',
+              opacity: 0.8,
+              width: 1
+            }
+          },
+          // maxInterval:{},
+          // 去掉y轴--start
+          axisLine: {
+            show: false
+          },
+          minInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'min'),
+          maxInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(dataArg.length / 5),
+          axisTick: {
+            show: false
+          },
+          // 去掉y轴--end
+          axisLabel: {
+            show: true,
+            fontSize: 10,
+            formatter: function (val, index) {
+              let value = val
+              if (val !== 0) {
+                value = parseFloat(Number(val).toFixed(2))
+                if (value === 0) {
+                  value = Number(val).toExponential(2)
+                }
+              }
+              let chartUnit = chartInfo.unit
+              chartUnit = chartUnit || 2
+              const unit = chartDataFormat.getUnit(chartUnit)
+              const flag = JSON.stringify(value).length > JSON.stringify(chartDataFormat.Interval(maxValue, copies, unit.type)).length
+              if (chartDataFormat.Interval(maxValue, copies, unit.type, 'min') < 1 && dot < 2) {
+                dot = 2
+              }
+              if (flag || dot == 0) {
+                dot = 1
+              }
+              return unit.compute(value, index, -1, dot)
+            }
           }
-          this.$nextTick(() => {
-            setTimeout(function () {
-              const divHeight = self.$refs.legendArea.offsetHeight
-              if (!chartInfo.height) {
-                getChart(self.chartIndex).resize({ height: (400 - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
-              } else {
-                getChart(self.chartIndex).resize({ height: (chartInfo.height - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
-              }
-              if (dataArg && dataArg.length > 0) {
-                getChart(self.chartIndex).clear()
-                getChart(self.chartIndex).setOption(option)// 创建图表
-                self.noData = false
-              } else {
-                self.noData = true
-                option = chartConfig.getOptionNoData('noData')
-                getChart(self.chartIndex).clear()
-                getChart(self.chartIndex).setOption(option)// 创建图表
-              }
-
-              self.$refs['localLoading' + self.chartIndex].endLoading()
-              self.firstShow = true // 展示操作按键
-            }, 100)
-
-            window.addEventListener('resize', this.chartResize)
-            getChart(this.chartIndex).on('magictypechanged', function (params) {
-              self.isStackArea = !self.isStackArea
-              if (self.isStackArea) {
-                getChart(self.chartIndex).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: stackIconChooseBorderColor
-                        }
-                      }
-                    }
-                  },
-                  tooltip: {
-                    axisPointer: {
-                      snap: false,
-                      animation: false
-                    },
-                    formatter: function (params) {
-                      let str = '<div>'
-                      let sum = 0
-                      params.forEach((item, i) => {
-                        const tip = self.legendMagicType[item.seriesIndex]
-                        const color = self.bgColorList[item.seriesIndex]
-                        if (i === 0) {
-                          const value = item.data[0]
-                          const tData = new Date(value)
-                          str += '<div style="margin-bottom: 5px">'
-                          str += bus.timeFormate(tData)
-                          str += '</div>'
-                        }
-                        let val = parseFloat(Number(item.data[1]).toFixed(2))
-                        if (val === 0) {
-                          val = Number(item.data[1]).toExponential(2)
-                        }
-                        sum += self.numberWithEConvent(val)
-                        str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
-                        str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
-                        str += '<div style="padding-left: 10px;">'
-                        str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, 2)
-                        str += '</div>'
-                        str += '</div>'
-                      })
-                      if (self.data.type === 'stackArea' || self.isStackArea) {
-                        sum = parseFloat(Number(sum).toFixed(2))
-                        str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
-                        str += '<div style="line-height: 18px; font-size: 12px;padding-left:20px;">'
-                        str += self.$t('dashboard.panel.chartTotal')
-                        str += '</div>'
-                        str += '<div style="padding-left: 10px;">'
-                        str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(sum, null, 2)
-                        str += '</div>'
-                        str += '</div>'
-                      }
-
-                      str += '</div>'
-                      return str
-                    }
-                  }
-                })
-              } else {
-                getChart(self.chartIndex).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: stackIconChooseBorderColor
-                        }
-                      }
-                    }
-                  }
-                })
-              }
-            })
+          // boundaryGap:[0,0.2]
+        },
+        useUTC: false, // 使用本地时间
+        series: dataArg
+      }
+      if (unit.type == 'Time') {
+        delete option.yAxis.maxInterval
+      }
+      // params.series = dataArg;
+      if (chartSite === 'local') { // 本地显示
+        if (legend) {
+          this.legendList = []
+          this.isGrey = []
+          legend.forEach((item, i) => {
+            const legend = {
+              name: item.name,
+              alias: item.alias,
+              color: item.color,
+              showText: this.formatLegend(chartWidth, item.name)
+            }
+            this.legendList.push(legend)
+            this.isGrey.push(false)
           })
-        } else if (chartSite === 'screen') { // 全屏显示
-          if (legend) {
-            this.screenLegendList = []
-            this.isGreyScreen = []
-            legend.forEach((item, i) => {
-              const legend = {
-                name: item.name,
-                alias: item.alias,
-                color: item.color,
-                showText: this.formatLegend(chartWidth, item.name)
-              }
-              this.screenLegendList.push(legend)
-              this.isGreyScreen.push(false)
-            })
-          }
-          if (this.screenLegendListMore.length !== this.screenLegendList.length) {
-            this.screenLegendListMore = []
-            const screenLegendListMore = this.screenLegendList.filter((item, index) => index < this.seriesLength)
-            this.$set(this, 'screenLegendListMore', screenLegendListMore)
-            this.$forceUpdate()
-          }
-          if (this.hasLegendOptions) {
-            this.computeLegendData(this.screenLegendListMore, dataArg, 'screen')
-          }
-          if (self.echartModalStore) {
-            self.echartModalStore.clear()
-            option.title = {}
-            self.showLegend = true
-            self.$refs['localLoadingScreen' + self.chartIndex].endLoading()
-          }
-          this.$nextTick(() => {
-            const legendDiv = document.getElementById('screenLegendArea' + self.chartIndex)
-            const divHeight = legendDiv.offsetHeight
-            const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
-            const sumHeight = Math.floor(screenHeight * 0.99 * 0.8)// margin-top:1vh; dailog:80%
-            self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`
-            self.echartModalStore.resize({ height: (sumHeight - divHeight - self.screenTitleHeight) })// 图表的高度
-            setTimeout(function () {
-              if (self.screenLegendListMore.length !== self.screenLegendList.length) {
-                self.seriesItemArrScreen = self.seriesItemScreen.filter((item, index) => index < self.seriesLength)
-              } else {
-                self.seriesItemArrScreen = self.seriesItemScreen
-              }
-              option.series = self.seriesItemArrScreen
-              if (dataArg && dataArg.length > 0) {
-                self.echartModalStore.setOption(option)// 显示全屏界面
-                self.noData = false
-              } else {
-                self.noData = true
-                option = chartConfig.getOptionNoData('noData')
-                self.echartModalStore.setOption(option)// 显示全屏界面
-              }
-              self.echartModalStore.on('finished', function () {
-                const legendDiv = document.getElementById('screenLegendArea' + self.chartIndex)
-                const divHeight = legendDiv.offsetHeight
-                const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
-                const sumHeight = Math.floor(screenHeight * 0.99 * 0.8)// margin-top:1vh; dailog:80%
-                self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`
-                // self.echartModalStore.resize({ height: (sumHeight - divHeight - self.screenTitleHeight) })// 图表的高度
-                self.echartModalStore.off('finished')
+        }
+        this.legendListMore = this.legendList.filter((item, index) => index < this.seriesLength)
+        if (this.hasLegendOptions) {
+          this.computeLegendData(this.legendListMore, dataArg, 'local')
+        }
+        this.$nextTick(() => {
+          setTimeout(function () {
+            const divHeight = self.$refs.legendArea.offsetHeight
+            if (!chartInfo.height) {
+              getChart(self.chartIndex).resize({ height: (400 - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
+            } else {
+              getChart(self.chartIndex).resize({ height: (chartInfo.height - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
+            }
+            if (dataArg && dataArg.length > 0) {
+              getChart(self.chartIndex).clear()
+              getChart(self.chartIndex).setOption(option)// 创建图表
+              self.noData = false
+            } else {
+              self.noData = true
+              option = chartConfig.getOptionNoData('noData')
+              getChart(self.chartIndex).clear()
+              getChart(self.chartIndex).setOption(option)// 创建图表
+            }
+
+            self.$refs['localLoading' + self.chartIndex].endLoading()
+            self.firstShow = true // 展示操作按键
+          }, 100)
+
+          window.addEventListener('resize', this.chartResize)
+          getChart(this.chartIndex).on('magictypechanged', function (params) {
+            self.isStackArea = !self.isStackArea
+            if (self.isStackArea) {
+              getChart(self.chartIndex).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: stackIconChooseBorderColor
+                      }
+                    }
+                  }
+                },
+                tooltip: {
+                  axisPointer: {
+                    snap: false,
+                    animation: false
+                  },
+                  formatter: function (params) {
+                    let str = '<div>'
+                    let sum = 0
+                    params.forEach((item, i) => {
+                      const tip = self.legendMagicType[item.seriesIndex]
+                      const color = self.bgColorList[item.seriesIndex]
+                      if (i === 0) {
+                        const value = item.data[0]
+                        const tData = new Date(value)
+                        str += '<div style="margin-bottom: 5px">'
+                        str += bus.timeFormate(tData)
+                        str += '</div>'
+                      }
+                      let val = parseFloat(Number(item.data[1]).toFixed(2))
+                      if (val === 0) {
+                        val = Number(item.data[1]).toExponential(2)
+                      }
+                      sum += self.numberWithEConvent(val)
+                      str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
+                      str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
+                      str += '<div style="padding-left: 10px;">'
+                      str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, 2)
+                      str += '</div>'
+                      str += '</div>'
+                    })
+                    if (self.data.type === 'stackArea' || self.isStackArea) {
+                      sum = parseFloat(Number(sum).toFixed(2))
+                      str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
+                      str += '<div style="line-height: 18px; font-size: 12px;padding-left:20px;">'
+                      str += self.$t('dashboard.panel.chartTotal')
+                      str += '</div>'
+                      str += '<div style="padding-left: 10px;">'
+                      str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(sum, null, 2)
+                      str += '</div>'
+                      str += '</div>'
+                    }
+
+                    str += '</div>'
+                    return str
+                  }
+                }
               })
-            }, 100)
-
-            this.echartModalStore.on('magictypechanged', function (params) {
-              self.isStackArea = !self.isStackArea
-              if (self.isStackArea) {
-                this.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: stackIconChooseBorderColor
-                        }
+            } else {
+              getChart(self.chartIndex).setOption({
+                toolbox: {
+                  feature: {
+                    dataZoom: {
+                      yAxisIndex: false,
+                      title: {
+                        zoom: self.$t('overall.toolBox.zoom'),
+                        back: self.$t('overall.toolBox.back')
                       }
-                    }
-
-                  },
-                  tooltip: {
-                    axisPointer: {
-                      snap: false,
-                      animation: false
                     },
-                    formatter: function (params) {
-                      let str = '<div>'
-                      let sum = 0
-                      let minusFlag = true
-                      // console.log(params ,legend);
-                      params.forEach((item, i) => {
-                        const tip = self.legendMagicType[item.seriesIndex]
-                        const color = self.bgColorList[item.seriesIndex]
-                        if (i === 0 && tip.alias.indexOf('Previous ') === -1) {
-                          const value = item.data[0]
-                          const tData = new Date(value)
-                          str += '<div style="margin-bottom: 5px">'
-                          str += bus.timeFormate(tData)
-                          str += '</div>'
-                        }
-                        if (tip.alias.indexOf('Previous ') !== -1 && minusFlag) {
-                          if (i !== 0) {
-                            str += '<div style="border:1px dashed #333;width:100%;margin-top: 5px"></div>'
-                          }
-                          const value = item.data[0] - self.minusTime
-                          const tData = new Date(value)
-                          str += '<div style="margin-bottom: 5px;margin-top: 5px">'
-                          str += bus.timeFormate(tData)
-                          str += '</div>'
-                          minusFlag = false
-                        }
-                        const previousItem = params.find((series) => ('Previous ' + item.seriesName) === series.seriesName)
-                        let val = parseFloat(Number(item.data[1]).toFixed(2))
-                        if (val === 0) {
-                          val = Number(item.data[1]).toExponential(2)
-                        }
-                        sum += self.numberWithEConvent(val)
-                        str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
-                        str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
-                        str += '<div style="padding-left: 10px;">'
-                        str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, 2)
-                        str += '</div>'
-                        if (previousItem) {
-                          str += '<div style="padding-left: 10px;">'
-                          let previousval = parseFloat(Number(previousItem.data[1]).toFixed(2))
-                          if (previousval === 0) {
-                            previousval = Number(item.data[1]).toExponential(2)
-                          }
-                          let minusVal = 0
-                          if (previousval <= val) {
-                            minusVal = val - previousval
-                            str += '+'
-                          } else {
-                            minusVal = previousval - val
-                            str += '-'
-                          }
-
-                          str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(minusVal, null, 2)
-                          str += '</div>'
-                        }
-                        str += '</div>'
-                      })
-                      if (self.data.type === 'stackArea' || self.isStackArea) {
-                        sum = parseFloat(Number(sum).toFixed(2))
-                        str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
-                        str += '<div style="line-height: 18px; font-size: 12px;padding-left:20px;">'
-                        str += self.$t('dashboard.panel.chartTotal')
-                        str += '</div>'
-                        str += '<div style="padding-left: 10px;">'
-                        str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(sum, null, 2)
-                        str += '</div>'
-                        str += '</div>'
-                      }
-
-                      str += '</div>'
-                      return str
-                    }
-                  }
-                })
-              } else {
-                this.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')
                       },
-                      magicType: {
-                        type: ['stack'],
-                        title: {
-                          stack: self.$t('overall.toolBox.stack')
-                        },
-                        iconStyle: {
-                          borderColor: '#7e7e7e'
-                        },
-                        emphasis: {
-                          borderColor: stackIconChooseBorderColor
-                        }
+                      iconStyle: {
+                        borderColor: '#7e7e7e'
+                      },
+                      emphasis: {
+                        borderColor: stackIconChooseBorderColor
                       }
                     }
                   }
-                })
-              }
-            })
+                }
+              })
+            }
+          })
+        })
+      } else if (chartSite === 'screen') { // 全屏显示
+        if (legend) {
+          this.screenLegendList = []
+          this.isGreyScreen = []
+          legend.forEach((item, i) => {
+            const legend = {
+              name: item.name,
+              alias: item.alias,
+              color: item.color,
+              showText: this.formatLegend(chartWidth, item.name)
+            }
+            this.screenLegendList.push(legend)
+            this.isGreyScreen.push(false)
           })
         }
-        maxValueCopies = null
-        setTimeout(() => { option = null }, 1000)
-      },
-      handleLineFeed (str, chartWidth) {
-        if (!str) {
-          return ''
+        if (this.screenLegendListMore.length !== this.screenLegendList.length) {
+          this.screenLegendListMore = []
+          const screenLegendListMore = this.screenLegendList.filter((item, index) => index < this.seriesLength)
+          this.$set(this, 'screenLegendListMore', screenLegendListMore)
+          this.$forceUpdate()
         }
-        // 计算宽度
-        const span = document.querySelector('.temp-dom')
-        span.textContent = name
-        const txtWidth = parseFloat(window.getComputedStyle(span).width) - this.tempDom.width
-        if (txtWidth < chartWidth) {
-          return str
-        } else {
-          const charNum = `${(chartWidth - 100) / (txtWidth / str.length)}`
-          return str.slice(0, charNum) + '...'
+        if (this.hasLegendOptions) {
+          this.computeLegendData(this.screenLegendListMore, dataArg, 'screen')
         }
-      },
-      setColor (colorNum) {
-        this.bgColorList = [
-          '#FF5200', '#3685FF', '#FF8D00', '#00DCA2',
-          '#954Eff', '#FFCB01', '#f65A96', '#00BFD0',
-          '#FF8BEA', '#4D7693', '#72577C', '#99D750',
-          '#DD8270', '#C475EE', '#7E83FB', '#7EB090',
-          '#FF9094', '#00CCF5', '#CF6684', '#4E55FF'
-        ]
-        for (let i = 0; i < colorNum - 19; i++) {
-          this.bgColorList.push(randomcolor())
+        if (self.echartModalStore) {
+          self.echartModalStore.clear()
+          option.title = {}
+          self.showLegend = true
+          self.$refs['localLoadingScreen' + self.chartIndex].endLoading()
         }
-      },
-      // 设置数据, filter区分
-      setData (chartItem, seriesItem, panelId, filter, legend, area, errorMsg) {
-        legend && this.setColor(legend.length)
-        legend && legend.forEach((t, i) => { t.color = this.bgColorList[i] })
-        this.filter.from = filter.from
-        if (errorMsg && errorMsg !== '') {
-          this.isError = true
-          this.errorContent = errorMsg
-        } else {
-          this.isError = false
-          this.errorContent = ''
-        }
-        if (area === 'showFullScreen') { // 全屏按时间查询
-          /*
+        this.$nextTick(() => {
+          const legendDiv = document.getElementById('screenLegendArea' + self.chartIndex)
+          const divHeight = legendDiv.offsetHeight
+          const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
+          const sumHeight = Math.floor(screenHeight * 0.99 * 0.8)// margin-top:1vh; dailog:80%
+          self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`
+          self.echartModalStore.resize({ height: (sumHeight - divHeight - self.screenTitleHeight) })// 图表的高度
+          setTimeout(function () {
+            if (self.screenLegendListMore.length !== self.screenLegendList.length) {
+              self.seriesItemArrScreen = self.seriesItemScreen.filter((item, index) => index < self.seriesLength)
+            } else {
+              self.seriesItemArrScreen = self.seriesItemScreen
+            }
+            option.series = self.seriesItemArrScreen
+            if (dataArg && dataArg.length > 0) {
+              self.echartModalStore.setOption(option)// 显示全屏界面
+              self.noData = false
+            } else {
+              self.noData = true
+              option = chartConfig.getOptionNoData('noData')
+              self.echartModalStore.setOption(option)// 显示全屏界面
+            }
+            self.echartModalStore.on('finished', function () {
+              const legendDiv = document.getElementById('screenLegendArea' + self.chartIndex)
+              const divHeight = legendDiv.offsetHeight
+              const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
+              const sumHeight = Math.floor(screenHeight * 0.99 * 0.8)// margin-top:1vh; dailog:80%
+              self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`
+              // self.echartModalStore.resize({ height: (sumHeight - divHeight - self.screenTitleHeight) })// 图表的高度
+              self.echartModalStore.off('finished')
+            })
+          }, 100)
+
+          this.echartModalStore.on('magictypechanged', function (params) {
+            self.isStackArea = !self.isStackArea
+            if (self.isStackArea) {
+              this.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: stackIconChooseBorderColor
+                      }
+                    }
+                  }
+
+                },
+                tooltip: {
+                  axisPointer: {
+                    snap: false,
+                    animation: false
+                  },
+                  formatter: function (params) {
+                    let str = '<div>'
+                    let sum = 0
+                    let minusFlag = true
+                    // console.log(params ,legend);
+                    params.forEach((item, i) => {
+                      const tip = self.legendMagicType[item.seriesIndex]
+                      const color = self.bgColorList[item.seriesIndex]
+                      if (i === 0 && tip.alias.indexOf('Previous ') === -1) {
+                        const value = item.data[0]
+                        const tData = new Date(value)
+                        str += '<div style="margin-bottom: 5px">'
+                        str += bus.timeFormate(tData)
+                        str += '</div>'
+                      }
+                      if (tip.alias.indexOf('Previous ') !== -1 && minusFlag) {
+                        if (i !== 0) {
+                          str += '<div style="border:1px dashed #333;width:100%;margin-top: 5px"></div>'
+                        }
+                        const value = item.data[0] - self.minusTime
+                        const tData = new Date(value)
+                        str += '<div style="margin-bottom: 5px;margin-top: 5px">'
+                        str += bus.timeFormate(tData)
+                        str += '</div>'
+                        minusFlag = false
+                      }
+                      const previousItem = params.find((series) => ('Previous ' + item.seriesName) === series.seriesName)
+                      let val = parseFloat(Number(item.data[1]).toFixed(2))
+                      if (val === 0) {
+                        val = Number(item.data[1]).toExponential(2)
+                      }
+                      sum += self.numberWithEConvent(val)
+                      str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
+                      str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
+                      str += '<div style="padding-left: 10px;">'
+                      str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, 2)
+                      str += '</div>'
+                      if (previousItem) {
+                        str += '<div style="padding-left: 10px;">'
+                        let previousval = parseFloat(Number(previousItem.data[1]).toFixed(2))
+                        if (previousval === 0) {
+                          previousval = Number(item.data[1]).toExponential(2)
+                        }
+                        let minusVal = 0
+                        if (previousval <= val) {
+                          minusVal = val - previousval
+                          str += '+'
+                        } else {
+                          minusVal = previousval - val
+                          str += '-'
+                        }
+
+                        str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(minusVal, null, 2)
+                        str += '</div>'
+                      }
+                      str += '</div>'
+                    })
+                    if (self.data.type === 'stackArea' || self.isStackArea) {
+                      sum = parseFloat(Number(sum).toFixed(2))
+                      str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
+                      str += '<div style="line-height: 18px; font-size: 12px;padding-left:20px;">'
+                      str += self.$t('dashboard.panel.chartTotal')
+                      str += '</div>'
+                      str += '<div style="padding-left: 10px;">'
+                      str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(sum, null, 2)
+                      str += '</div>'
+                      str += '</div>'
+                    }
+
+                    str += '</div>'
+                    return str
+                  }
+                }
+              })
+            } else {
+              this.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: stackIconChooseBorderColor
+                      }
+                    }
+                  }
+                }
+              })
+            }
+          })
+        })
+      }
+      maxValueCopies = null
+      setTimeout(() => { option = null }, 1000)
+    },
+    handleLineFeed (str, chartWidth) {
+      if (!str) {
+        return ''
+      }
+      // 计算宽度
+      const span = document.querySelector('.temp-dom')
+      span.textContent = name
+      const txtWidth = parseFloat(window.getComputedStyle(span).width) - this.tempDom.width
+      if (txtWidth < chartWidth) {
+        return str
+      } else {
+        const charNum = `${(chartWidth - 100) / (txtWidth / str.length)}`
+        return str.slice(0, charNum) + '...'
+      }
+    },
+    setColor (colorNum) {
+      this.bgColorList = [
+        '#FF5200', '#3685FF', '#FF8D00', '#00DCA2',
+        '#954Eff', '#FFCB01', '#f65A96', '#00BFD0',
+        '#FF8BEA', '#4D7693', '#72577C', '#99D750',
+        '#DD8270', '#C475EE', '#7E83FB', '#7EB090',
+        '#FF9094', '#00CCF5', '#CF6684', '#4E55FF'
+      ]
+      for (let i = 0; i < colorNum - 19; i++) {
+        this.bgColorList.push(randomcolor())
+      }
+    },
+    // 设置数据, filter区分
+    setData (chartItem, seriesItem, panelId, filter, legend, area, errorMsg) {
+      legend && this.setColor(legend.length)
+      legend && legend.forEach((t, i) => { t.color = this.bgColorList[i] })
+      this.filter.from = filter.from
+      if (errorMsg && errorMsg !== '') {
+        this.isError = true
+        this.errorContent = errorMsg
+      } else {
+        this.isError = false
+        this.errorContent = ''
+      }
+      if (area === 'showFullScreen') { // 全屏按时间查询
+        /*
             this.legend = legend;
             this.data = chartItem;
             this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
@@ -1315,196 +1315,209 @@
             //this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
             this.initChart(chartItem, seriesItem, this.$refs.lineChartArea, 'screen',legend);
             */
-        } else {
-          this.legend = legend
-          this.$refs['localLoading' + this.chartIndex].startLoading()
-          this.divFirstShow = true
-          this.firstShow = true // 展示操作按键
-          this.panelIdInner = panelId
-          this.data = chartItem
-          this.seriesItem = seriesItem
-          this.seriesItemScreen = seriesItem
-
-          this.hasLegendOptions = this.findLegendOptions()
-          if (this.hasLegendOptions) {
-            const sortedOptionKeys = ['min', 'max', 'avg', 'last', 'total']
-            this.legendOptions = sortedOptionKeys.map(item => { return { option: item, sort: '', value: chartItem.param.legendValue[item] } })
-            this.screenLegendOptions = sortedOptionKeys.map(item => { return { option: item, sort: '', value: chartItem.param.legendValue[item] } })
-          }
-
-          if (filter) { // 保存数据,用于同步时间
-            this.stableFilter = filter
-            this.searchTime[0] = filter.start_time
-            this.searchTime[1] = filter.end_time
-            this.oldSearchTime[0] = this.searchTime[0]
-            this.oldSearchTime[1] = this.searchTime[1]
-          }
-          // this.seriesItem=seriesItem;
-          let seriesItemArr = seriesItem
-          if (seriesItem.length > this.seriesLength) {
-            seriesItemArr = seriesItem.filter((item, index) => index < this.seriesLength) // 只查看前seriesLength条
-            this.seriesItemArr = seriesItemArr
-            this.seriesItemArrScreen = seriesItemArr
-          } else {
-            this.seriesItemArr = seriesItem
-          }
-
-          this.initChart(chartItem, seriesItemArr, this.$refs.lineChartArea, 'local', legend)
-        }
-      },
-      resize (chartItem) {
-        const chartBox = document.getElementById('lineChartDiv' + this.chartIndex)
-        chartBox.style.height = `${this.$chartResizeTool.calculateHeight(chartItem.height)}px`
-      },
-      clearChart () {
-        if (getChart(this.chartIndex)) {
-          getChart(this.chartIndex).clear()
-        }
-        if (this.echartModalStore) {
-          this.echartModalStore.clear()
-        }
-        this.data = {}
-      },
-      clickos () {
-        this.dropdownMenuShow = false
-      },
-      // 删除该图表
-      removeChart () {
-        this.dropdownMenuShow = false
-        this.$emit('on-remove-chart-block', this.data.id)
-      },
-      // 编辑图表
-      editChart () {
-        this.dropdownMenuShow = false
-        this.$emit('on-edit-chart-block', this.data.id)
-      },
-      // 重新请求数据 刷新操作
-      refreshChart () {
-        this.dropdownMenuShow = false
-        const id = this.data.id
-        this.clearChart()
+      } else {
+        this.legend = legend
         this.$refs['localLoading' + this.chartIndex].startLoading()
-        this.firstShow = false
-        this.$emit('on-refresh-data', id)
-      },
-      screenRefreshChart () {
-        this.$refs.calendarPanel.timeChange(this.$refs.calendarPanel.nowTimeType, 'chart')
-      },
-      initDialog () {
-        // 此时初始化，才能获得screenShowArea对象，否则此对象为undefined，无法初始化图表
-        this.initChart(this.data, this.seriesItem, this.$refs.screenShowArea, 'screen', this.legend)
-        // 日期组件同步时间
-        /*
+        this.divFirstShow = true
+        this.firstShow = true // 展示操作按键
+        this.panelIdInner = panelId
+        this.data = chartItem
+        this.seriesItem = seriesItem
+        this.seriesItemScreen = seriesItem
+
+        this.hasLegendOptions = this.findLegendOptions()
+        if (this.hasLegendOptions) {
+          const sortedOptionKeys = ['min', 'max', 'avg', 'last', 'total']
+          this.legendOptions = sortedOptionKeys.map(item => { return { option: item, sort: '', value: chartItem.param.legendValue[item] } })
+          this.screenLegendOptions = sortedOptionKeys.map(item => { return { option: item, sort: '', value: chartItem.param.legendValue[item] } })
+        }
+
+        if (filter) { // 保存数据,用于同步时间
+          this.stableFilter = filter
+          this.searchTime[0] = filter.start_time
+          this.searchTime[1] = filter.end_time
+          this.oldSearchTime[0] = this.searchTime[0]
+          this.oldSearchTime[1] = this.searchTime[1]
+        }
+        // this.seriesItem=seriesItem;
+        let seriesItemArr = seriesItem
+        if (seriesItem.length > this.seriesLength) {
+          seriesItemArr = seriesItem.filter((item, index) => index < this.seriesLength) // 只查看前seriesLength条
+          this.seriesItemArr = seriesItemArr
+          this.seriesItemArrScreen = seriesItemArr
+        } else {
+          this.seriesItemArr = seriesItem
+        }
+
+        this.initChart(chartItem, seriesItemArr, this.$refs.lineChartArea, 'local', legend)
+      }
+    },
+    resize (chartItem) {
+      const chartBox = document.getElementById('lineChartDiv' + this.chartIndex)
+      chartBox.style.height = `${this.$chartResizeTool.calculateHeight(chartItem.height)}px`
+    },
+    clearChart () {
+      if (getChart(this.chartIndex)) {
+        getChart(this.chartIndex).clear()
+      }
+      if (this.echartModalStore) {
+        this.echartModalStore.clear()
+      }
+      this.data = {}
+    },
+    clickos () {
+      this.dropdownMenuShow = false
+    },
+    // 删除该图表
+    removeChart () {
+      this.dropdownMenuShow = false
+      this.$emit('on-remove-chart-block', this.data.id)
+    },
+    // 编辑图表
+    editChart () {
+      this.dropdownMenuShow = false
+      this.$emit('on-edit-chart-block', this.data.id)
+    },
+    // 重新请求数据 刷新操作
+    refreshChart () {
+      this.dropdownMenuShow = false
+      const id = this.data.id
+      this.clearChart()
+      this.$refs['localLoading' + this.chartIndex].startLoading()
+      this.firstShow = false
+      this.$emit('on-refresh-data', id)
+    },
+    screenRefreshChart () {
+      this.$refs.calendarPanel.timeChange(this.$refs.calendarPanel.nowTimeType, 'chart')
+    },
+    initDialog () {
+      // 此时初始化，才能获得screenShowArea对象，否则此对象为undefined，无法初始化图表
+      this.initChart(this.data, this.seriesItem, this.$refs.screenShowArea, 'screen', this.legend)
+      // 日期组件同步时间
+      /*
           this.$refs.calendar.initTime({
             start: this.stableFilter.start_time,
             end: this.stableFilter.end_time,
           });
           */
-      },
-      closeDialog () {
-        this.$refs.pickTime.$refs.multipleTime.searchTime = []
-        this.$refs.pickTime.$refs.multipleTime.showTime = {
-          id: 12,
-          text: this.$t('dashboard.panel.noDate')
-        }
-        this.$refs.pickTime.$refs.multipleTime.showDropdown = false
-      },
-      changeDate (st) {
-        this.oldSearchTime = st
-        this.searchTime = st
-        this.filter.start_time = st[0]
-        this.filter.end_time = st[1]
-      },
-      // 全屏查看
-      showAllScreen () {
-        this.dropdownMenuShow = false
-        // 初始化同步时间
-        this.filter.start_time = this.stableFilter.start_time
-        this.filter.end_time = this.stableFilter.end_time
-        // this.searchTime = this.oldSearchTime;
-        this.$set(this.searchTime, 0, this.oldSearchTime[0])
-        this.$set(this.searchTime, 1, this.oldSearchTime[1])
-        this.screenModal = true
-        this.isGreyScreen = []
-        this.$refs.pickTime.$refs.multipleTime.searchTime = []
-        this.$refs.pickTime.$refs.multipleTime.showTime = {
-          id: 12,
-          text: this.$t('dashboard.panel.noDate')
-        }
-        this.$refs.pickTime.$refs.multipleTime.showDropdown = false
-        this.$refs.pickTime.$refs.timePicker.setCustomTime(this.stableFilter)
-        this.seriesItemScreen = this.seriesItem
-        // this.seriesItemScreen = this.seriesItem;
-        /*
+    },
+    closeDialog () {
+      this.$refs.pickTime.$refs.multipleTime.searchTime = []
+      this.$refs.pickTime.$refs.multipleTime.showTime = {
+        id: 12,
+        text: this.$t('dashboard.panel.noDate')
+      }
+      this.$refs.pickTime.$refs.multipleTime.showDropdown = false
+    },
+    changeDate (st) {
+      this.oldSearchTime = st
+      this.searchTime = st
+      this.filter.start_time = st[0]
+      this.filter.end_time = st[1]
+    },
+    // 全屏查看
+    showAllScreen () {
+      this.dropdownMenuShow = false
+      // 初始化同步时间
+      this.filter.start_time = this.stableFilter.start_time
+      this.filter.end_time = this.stableFilter.end_time
+      // this.searchTime = this.oldSearchTime;
+      this.$set(this.searchTime, 0, this.oldSearchTime[0])
+      this.$set(this.searchTime, 1, this.oldSearchTime[1])
+      this.screenModal = true
+      this.isGreyScreen = []
+      this.$refs.pickTime.$refs.multipleTime.searchTime = []
+      this.$refs.pickTime.$refs.multipleTime.showTime = {
+        id: 12,
+        text: this.$t('dashboard.panel.noDate')
+      }
+      this.$refs.pickTime.$refs.multipleTime.showDropdown = false
+      this.$refs.pickTime.$refs.timePicker.setCustomTime(this.stableFilter)
+      this.seriesItemScreen = this.seriesItem
+      // this.seriesItemScreen = this.seriesItem;
+      /*
                   this.searchTime = [];
                   this.searchTime[0] = this.oldSearchTime[0];//将列表的查询时间复制给全屏的查询时间
                   this.searchTime[1] = this.oldSearchTime[1];
                   this.seriesItemScreen = this.seriesItem;
                   this.screenModal = true;
                   */
-        // this.dateChange();
-      },
-      duplicate () {
-        this.dropdownMenuShow = false
-        this.$confirm(this.$t('tip.confirmDuplicate'), {
-          confirmButtonText: this.$t('tip.yes'),
-          cancelButtonText: this.$t('tip.no'),
-          type: 'info'
-        }).then(() => {
-          const param = { id: this.data.id }
-          this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
-            if (response.code === 200) {
-              this.$message({
-                duration: 2000,
-                type: 'success',
-                message: this.$t('tip.duplicateSuccess')
-              })
-              this.$emit('on-duplicate-chart-block', this.data.id, response.data)
+      // this.dateChange();
+    },
+    duplicate () {
+      this.dropdownMenuShow = false
+      this.$confirm(this.$t('tip.confirmDuplicate'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'info'
+      }).then(() => {
+        const param = { id: this.data.id }
+        this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
+          if (response.code === 200) {
+            this.$message({
+              duration: 2000,
+              type: 'success',
+              message: this.$t('tip.duplicateSuccess')
+            })
+            this.$emit('on-duplicate-chart-block', this.data.id, response.data)
+          } else {
+            if (response.msg) {
+              this.$message.error(response.msg)
+            } else if (response.error) {
+              this.$message.error(response.error)
             } else {
-              if (response.msg) {
-                this.$message.error(response.msg)
-              } else if (response.error) {
-                this.$message.error(response.error)
-              } else {
-                this.$message.error(response)
-              }
+              this.$message.error(response)
             }
-          })
+          }
         })
-      },
-      dateChange (time) {
-        this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
-        this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
-        // this.echartModalStore.clear()
-        this.showLegend = false
-        this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
-        if (this.showSetting) {
-          this.getQueryChart('list')
-        } else {
-          this.getQueryChart('dashboard')
-        }
-      },
-      // 查询数据,修改日期查询全屏数据
-      getQueryChart (type) {
-        /*
+      })
+    },
+    dateChange (time) {
+      this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
+      this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+      // this.echartModalStore.clear()
+      this.showLegend = false
+      this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
+      if (this.showSetting) {
+        this.getQueryChart('list')
+      } else {
+        this.getQueryChart('dashboard')
+      }
+    },
+    // 查询数据,修改日期查询全屏数据
+    getQueryChart (type) {
+      /*
           if (this.echartModalStore) {
             this.echartModalStore.showLoading();
           }
           */
-        let axiosArr = []
-        this.$nextTick(() => {
-          let startTime = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
-          let endTime = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
-          if (!startTime || !endTime) { // 如果时间为空，则默认取最近1小时
-            const now = new Date()
-            startTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss')
-            endTime = bus.timeFormate(now.setHours(now.getHours() - 1), 'yyyy-MM-dd hh:mm:ss')
-            this.searchTime[0] = startTime
-            this.searchTime[1] = endTime
-          }
-          const step = bus.getStep(startTime, endTime)
-          if (type === 'list') { // 普通模式,主控台使用
-            axiosArr = this.data.elements.map((ele) => {
+      let axiosArr = []
+      this.$nextTick(() => {
+        let startTime = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
+        let endTime = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+        if (!startTime || !endTime) { // 如果时间为空，则默认取最近1小时
+          const now = new Date()
+          startTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss')
+          endTime = bus.timeFormate(now.setHours(now.getHours() - 1), 'yyyy-MM-dd hh:mm:ss')
+          this.searchTime[0] = startTime
+          this.searchTime[1] = endTime
+        }
+        const step = bus.getStep(startTime, endTime)
+        if (type === 'list') { // 普通模式,主控台使用
+          axiosArr = this.data.elements.map((ele) => {
+            const filterItem = ele
+            let query = encodeURIComponent(filterItem.expression)
+            if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给connected
+              !this.chartInfo.param && (this.chartInfo.param = {})
+              this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'connected'
+              query += '&nullType=' + this.chartInfo.param.nullType
+            }
+            return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
+          })
+          if (this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length) { // 判断是否需要添加比较
+            startTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
+            endTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+            this.data.elements.forEach((ele) => {
               const filterItem = ele
               let query = encodeURIComponent(filterItem.expression)
               if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给connected
@@ -1512,153 +1525,140 @@
                 this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'connected'
                 query += '&nullType=' + this.chartInfo.param.nullType
               }
-              return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
+              axiosArr.push(this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step))
             })
-            if (this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length) { // 判断是否需要添加比较
-              startTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
-              endTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
-              this.data.elements.forEach((ele) => {
-                const filterItem = ele
-                let query = encodeURIComponent(filterItem.expression)
-                if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给connected
-                  !this.chartInfo.param && (this.chartInfo.param = {})
-                  this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'connected'
-                  query += '&nullType=' + this.chartInfo.param.nullType
-                }
-                axiosArr.push(this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step))
-              })
-            }
-          } else if (type === 'dashboard') { // 概览模式,指标概览中使用
-            // 概览模式,需要区分单独一个和多个
-            if (this.stableFilter.chartCount === 'multiple') {
-              let query = encodeURIComponent(this.data.title)
-              if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给connected
-                this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'connected'
-                query += '&nullType=' + this.chartInfo.param.nullType
-              }
-              axiosArr = [this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)]
-            } else {
-              let query = encodeURIComponent(this.data.elements[0].expression)
-              if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给connected
-                this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'connected'
-                query += '&nullType=' + this.chartInfo.param.nullType
-              }
-              axiosArr = [this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)]
-            }
           }
-          // 一个图表
-          axios.all(axiosArr).then((res) => {
-            if (res.length > 0) {
-              const series = []
-              const legend = []
-              /* const sumData = {
+        } else if (type === 'dashboard') { // 概览模式,指标概览中使用
+          // 概览模式,需要区分单独一个和多个
+          if (this.stableFilter.chartCount === 'multiple') {
+            let query = encodeURIComponent(this.data.title)
+            if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给connected
+              this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'connected'
+              query += '&nullType=' + this.chartInfo.param.nullType
+            }
+            axiosArr = [this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)]
+          } else {
+            let query = encodeURIComponent(this.data.elements[0].expression)
+            if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给connected
+              this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'connected'
+              query += '&nullType=' + this.chartInfo.param.nullType
+            }
+            axiosArr = [this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)]
+          }
+        }
+        // 一个图表
+        axios.all(axiosArr).then((res) => {
+          if (res.length > 0) {
+            const series = []
+            const legend = []
+            /* const sumData = {
                 name: 'sum',
                 data: [],
                 visible: true,
                 threshold: null
               } */
-              if (!this.data.type) {
-                this.data.type = 'line'
-              }
-              res.forEach((response, pos) => {
-                if (response.status === 'success') {
-                  this.isError = false
-                  this.errorContent = ''
-                  if (response.data.result) {
-                    // 循环处理每个elements下获取的数据列
-                    response.data.result.forEach((queryItem, innerPos) => {
-                      const seriesItem = {
-                        theData: {
-                          name: '',
-                          symbol: 'emptyCircle', // 去掉点
-                          symbolSize: [2, 2],
-                          smooth: 0.2, // 曲线变平滑
-                          showSymbol: false,
-                          data: [],
-                          type: this.data.type,
-                          lineStyle: {
-                            width: 1,
-                            opacity: 0.9
+            if (!this.data.type) {
+              this.data.type = 'line'
+            }
+            res.forEach((response, pos) => {
+              if (response.status === 'success') {
+                this.isError = false
+                this.errorContent = ''
+                if (response.data.result) {
+                  // 循环处理每个elements下获取的数据列
+                  response.data.result.forEach((queryItem, innerPos) => {
+                    const seriesItem = {
+                      theData: {
+                        name: '',
+                        symbol: 'emptyCircle', // 去掉点
+                        symbolSize: [2, 2],
+                        smooth: 0.2, // 曲线变平滑
+                        showSymbol: false,
+                        data: [],
+                        type: this.data.type,
+                        lineStyle: {
+                          width: 1,
+                          opacity: 0.9
+                        }
+                        // visible: true,
+                        // threshold: null,
+                      },
+                      metric_name: ''
+                    }
+                    if (this.data.type === 'stackArea') {
+                      seriesItem.theData.type = 'line'
+                      seriesItem.theData.stack = this.data.title
+                      seriesItem.theData.areaStyle = { opacity: 0.3 }
+                    }
+
+                    if ((this.data.type === 'line' || this.data.type === 'stackArea' || this.data.type === 'bar') && this.data.param && this.data.param.threshold) {
+                      seriesItem.theData.markLine = {
+                        silent: true,
+                        symbol: ['circle', 'circle'],
+                        label: {
+                          distance: this.computeDistance(chartDataFormat.getUnit(this.data.unit ? this.data.unit : 2).compute(this.data.param.threshold)),
+                          formatter: function (params) {
+                            return chartDataFormat.getUnit(this.data.unit ? this.data.unit : 2).compute(params.value)
                           }
-                          // visible: true,
-                          // threshold: null,
                         },
-                        metric_name: ''
-                      }
-                      if (this.data.type === 'stackArea') {
-                        seriesItem.theData.type = 'line'
-                        seriesItem.theData.stack = this.data.title
-                        seriesItem.theData.areaStyle = { opacity: 0.3 }
+                        lineStyle: {
+                          color: '#d64f40',
+                          width: 2,
+                          type: 'dotted'
+                        },
+                        data: [{
+                          yAxis: Number(this.data.param.threshold)
+                        }]
                       }
+                    }
 
-                      if ((this.data.type === 'line' || this.data.type === 'stackArea' || this.data.type === 'bar') && this.data.param && this.data.param.threshold) {
-                        seriesItem.theData.markLine = {
-                          silent: true,
-                          symbol: ['circle', 'circle'],
-                          label: {
-                            distance: this.computeDistance(chartDataFormat.getUnit(this.data.unit ? this.data.unit : 2).compute(this.data.param.threshold)),
-                            formatter: function (params) {
-                              return chartDataFormat.getUnit(this.data.unit ? this.data.unit : 2).compute(params.value)
-                            }
-                          },
-                          lineStyle: {
-                            color: '#d64f40',
-                            width: 2,
-                            type: 'dotted'
-                          },
-                          data: [{
-                            yAxis: Number(this.data.param.threshold)
-                          }]
+                    // 图表中每条线的名字,后半部分
+                    // let host = `${queryItem.metric.__name__}{`;//up,
+                    let host = ''// up,
+                    if (queryItem.metric.__name__) {
+                      host = `${queryItem.metric.__name__}{`// up,
+                    }
+                    const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
+                    // 设置时间-数据格式对
+                    const dpsArr = Object.entries(queryItem.values)// [ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
+                    // 判断是否有数据,&& tagsArr.length > 0
+                    if (dpsArr.length > 0) {
+                      tagsArr.forEach((tag, i) => {
+                        if (tag !== '__name__') {
+                          host += `${tag}="${queryItem.metric[tag]}",`
                         }
-                      }
-
-                      // 图表中每条线的名字,后半部分
-                      // let host = `${queryItem.metric.__name__}{`;//up,
-                      let host = ''// up,
+                      })
+                      const elements = this.data.elements[pos] || this.data.elements[pos - this.data.elements.length] // 处理添加对比时的legend
+                      if (host.endsWith(',')) { host = host.substr(0, host.length - 1) }
                       if (queryItem.metric.__name__) {
-                        host = `${queryItem.metric.__name__}{`// up,
+                        host += '}'
                       }
-                      const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
-                      // 设置时间-数据格式对
-                      const dpsArr = Object.entries(queryItem.values)// [ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
-                      // 判断是否有数据,&& tagsArr.length > 0
-                      if (dpsArr.length > 0) {
-                        tagsArr.forEach((tag, i) => {
-                          if (tag !== '__name__') {
-                            host += `${tag}="${queryItem.metric[tag]}",`
-                          }
-                        })
-                        const elements = this.data.elements[pos] || this.data.elements[pos - this.data.elements.length] // 处理添加对比时的legend
-                        if (host.endsWith(',')) { host = host.substr(0, host.length - 1) }
-                        if (queryItem.metric.__name__) {
-                          host += '}'
-                        }
-                        if (!host || host === '') {
-                          host = elements.expression
-                        }
-                        let alias = this.dealLegendAlias(host, elements.legend)
-                        if (!alias || alias === '') {
-                          alias = host
-                        }
-                        if (pos >= this.data.elements.length) {
-                          legend.push({ name: 'Previous ' + host + '-' + elements.id + '-' + innerPos, alias: 'Previous ' + alias })
-                          seriesItem.theData.name = 'Previous ' + host + '-' + elements.id + '-' + innerPos
-                          seriesItem.metric_name = seriesItem.theData.name
-                        } else {
-                          legend.push({ name: host + '-' + elements.id + '-' + innerPos, alias: alias })
-                          seriesItem.theData.name = host + '-' + elements.id + '-' + innerPos
-                          seriesItem.metric_name = seriesItem.theData.name
-                        }
-                        // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
-                        // 将秒改为毫秒
-                        // alert('table=='+JSON.stringify(queryItem))
-                        seriesItem.theData.data = queryItem.values.map((dpsItem, dpsIndex) => {
-                          return [dpsItem[0] * 1000, dpsItem[1]]
-                        })
-                        series.push(seriesItem.theData)
-                      } else if (this.data.elements && this.data.elements[innerPos]) {
-                        // 无数据提示
-                        /*
+                      if (!host || host === '') {
+                        host = elements.expression
+                      }
+                      let alias = this.dealLegendAlias(host, elements.legend)
+                      if (!alias || alias === '') {
+                        alias = host
+                      }
+                      if (pos >= this.data.elements.length) {
+                        legend.push({ name: 'Previous ' + host + '-' + elements.id + '-' + innerPos, alias: 'Previous ' + alias })
+                        seriesItem.theData.name = 'Previous ' + host + '-' + elements.id + '-' + innerPos
+                        seriesItem.metric_name = seriesItem.theData.name
+                      } else {
+                        legend.push({ name: host + '-' + elements.id + '-' + innerPos, alias: alias })
+                        seriesItem.theData.name = host + '-' + elements.id + '-' + innerPos
+                        seriesItem.metric_name = seriesItem.theData.name
+                      }
+                      // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
+                      // 将秒改为毫秒
+                      // alert('table=='+JSON.stringify(queryItem))
+                      seriesItem.theData.data = queryItem.values.map((dpsItem, dpsIndex) => {
+                        return [dpsItem[0] * 1000, dpsItem[1]]
+                      })
+                      series.push(seriesItem.theData)
+                    } else if (this.data.elements && this.data.elements[innerPos]) {
+                      // 无数据提示
+                      /*
                           const currentInfo = chartItem.elements[innerPos];
                           const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
                           this.$message.warning({
@@ -1667,310 +1667,310 @@
                             closable: true,
                           });
                           */
-                      }
-                    })
-                  }
-                } else {
-                  this.isError = true
-                  if (response.msg) {
-                    this.errorContent = response.msg
-                  } else if (response.error) {
-                    this.errorContent = response.error
-                  } else {
-                    this.errorContent = response
-                  }
+                    }
+                  })
+                }
+              } else {
+                this.isError = true
+                if (response.msg) {
+                  this.errorContent = response.msg
+                } else if (response.error) {
+                  this.errorContent = response.error
+                } else {
+                  this.errorContent = response
                 }
-              })
-              this.setColor(legend.length)
-              legend.forEach((item, index) => {
-                item.color = this.bgColorList[index]
-              })
-              if (this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length && res.length > this.data.elements.length) {
-                const minusTime = (new Date(this.searchTime[0]).getTime() - new Date(this.$refs.pickTime.$refs.multipleTime.searchTime[0]).getTime())
-                let cutPoint = 0
-                res.forEach((item, index) => {
-                  if (index < res.length / 2) {
-                    cutPoint += res[index].data.result.length
-                  }
-                })
-                series.forEach((item, index) => {
-                  if (index >= cutPoint) {
-                    series[index].data.forEach((item1, index1) => {
-                      item1[0] = item1[0] + minusTime
-                    })
-                  }
-                })
-              }
-              this.seriesItemScreen = series
-              // this.seriesItemArrScreen=series.filter((item,index)=>index<this.seriesLength);
-              this.initChart(this.data, series, this.$refs.screenShowArea, 'screen', legend)
-            }
-          }).catch((error) => {
-            if (error) {
-              this.$message.error(error.toString())
-            }
-          })
-        })
-      },
-      computeDistance: function (str) {
-        const span = document.querySelector('.temp-dom')
-        span.textContent = str
-        const txtWidth = parseFloat(window.getComputedStyle(span).width)
-        return Number('-' + (txtWidth + 5))
-      },
-      showLoad (chartItem) {
-        // 设置高度
-        this.$nextTick(() => {
-          const chartBox = document.getElementById('lineChartDiv' + this.chartIndex)
-          let height = Math.floor(chartItem.height / this.$chartResizeTool.stepHeight) * this.$chartResizeTool.stepHeight// 图表高度四舍五入
-          if (height < this.$chartResizeTool.minHeight) {
-            height = this.$chartResizeTool.minHeight
-          }
-          chartBox.style.height = `${height - this.$chartResizeTool.chartBlankHeight}px`
-        })
-        this.clearData()
-        this.firstShow = false
-        this.$refs['localLoading' + this.chartIndex].startLoading()
-        this.divFirstShow = true
-      },
-      dealLegendAlias: function (legend, expression) {
-        if (/\{\{.+\}\}/.test(expression)) {
-          const labelValue = expression.replace(/(\{\{.+?\}\})/g, function (i) {
-            const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
-            const reg = new RegExp(label + '=".+?"')
-            let value = null
-            if (reg.test(legend)) {
-              const find = legend.match(reg)[0]
-              value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1)
-            }
-            return value || label
-          })
-          return labelValue
-        } else {
-          return expression
-        }
-      },
-      // 获取格式
-      getNumStr (num) {
-        if (num >= 1000) {
-          const kbNum = num / 1000
-          if (kbNum >= 1000) {
-            const mbNum = kbNum / 1000
-            if (mbNum > 1000) {
-              const gbNum = mbNum / 1000
-              return `${gbNum.toFixed(2)}B`
-            }
-            return `${mbNum.toFixed(2)}M`
-          }
-          return `${kbNum.toFixed(2)}K`
-        }
-        return num.toFixed(2)
-      },
-      handleClose () {},
-      // 加载更多
-      loadMore () {
-        this.seriesItemArr = this.seriesItem
-        this.legendListMore = this.legendList
-        const chartInfo = this.data
-        const dataArg = this.seriesItem
-        const maxValueCopies = this.getMaxValue(dataArg, chartInfo)
-        const maxValue = maxValueCopies.maxValue
-        // const minValue = maxValueCopies.minValue
-        // const dot = maxValueCopies.dot
-        const copies = maxValueCopies.copies
-        const unit = maxValueCopies.unit
-        // const oldDot = maxValueCopies.oldDot
-        getChart(this.chartIndex).setOption({
-          series: this.seriesItem,
-          yAxis: {
-            minInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'min'),
-            maxInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(dataArg.length / 5)
-          }
-        })
-        if (this.hasLegendOptions) {
-          this.computeLegendData(this.legendListMore, this.seriesItemArr, 'local')
-        }
-        this.$nextTick(() => {
-          const divHeight = this.$refs.legendArea.offsetHeight
-          if (!this.chartInfo.height) {
-            getChart(this.chartIndex).resize({ height: (400 - divHeight - this.$chartResizeTool.titleHeight - this.$chartResizeTool.chartBlankHeight) })
-          } else {
-            getChart(this.chartIndex).resize({ height: (this.chartInfo.height - divHeight - this.$chartResizeTool.titleHeight - this.$chartResizeTool.chartBlankHeight) })
-          }
-        })
-      },
-      // 加载更多
-      loadScreenMore () {
-        this.seriesItemArrScreen = this.seriesItemScreen
-        this.screenLegendListMore = this.screenLegendList
-        const chartInfo = this.data
-        const dataArg = this.seriesItem
-
-        const maxValueCopies = this.getMaxValue(dataArg, chartInfo)
-        const maxValue = maxValueCopies.maxValue
-        // const minValue = maxValueCopies.minValue
-        // const dot = maxValueCopies.dot
-        const copies = maxValueCopies.copies
-        const unit = maxValueCopies.unit
-        // const oldDot = maxValueCopies.oldDot
-        this.echartModalStore.setOption({
-          series: this.seriesItemScreen,
-          yAxis: {
-            minInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'min'),
-            maxInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(dataArg.length / 5)
-          }
-        })
-        if (this.hasLegendOptions) {
-          this.computeLegendData(this.screenLegendListMore, this.seriesItemArrScreen, 'screen')
-        }
-        this.$nextTick(() => {
-          const legendDiv = document.getElementById('screenLegendArea' + this.chartIndex)
-          const divHeight = legendDiv.offsetHeight
-          const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
-          const sumHeight = Math.floor(screenHeight * 0.99 * 0.8)// margin-top:1vh; dailog:80%
-          this.$refs.screenShowArea.style.height = `${sumHeight - divHeight - this.screenTitleHeight}px`
-          this.echartModalStore.resize({ height: (sumHeight - divHeight - this.screenTitleHeight) })// 图表的高度
-        })
-      },
-      findLegendOptions: function () {
-        if (!this.data.param || !this.data.param.legendValue || Object.keys(this.data.param.legendValue) < 1) return false
-        const legendOptions = this.data.param.legendValue
-        const onVal = Object.keys(legendOptions).find(item => { return legendOptions[item] == 'on' })
-
-        return onVal
-      },
-      computeLegendData: function (legend, dataArr, where) {
-        const options = where == 'local' ? this.legendOptions : this.screenLegendOptions
-        const keys = options.filter(item => { return item.value == 'on' }).map(item => { return item.option })
-        keys.forEach(key => {
-          return new Promise(resolve => {
-            legend.forEach(item => {
-              const data = dataArr.find(t => t.name == item.name)
-              if (data && data.data) {
-                const value = getMetricTypeValue(data.data, key)
-                item[key] = parseFloat(value)
               }
             })
-            resolve()
-          })
-        })
-      },
-      formatLegendData: function (data) {
-        return chartDataFormat.getUnit(this.chartInfo.unit).compute(data, null, 2)
-      },
-      legendValueSort: function (option, legend, options) {
-        options.forEach(item => {
-          if (item.option != option.option) {
-            item.sort = ''
+            this.setColor(legend.length)
+            legend.forEach((item, index) => {
+              item.color = this.bgColorList[index]
+            })
+            if (this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length && res.length > this.data.elements.length) {
+              const minusTime = (new Date(this.searchTime[0]).getTime() - new Date(this.$refs.pickTime.$refs.multipleTime.searchTime[0]).getTime())
+              let cutPoint = 0
+              res.forEach((item, index) => {
+                if (index < res.length / 2) {
+                  cutPoint += res[index].data.result.length
+                }
+              })
+              series.forEach((item, index) => {
+                if (index >= cutPoint) {
+                  series[index].data.forEach((item1, index1) => {
+                    item1[0] = item1[0] + minusTime
+                  })
+                }
+              })
+            }
+            this.seriesItemScreen = series
+            // this.seriesItemArrScreen=series.filter((item,index)=>index<this.seriesLength);
+            this.initChart(this.data, series, this.$refs.screenShowArea, 'screen', legend)
+          }
+        }).catch((error) => {
+          if (error) {
+            this.$message.error(error.toString())
           }
         })
-        if (!option.sort || option.sort == 'asc') {
-          legend.sort((x, y) => x[option.option] - y[option.option])
-          option.sort = 'desc'
-        } else {
-          legend.sort((x, y) => y[option.option] - x[option.option])
-          option.sort = 'asc'
+      })
+    },
+    computeDistance: function (str) {
+      const span = document.querySelector('.temp-dom')
+      span.textContent = str
+      const txtWidth = parseFloat(window.getComputedStyle(span).width)
+      return Number('-' + (txtWidth + 5))
+    },
+    showLoad (chartItem) {
+      // 设置高度
+      this.$nextTick(() => {
+        const chartBox = document.getElementById('lineChartDiv' + this.chartIndex)
+        let height = Math.floor(chartItem.height / this.$chartResizeTool.stepHeight) * this.$chartResizeTool.stepHeight// 图表高度四舍五入
+        if (height < this.$chartResizeTool.minHeight) {
+          height = this.$chartResizeTool.minHeight
         }
-      },
-      getMaxValue (dataArg, chartInfo) {
-        let maxValue = 0
-        let minValue = 0
-        if (chartInfo.unit && dataArg.length > 0) {
-          maxValue = 0
-          minValue = 0
-          for (let j = 0; j < dataArg.length; j++) {
-            for (let i = 0; i < dataArg[j].data.length; i++) {
-              if (!isNaN(dataArg[j].data[i][1])) {
-                maxValue = (maxValue < Number(dataArg[j].data[i][1]) ? Number(dataArg[j].data[i][1]) : maxValue)
-                minValue = (minValue > Number(dataArg[j].data[i][1]) ? Number(dataArg[j].data[i][1]) : minValue)
-              }
+        chartBox.style.height = `${height - this.$chartResizeTool.chartBlankHeight}px`
+      })
+      this.clearData()
+      this.firstShow = false
+      this.$refs['localLoading' + this.chartIndex].startLoading()
+      this.divFirstShow = true
+    },
+    dealLegendAlias: function (legend, expression) {
+      if (/\{\{.+\}\}/.test(expression)) {
+        const labelValue = expression.replace(/(\{\{.+?\}\})/g, function (i) {
+          const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
+          const reg = new RegExp(label + '=".+?"')
+          let value = null
+          if (reg.test(legend)) {
+            const find = legend.match(reg)[0]
+            value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1)
+          }
+          return value || label
+        })
+        return labelValue
+      } else {
+        return expression
+      }
+    },
+    // 获取格式
+    getNumStr (num) {
+      if (num >= 1000) {
+        const kbNum = num / 1000
+        if (kbNum >= 1000) {
+          const mbNum = kbNum / 1000
+          if (mbNum > 1000) {
+            const gbNum = mbNum / 1000
+            return `${gbNum.toFixed(2)}B`
+          }
+          return `${mbNum.toFixed(2)}M`
+        }
+        return `${kbNum.toFixed(2)}K`
+      }
+      return num.toFixed(2)
+    },
+    handleClose () {},
+    // 加载更多
+    loadMore () {
+      this.seriesItemArr = this.seriesItem
+      this.legendListMore = this.legendList
+      const chartInfo = this.data
+      const dataArg = this.seriesItem
+      const maxValueCopies = this.getMaxValue(dataArg, chartInfo)
+      const maxValue = maxValueCopies.maxValue
+      // const minValue = maxValueCopies.minValue
+      // const dot = maxValueCopies.dot
+      const copies = maxValueCopies.copies
+      const unit = maxValueCopies.unit
+      // const oldDot = maxValueCopies.oldDot
+      getChart(this.chartIndex).setOption({
+        series: this.seriesItem,
+        yAxis: {
+          minInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'min'),
+          maxInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(dataArg.length / 5)
+        }
+      })
+      if (this.hasLegendOptions) {
+        this.computeLegendData(this.legendListMore, this.seriesItemArr, 'local')
+      }
+      this.$nextTick(() => {
+        const divHeight = this.$refs.legendArea.offsetHeight
+        if (!this.chartInfo.height) {
+          getChart(this.chartIndex).resize({ height: (400 - divHeight - this.$chartResizeTool.titleHeight - this.$chartResizeTool.chartBlankHeight) })
+        } else {
+          getChart(this.chartIndex).resize({ height: (this.chartInfo.height - divHeight - this.$chartResizeTool.titleHeight - this.$chartResizeTool.chartBlankHeight) })
+        }
+      })
+    },
+    // 加载更多
+    loadScreenMore () {
+      this.seriesItemArrScreen = this.seriesItemScreen
+      this.screenLegendListMore = this.screenLegendList
+      const chartInfo = this.data
+      const dataArg = this.seriesItem
+
+      const maxValueCopies = this.getMaxValue(dataArg, chartInfo)
+      const maxValue = maxValueCopies.maxValue
+      // const minValue = maxValueCopies.minValue
+      // const dot = maxValueCopies.dot
+      const copies = maxValueCopies.copies
+      const unit = maxValueCopies.unit
+      // const oldDot = maxValueCopies.oldDot
+      this.echartModalStore.setOption({
+        series: this.seriesItemScreen,
+        yAxis: {
+          minInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'min'),
+          maxInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(dataArg.length / 5)
+        }
+      })
+      if (this.hasLegendOptions) {
+        this.computeLegendData(this.screenLegendListMore, this.seriesItemArrScreen, 'screen')
+      }
+      this.$nextTick(() => {
+        const legendDiv = document.getElementById('screenLegendArea' + this.chartIndex)
+        const divHeight = legendDiv.offsetHeight
+        const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
+        const sumHeight = Math.floor(screenHeight * 0.99 * 0.8)// margin-top:1vh; dailog:80%
+        this.$refs.screenShowArea.style.height = `${sumHeight - divHeight - this.screenTitleHeight}px`
+        this.echartModalStore.resize({ height: (sumHeight - divHeight - this.screenTitleHeight) })// 图表的高度
+      })
+    },
+    findLegendOptions: function () {
+      if (!this.data.param || !this.data.param.legendValue || Object.keys(this.data.param.legendValue) < 1) return false
+      const legendOptions = this.data.param.legendValue
+      const onVal = Object.keys(legendOptions).find(item => { return legendOptions[item] == 'on' })
+
+      return onVal
+    },
+    computeLegendData: function (legend, dataArr, where) {
+      const options = where == 'local' ? this.legendOptions : this.screenLegendOptions
+      const keys = options.filter(item => { return item.value == 'on' }).map(item => { return item.option })
+      keys.forEach(key => {
+        return new Promise(resolve => {
+          legend.forEach(item => {
+            const data = dataArr.find(t => t.name == item.name)
+            if (data && data.data) {
+              const value = getMetricTypeValue(data.data, key)
+              item[key] = parseFloat(value)
+            }
+          })
+          resolve()
+        })
+      })
+    },
+    formatLegendData: function (data) {
+      return chartDataFormat.getUnit(this.chartInfo.unit).compute(data, null, 2)
+    },
+    legendValueSort: function (option, legend, options) {
+      options.forEach(item => {
+        if (item.option != option.option) {
+          item.sort = ''
+        }
+      })
+      if (!option.sort || option.sort == 'asc') {
+        legend.sort((x, y) => x[option.option] - y[option.option])
+        option.sort = 'desc'
+      } else {
+        legend.sort((x, y) => y[option.option] - x[option.option])
+        option.sort = 'asc'
+      }
+    },
+    getMaxValue (dataArg, chartInfo) {
+      let maxValue = 0
+      let minValue = 0
+      if (chartInfo.unit && dataArg.length > 0) {
+        maxValue = 0
+        minValue = 0
+        for (let j = 0; j < dataArg.length; j++) {
+          for (let i = 0; i < dataArg[j].data.length; i++) {
+            if (!isNaN(dataArg[j].data[i][1])) {
+              maxValue = (maxValue < Number(dataArg[j].data[i][1]) ? Number(dataArg[j].data[i][1]) : maxValue)
+              minValue = (minValue > Number(dataArg[j].data[i][1]) ? Number(dataArg[j].data[i][1]) : minValue)
             }
           }
         }
-        const chartUnit = chartInfo.unit ? chartInfo.unit : 2
-        const unit = chartDataFormat.getUnit(chartUnit)
-        minValue = minValue > 0 ? 0 : minValue
-        maxValue = maxValue - minValue
-        maxValue = chartDataFormat.formatDatas(maxValue, unit.type, 'ceil', unit.ascii)
-        let oldValue = maxValue
-        let dot = 0
-        if (maxValue == 1) {
+      }
+      const chartUnit = chartInfo.unit ? chartInfo.unit : 2
+      const unit = chartDataFormat.getUnit(chartUnit)
+      minValue = minValue > 0 ? 0 : minValue
+      maxValue = maxValue - minValue
+      maxValue = chartDataFormat.formatDatas(maxValue, unit.type, 'ceil', unit.ascii)
+      let oldValue = maxValue
+      let dot = 0
+      if (maxValue == 1) {
+        dot++
+      }
+      if (oldValue > 10) {
+        while (oldValue > 10) {
+          oldValue = oldValue / 10
+        }
+      } else if (oldValue < 1 && maxValue !== 0) {
+        while (oldValue < 1 && oldValue > 0) {
+          oldValue = oldValue * 10
           dot++
         }
-        if (oldValue > 10) {
-          while (oldValue > 10) {
-            oldValue = oldValue / 10
-          }
-        } else if (oldValue < 1 && maxValue !== 0) {
-          while (oldValue < 1 && oldValue > 0) {
-            oldValue = oldValue * 10
-            dot++
-          }
-          maxValue = Math.floor(oldValue) / Math.pow(10, dot)
-          dot++
-        }
-        const copies = chartDataFormat.copies(oldValue, unit.type)
-        let oldDot = 2
-        if (maxValue <= 1) {
-          oldDot = dot > 6 ? 6 : dot
-        }
-        return {
-          maxValue,
-          dot,
-          copies,
-          minValue,
-          unit,
-          oldDot
-        }
-      },
-      chartResize () {
-        getChart(this.chartIndex).resize()
+        maxValue = Math.floor(oldValue) / Math.pow(10, dot)
+        dot++
+      }
+      const copies = chartDataFormat.copies(oldValue, unit.type)
+      let oldDot = 2
+      if (maxValue <= 1) {
+        oldDot = dot > 6 ? 6 : dot
+      }
+      return {
+        maxValue,
+        dot,
+        copies,
+        minValue,
+        unit,
+        oldDot
       }
     },
-    created () {
-      this.legendListMore = []
-      this.screenLegendListMore = []
-      this.chartInfo = {}
-      this.seriesItem = [] // 保存信息
-      this.seriesItemArr = []// 初次加载的数据
-      this.seriesItemScreen = []
-      this.seriesItemArrScreen = []
-      this.legend = []
-      this.legendList = []
-      this.screenLegendList = []
-      this.legendOptions = []
-      this.screenLegendOptions = []
-
-      // this.highchartStore = null, // 保存图表数据
-      this.echartStore = null // 保存图表数据
-      this.echartModalStore = null // 全屏查看时数据
-
-      this.bgColorList = ['#7bbfea', '#b3424a', '#f05b72', '#596032', '#bd6758',
-        '#cd9a5b', '#918597', '#70a19f', '#005344', '#FF00FF',
-        '#f7acbc', '#5f5d46', '#66ffff', '#ccFF66', '#f47920',
-        '#769149', '#1d953f', '#abc88b', '#7f7522', '#9b95c9',
-        '#f3715c', '#ea66a6', '#d1c7b7', '#9d9087', '#77787b',
-        '#f58220', '#c37e00', '#00ae9d', '#f26522', '#76becc',
-        '#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e'
-      ]
-    },
-    mounted () {
-      this.firstLoad = false
-      if (!document.onmousemove) { // 添加鼠标移动事件监听
-        document.onmousemove = lineChartMove
-      }
-    },
-    beforeDestroy () {
-      this.clearChart()
-      if (getChart(this.chartIndex)) {
-        getChart(this.chartIndex).dispose()
-      }
-      if (!document.onmousemove) { // 移除鼠标移动事件监听
-        document.onmousemove = null
-      }
-      setChart(this.chartIndex, null)
-      window.removeEventListener('resize', this.chartResize)
+    chartResize () {
+      getChart(this.chartIndex).resize()
     }
+  },
+  created () {
+    this.legendListMore = []
+    this.screenLegendListMore = []
+    this.chartInfo = {}
+    this.seriesItem = [] // 保存信息
+    this.seriesItemArr = []// 初次加载的数据
+    this.seriesItemScreen = []
+    this.seriesItemArrScreen = []
+    this.legend = []
+    this.legendList = []
+    this.screenLegendList = []
+    this.legendOptions = []
+    this.screenLegendOptions = []
+
+    // this.highchartStore = null, // 保存图表数据
+    this.echartStore = null // 保存图表数据
+    this.echartModalStore = null // 全屏查看时数据
+
+    this.bgColorList = ['#7bbfea', '#b3424a', '#f05b72', '#596032', '#bd6758',
+      '#cd9a5b', '#918597', '#70a19f', '#005344', '#FF00FF',
+      '#f7acbc', '#5f5d46', '#66ffff', '#ccFF66', '#f47920',
+      '#769149', '#1d953f', '#abc88b', '#7f7522', '#9b95c9',
+      '#f3715c', '#ea66a6', '#d1c7b7', '#9d9087', '#77787b',
+      '#f58220', '#c37e00', '#00ae9d', '#f26522', '#76becc',
+      '#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e'
+    ]
+  },
+  mounted () {
+    this.firstLoad = false
+    if (!document.onmousemove) { // 添加鼠标移动事件监听
+      document.onmousemove = lineChartMove
+    }
+  },
+  beforeDestroy () {
+    this.clearChart()
+    if (getChart(this.chartIndex)) {
+      getChart(this.chartIndex).dispose()
+    }
+    if (!document.onmousemove) { // 移除鼠标移动事件监听
+      document.onmousemove = null
+    }
+    setChart(this.chartIndex, null)
+    window.removeEventListener('resize', this.chartResize)
   }
+}
 
 </script>
diff --git a/nezha-fronted/src/components/page/dashboard/overview/chart.vue b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
index 08d948365..fe99cbd55 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
@@ -17,561 +17,584 @@
 </template>
 
 <script>
-import * as echarts from 'echarts'
-import chartDataFormat from '../../../charts/chartDataFormat'
-import loading from '../../../common/loading'
-import chartConfig from './chartConfig'
-import bus from '../../../../libs/bus'
-import EleResize from '../../../common/js/divResize'
-import { randomcolor } from '../../../common/js/radomcolor/randomcolor'
-// import * as mapGeoJson from "../../../common/js/world";
+  import * as echarts from 'echarts'
+  import chartDataFormat from '../../../charts/chartDataFormat'
+  import loading from '../../../common/loading'
+  import chartConfig from './chartConfig'
+  import bus from '../../../../libs/bus'
+  import EleResize from '../../../common/js/divResize'
+  import { randomcolor } from '../../../common/js/radomcolor/randomcolor'
+  // import * as mapGeoJson from "../../../common/js/world";
 
-export default {
-  name: 'chart',
-  components: {
-    loading: loading
-  },
-  props: {
-    name: { type: String, default: 'chart' },
-    unit: { type: Number, default: 5 },
-    chartTitle: { type: String },
-    showToolbox: { type: Boolean, default: true },
-    chartType: { type: String, default: 'line' },
-    tooltipFormatter: Function,
-    yAxisFormatter: Function,
-    map: {},
-    axisTooltip: { type: String }, // x/y
-    minusTime: {} // 用于比较图表时的时间差值
-  },
-  data () {
-    return {
-      chart: null,
-      option: null,
-      optionSeriesAll: null,
-      chartId: this.name + '-' + this.guid() + '-' + new Date().getTime(),
-      legend: [],
-      legendAll: [],
-      colors: chartConfig.getBgColorList(),
-      noData: false,
-      dataSize: 20
-    }
-  },
-  created () {
-    this.option = chartConfig.getOption(this.chartType)
-    if (this.chartType === 'ruleBar') {
-      this.option.yAxis.position = 'right'
-      this.option.yAxis.axisLabel.formatter = function (value) {
-        if (value.length > 15) {
-          return value.substring(0, 15) + '...'
-        } else {
-          return value
-        }
-      }
-    }
-    if (this.showToolbox == false) {
-      // this.option.grid.top = 10;
-    }
-  },
-  methods: {
-    modifyOption: function (target, name, obj) {
-      if (!this.option) {
-        this.option = chartConfig.getOption(this.chartType)
-      }
-      this.$set(this.option[target], name, obj)
+  export default {
+    name: 'chart',
+    components: {
+      loading: loading
     },
-    setLegend: function (legend) {
-      this.legendAll = legend
-      this.legend = legend.filter((item, index) => index < this.dataSize)
-      this.resize()
+    props: {
+      name: { type: String, default: 'chart' },
+      unit: { type: Number, default: 5 },
+      chartTitle: { type: String },
+      showToolbox: { type: Boolean, default: true },
+      chartType: { type: String, default: 'line' },
+      tooltipFormatter: Function,
+      yAxisFormatter: Function,
+      map: {},
+      axisTooltip: { type: String }, // x/y
+      minusTime: {} // 用于比较图表时的时间差值
     },
-    getOption: function () {
-      return this.chart.getOption()
+    data () {
+      return {
+        chart: null,
+        option: null,
+        optionSeriesAll: null,
+        chartId: this.name + '-' + this.guid() + '-' + new Date().getTime(),
+        legend: [],
+        legendAll: [],
+        colors: chartConfig.getBgColorList(),
+        noData: false,
+        dataSize: 20
+      }
     },
-    setOption: function (option) {
-      this.chart.setOption(option)
-    },
-    setSeries: function (series, legend, legendData) {
-      if (!this.chart) {
-        this.chartInit()
-      }
-      this.series = series
-      if (this.chartType == 'map') {
-        if (this.map) {
-          echarts.registerMap(this.map.name, this.map.geoJson)
-          chartConfig.setMap(this.map.name)
-        } else {
-          console.error('map chart need map data')
-        }
-      }
-      if (!this.option) {
-        this.option = chartConfig.getOption(this.chartType)
-      }
-      if (legend && legendData && legendData.length > 0) {
-        legend.formatter = function (name) {
-          const type = legendData.find(item => {
-            return item[0] == name
-          })
-          return type ? `${name} (${type[1]}%)` : null
-        }
-        this.$set(this.option, 'legend', legend)
-      }
-
-      if (this.chartType == 'map') {
-        this.option.geo.regions = []
-
-        const geoObj = this.map.geoJson.geoJson
-        geoObj.features.forEach(item => {
-          if (item.properties.NAME_0 == 'Kazakhstan') {
-            this.option.geo.regions.push({
-              name: item.properties.NAME_1,
-              itemStyle: { areaColor: '#eee' },
-              label: { show: true }
-            })
-          }
-        })
-
-        // const mapRoom = document.querySelector('#map')
-        // const roomWidth = mapRoom.offsetWidth
-        // const roomHeight = mapRoom.offsetHeight
-
-        const windowWidth = window.innerWidth
-        /* const windowHeight = window.innerHeight
-
-        const scaleWidth = roomWidth / 1200
-        const scaleHeight = roomHeight / 700 */
-
-        const kazCenter = [67.45, 44]
-        if (windowWidth > 2000) {
-          this.option.geo.center = kazCenter
-          this.option.geo.zoom = 6
-        } else if (windowWidth > 1600) {
-          this.option.geo.center = [kazCenter[0] * 1.15, kazCenter[1] * 0.93]
-          this.option.geo.zoom = 5
-        } else {
-          this.option.geo.center = [kazCenter[0] * 1.15 * 1.15, kazCenter[1] * 0.93 * 0.93]
-          this.option.geo.zoom = 4
-        }
-      }
-
-      this.modifyOption('tooltip', 'position', this.defaultTooltipPosition)
-
-      if (this.tooltipFormatter) {
-        this.modifyOption('tooltip', 'formatter', this.tooltipFormatter)
-      } else {
-        this.modifyOption('tooltip', 'formatter', this.defaultTooltipFormatter)
-      }
-
-      if (this.chartType == 'line' || this.chartType == 'overviewLine') {
-        this.option.xAxis.axisLabel.formatter = this.defaultXAxisFormatter
-        this.option.toolbox.tooltip.formatter = this.defaultToolBoxFormatter
-
-        if (this.yAxisFormatter) {
-          this.option.yAxis.axisLabel.formatter = this.yAxisFormatter
-        } else {
-          this.option.yAxis.axisLabel.formatter = this.defaultYAxisFormatter
-        }
-      }
-      if (this.series) {
-        this.$set(this.option, 'series', this.series)
-        this.noData = false
-        this.chart.clear()
-        this.optionSeriesAll = [...this.option.series]
-        if (this.option.series instanceof Array) {
-          this.option.series = this.option.series.filter((item, index) => index < this.dataSize)
-        }
-        this.chart.setOption(this.option)
-      } else {
-        this.noData = true
-        const option = chartConfig.getOption('noData')
-        this.chart.clear()
-        this.chart.setOption(option)
-      }
-
-      // 坐标轴label鼠标悬浮提示
-      if (this.axisTooltip) {
-        const tooltipDom = document.querySelector('.axis-tooltip')
-        this.chart.on('mouseover', (params) => {
-          if (params.componentType == this.axisTooltip + 'Axis') {
-            tooltipDom.style.display = 'block'
-            tooltipDom.innerHTML = params.value
-          }
-          this.$refs.chartRoom.addEventListener('mousemove', this.chartRoomMouseMove.bind('', event, tooltipDom))
-        })
-        this.chart.on('mouseout', (params) => {
-          if (params.componentType == this.axisTooltip + 'Axis') {
-            tooltipDom.style.display = ''
-          }
-        })
-      }
-      this.resize()
-    },
-    chartRoomMouseMove (event, tooltipDom) {
-      tooltipDom.style.top = event.pageY + 'px'
-      tooltipDom.style.left = event.pageX - 15 + 'px'
-    },
-    resize () {
-      this.$nextTick(() => {
-        if (this.chart) {
-          let height
-          let width
-          if (this.chartType == 'map') {
-            height = 700
-            width = 1200
+    created () {
+      this.option = chartConfig.getOption(this.chartType)
+      if (this.chartType === 'ruleBar') {
+        this.option.yAxis.position = 'right'
+        this.option.yAxis.axisLabel.formatter = function (value) {
+          if (value.length > 15) {
+            return value.substring(0, 15) + '...'
           } else {
-            height = this.$el.clientHeight - document.querySelector('#legendArea').offsetHeight
-            width = this.$el.clientWidth
+            return value
           }
-          this.chart.resize({ width: width, height: height })
         }
-      })
-    },
-    mouseEnterChart () {
-      if (this.chart && this.showToolbox) {
-        this.chart.setOption({
-          toolbox: {
-            show: true
-          }
-        })
+      }
+      if (this.showToolbox == false) {
+        // this.option.grid.top = 10;
       }
     },
-    mouseLeaveChart () {
-      if (this.chart) {
-        this.chart.setOption({
-          toolbox: {
-            show: false
-          }
-        })
-      }
-    },
-    getBgColor: function (index) {
-      const color = this.colors[index]
-      return color
-    },
-    clickLegend (legendName, index) {
-      /* 点击legend
-        * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
-        * 2.如果点击的是唯一高亮的legend，则变为全高亮状态
-        * 3.否则只改变被点击的legend状态
-        * */
-      let highlightNum = 0 // 高亮数量
-      this.legend.forEach(g => {
-        if (!g.isGray) {
-          highlightNum++
+    methods: {
+      modifyOption: function (target, name, obj) {
+        if (!this.option) {
+          this.option = chartConfig.getOption(this.chartType)
+        }
+        this.$set(this.option[target], name, obj)
+      },
+      setLegend: function (legend) {
+        this.legendAll = legend
+        this.legend = legend.filter((item, index) => index < this.dataSize)
+        this.resize()
+      },
+      getOption: function () {
+        return this.chart.getOption()
+      },
+      setOption: function (option) {
+        this.chart.setOption(option)
+      },
+      setSeries: function (series, legend, legendData) {
+        if (!this.chart) {
+          this.chartInit()
+        }
+        this.series = series
+        if (this.chartType == 'map') {
+          if (this.map) {
+            echarts.registerMap(this.map.name, this.map.geoJson)
+            chartConfig.setMap(this.map.name)
+          } else {
+            console.error('map chart need map data')
+          }
+        }
+        if (!this.option) {
+          this.option = chartConfig.getOption(this.chartType)
+        }
+        if (legend && legendData && legendData.length > 0) {
+          legend.formatter = function (name) {
+            const type = legendData.find(item => {
+              return item[0] == name
+            })
+            return type ? `${name} (${type[1]}%)` : null
+          }
+          this.$set(this.option, 'legend', legend)
         }
-      })
-      const hasGray = highlightNum < this.legend.length // 是否有置灰的
-      const curIsGray = this.legend[index].isGray // 当前legend的状态
-      const currentIsTheOnlyOneHighlight = !curIsGray && highlightNum === 1 // 当前legend是否是目前唯一高亮的
 
-      const echart = this.chart
-      if (echart) {
-        if (!hasGray) { // 1.除当前legend外全置灰
-          echart.dispatchAction({
-            type: 'legendInverseSelect'
-          })
-          echart.dispatchAction({
-            type: 'legendSelect',
-            name: legendName
-          })
-          this.legend = this.legend.map((g, i) => {
-            if (i === index) {
-              g.isGray = false
-            } else {
-              g.isGray = true
+        if (this.chartType == 'map') {
+          this.option.geo.regions = []
+
+          const geoObj = this.map.geoJson.geoJson
+          geoObj.features.forEach(item => {
+            if (item.properties.NAME_0 == 'Kazakhstan') {
+              this.option.geo.regions.push({
+                name: item.properties.NAME_1,
+                itemStyle: { areaColor: '#eee' },
+                label: { show: true }
+              })
             }
-            return g
           })
-        } else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
-          echart.dispatchAction({
-            type: 'legendAllSelect'
-          })
-          this.legend = this.legend.map(g => {
-            g.isGray = false
-            return g
-          })
-        } else {
-          const type = curIsGray ? 'legendSelect' : 'legendUnSelect'
-          echart.dispatchAction({
-            type: type,
-            name: legendName
-          })
-          const vm = this
-          this.$set(this.legend, index, (function () { const legend = vm.legend[index]; legend.isGray = !legend.isGray; return legend }()))
+
+          // const mapRoom = document.querySelector('#map')
+          // const roomWidth = mapRoom.offsetWidth
+          // const roomHeight = mapRoom.offsetHeight
+
+          const windowWidth = window.innerWidth
+          /* const windowHeight = window.innerHeight
+
+          const scaleWidth = roomWidth / 1200
+          const scaleHeight = roomHeight / 700 */
+
+          const kazCenter = [67.45, 44]
+          if (windowWidth > 2000) {
+            this.option.geo.center = kazCenter
+            this.option.geo.zoom = 6
+          } else if (windowWidth > 1600) {
+            this.option.geo.center = [kazCenter[0] * 1.15, kazCenter[1] * 0.93]
+            this.option.geo.zoom = 5
+          } else {
+            this.option.geo.center = [kazCenter[0] * 1.15 * 1.15, kazCenter[1] * 0.93 * 0.93]
+            this.option.geo.zoom = 4
+          }
         }
-      }
-      /* let curIsGrey=this.legend[index].isGray;
-        if(this.chart){
-          if(curIsGrey){
-            this.chart.dispatchAction({
+
+        this.modifyOption('tooltip', 'position', this.defaultTooltipPosition)
+
+        if (this.tooltipFormatter) {
+          this.modifyOption('tooltip', 'formatter', this.tooltipFormatter)
+        } else {
+          this.modifyOption('tooltip', 'formatter', this.defaultTooltipFormatter)
+        }
+
+        if (this.chartType == 'line' || this.chartType == 'overviewLine') {
+          this.option.xAxis.axisLabel.formatter = this.defaultXAxisFormatter
+          this.option.toolbox.tooltip.formatter = this.defaultToolBoxFormatter
+
+          if (this.yAxisFormatter) {
+            this.option.yAxis.axisLabel.formatter = this.yAxisFormatter
+          } else {
+            this.option.yAxis.axisLabel.formatter = this.defaultYAxisFormatter
+          }
+        }
+        if (this.series) {
+          this.$set(this.option, 'series', this.series)
+          this.noData = false
+          this.chart.clear()
+          this.optionSeriesAll = [...this.option.series]
+          if (this.option.series instanceof Array) {
+            this.option.series = this.option.series.filter((item, index) => index < this.dataSize)
+          }
+          this.chart.setOption(this.option)
+        } else {
+          this.noData = true
+          const option = chartConfig.getOption('noData')
+          this.chart.clear()
+          this.chart.setOption(option)
+        }
+
+        // 坐标轴label鼠标悬浮提示
+        if (this.axisTooltip) {
+          const tooltipDom = document.querySelector('.axis-tooltip')
+          this.chart.on('mouseover', (params) => {
+            if (params.componentType == this.axisTooltip + 'Axis') {
+              tooltipDom.style.display = 'block'
+              tooltipDom.innerHTML = params.value
+            }
+            this.$refs.chartRoom.addEventListener('mousemove', this.chartRoomMouseMove.bind('', event, tooltipDom))
+          })
+          this.chart.on('mouseout', (params) => {
+            if (params.componentType == this.axisTooltip + 'Axis') {
+              tooltipDom.style.display = ''
+            }
+          })
+        }
+        this.resize()
+      },
+      chartRoomMouseMove (event, tooltipDom) {
+        tooltipDom.style.top = event.pageY + 'px'
+        tooltipDom.style.left = event.pageX - 15 + 'px'
+      },
+      resize () {
+        this.$nextTick(() => {
+          if (this.chart) {
+            let height
+            let width
+            if (this.chartType == 'map') {
+              height = 700
+              width = 1200
+            } else {
+              height = this.$el.clientHeight - document.querySelector('#legendArea').offsetHeight
+              width = this.$el.clientWidth
+            }
+            this.chart.resize({ width: width, height: height })
+          }
+        })
+      },
+      mouseEnterChart () {
+        if (this.chart && this.showToolbox) {
+          this.chart.setOption({
+            toolbox: {
+              show: true
+            }
+          })
+        }
+      },
+      mouseLeaveChart () {
+        if (this.chart) {
+          this.chart.setOption({
+            toolbox: {
+              show: false
+            }
+          })
+        }
+      },
+      getBgColor: function (index) {
+        const color = this.colors[index]
+        return color
+      },
+      clickLegend (legendName, index) {
+        /* 点击legend
+          * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
+          * 2.如果点击的是唯一高亮的legend，则变为全高亮状态
+          * 3.否则只改变被点击的legend状态
+          * */
+        let highlightNum = 0 // 高亮数量
+        this.legend.forEach(g => {
+          if (!g.isGray) {
+            highlightNum++
+          }
+        })
+        const hasGray = highlightNum < this.legend.length // 是否有置灰的
+        const curIsGray = this.legend[index].isGray // 当前legend的状态
+        const currentIsTheOnlyOneHighlight = !curIsGray && highlightNum === 1 // 当前legend是否是目前唯一高亮的
+
+        const echart = this.chart
+        if (echart) {
+          if (!hasGray) { // 1.除当前legend外全置灰
+            echart.dispatchAction({
+              type: 'legendInverseSelect'
+            })
+            echart.dispatchAction({
               type: 'legendSelect',
               name: legendName
-            });
-          }else{
-            this.chart.dispatchAction({
-              type: 'legendUnSelect',
+            })
+            this.legend = this.legend.map((g, i) => {
+              if (i === index) {
+                g.isGray = false
+              } else {
+                g.isGray = true
+              }
+              return g
+            })
+          } else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
+            echart.dispatchAction({
+              type: 'legendAllSelect'
+            })
+            this.legend = this.legend.map(g => {
+              g.isGray = false
+              return g
+            })
+          } else {
+            const type = curIsGray ? 'legendSelect' : 'legendUnSelect'
+            echart.dispatchAction({
+              type: type,
               name: legendName
-            });
+            })
+            const vm = this
+            this.$set(this.legend, index, (function () { const legend = vm.legend[index]; legend.isGray = !legend.isGray; return legend }()))
           }
-          this.$set(this.legend[index],'isGray',!curIsGrey)
-        } */
-    },
-    clickLegend2 (legendName, index) {
-      const curIsGrey = this.legend[index].isGray
-      if (this.chart) {
-        this.legend.forEach((item, i) => {
-          const isGrey = item.isGray
-          if (index != i) { // 不是当前点击的
-            if (!curIsGrey && !isGrey) {
+        }
+        /* let curIsGrey=this.legend[index].isGray;
+          if(this.chart){
+            if(curIsGrey){
+              this.chart.dispatchAction({
+                type: 'legendSelect',
+                name: legendName
+              });
+            }else{
               this.chart.dispatchAction({
                 type: 'legendUnSelect',
-                name: item.name
-              })
-              item.isGray = true
-            } else if (!curIsGrey && isGrey) {
+                name: legendName
+              });
+            }
+            this.$set(this.legend[index],'isGray',!curIsGrey)
+          } */
+      },
+      clickLegend2 (legendName, index) {
+        const curIsGrey = this.legend[index].isGray
+        if (this.chart) {
+          this.legend.forEach((item, i) => {
+            const isGrey = item.isGray
+            if (index != i) { // 不是当前点击的
+              if (!curIsGrey && !isGrey) {
+                this.chart.dispatchAction({
+                  type: 'legendUnSelect',
+                  name: item.name
+                })
+                item.isGray = true
+              } else if (!curIsGrey && isGrey) {
+                this.chart.dispatchAction({
+                  type: 'legendSelect',
+                  name: item.name
+                })
+                item.isGray = false
+              } else {
+                this.chart.dispatchAction({
+                  type: 'legendUnSelect',
+                  name: item.name
+                })
+                item.isGray = true
+              }
+            } else { // 当前点击的
               this.chart.dispatchAction({
                 type: 'legendSelect',
                 name: item.name
               })
-              item.isGray = false
-            } else {
-              this.chart.dispatchAction({
-                type: 'legendUnSelect',
-                name: item.name
-              })
-              item.isGray = true
+              if (item.isGray === true) {
+                item.isGray = false
+              }
             }
-          } else { // 当前点击的
-            this.chart.dispatchAction({
-              type: 'legendSelect',
-              name: item.name
-            })
-            if (item.isGray === true) {
-              item.isGray = false
-            }
-          }
-        })
-      }
-    },
-    defaultTooltipPosition: function (point, params, dom, rect, size) {
-      dom.style.transform = 'translateZ(0)'
-      // 提示框位置
-      let x = 0
-      let y = 0
-      // 当前鼠标位置
-      const pointX = point[0]
-      const pointY = point[1]
-      // 外层div大小
-      /* const viewWidth = size.viewSize[0]
-      const viewHeight = size.viewSize[1] */
-      // 提示框大小
-      const boxWidth = size.contentSize[0]
-      // const boxHeight = size.contentSize[1]
-      const chartDom = document.getElementById(this.chartId)
-      if (chartDom) {
-        // const parTop = chartDom.offsetTop
-        const parLeft = chartDom.offsetLeft
+          })
+        }
+      },
+      defaultTooltipPosition: function (point, params, dom, rect, size) {
+        dom.style.transform = 'translateZ(0)'
+        // 提示框位置
+        let x = 0
+        let y = 0
+        // 当前鼠标位置
+        const pointX = point[0]
+        const pointY = point[1]
+        // 外层div大小
+        /* const viewWidth = size.viewSize[0]
+        const viewHeight = size.viewSize[1] */
+        // 提示框大小
+        const boxWidth = size.contentSize[0]
+        // const boxHeight = size.contentSize[1]
+        const chartDom = document.getElementById(this.chartId)
+        if (chartDom) {
+          // const parTop = chartDom.offsetTop
+          const parLeft = chartDom.offsetLeft
 
-        const parent = chartDom.parentElement
-        // const parClientHeight = parent.clientHeight// 可视高度
-        const parClientWidth = parent.clientWidth// 可视宽度
-        // const parScrollTop = parent.scrollTop
-        if ((parClientWidth - pointX - parLeft - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框
-          x = pointX + 10
+          const parent = chartDom.parentElement
+          // const parClientHeight = parent.clientHeight// 可视高度
+          const parClientWidth = parent.clientWidth// 可视宽度
+          // const parScrollTop = parent.scrollTop
+          if ((parClientWidth - pointX - parLeft - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框
+            x = pointX + 10
+          } else {
+            x = pointX - boxWidth
+          }
+          // if((parClientHeight-pointY-(parTop-parScrollTop)-20)>=boxHeight){//说明鼠标上面放不下提示框
+          //   y = pointY+10;
+          // }else {
+          //   y = pointY-boxHeight;
+          // }
+          y = pointY + 10
+          return [x, y]
         } else {
           x = pointX - boxWidth
+          y = pointY + 10
+          return [x, y]
         }
-        // if((parClientHeight-pointY-(parTop-parScrollTop)-20)>=boxHeight){//说明鼠标上面放不下提示框
-        //   y = pointY+10;
-        // }else {
-        //   y = pointY-boxHeight;
-        // }
-        y = pointY + 10
-        return [x, y]
-      } else {
-        x = pointX - boxWidth
-        y = pointY + 10
-        return [x, y]
-      }
-    },
-    defaultXAxisFormatter: function (value, index) {
-      value = bus.computeTimezone(value)
-      const tData = new Date(value)
-      const month = tData.getMonth() + 1 > 9 ? tData.getMonth() + 1 : '0' + (tData.getMonth() + 1)
-      const day = tData.getDate() > 9 ? tData.getDate() : '0' + tData.getDate()
-      const hour = tData.getHours() > 9 ? tData.getHours() : '0' + tData.getHours()
-      const minute = tData.getMinutes() > 9 ? tData.getMinutes() : '0' + tData.getMinutes()
-      return [month, day].join('-') + '\n' +
+      },
+      defaultXAxisFormatter: function (value, index) {
+        value = bus.computeTimezone(value)
+        const tData = new Date(value)
+        const month = tData.getMonth() + 1 > 9 ? tData.getMonth() + 1 : '0' + (tData.getMonth() + 1)
+        const day = tData.getDate() > 9 ? tData.getDate() : '0' + tData.getDate()
+        const hour = tData.getHours() > 9 ? tData.getHours() : '0' + tData.getHours()
+        const minute = tData.getMinutes() > 9 ? tData.getMinutes() : '0' + tData.getMinutes()
+        return [month, day].join('-') + '\n' +
           [hour, minute].join(':')
-    },
-    defaultToolBoxFormatter (params) {
-      if (params.name === 'stack') {
-        return this.$t('overall.toolBox.stack')
-      }
-      return params.title
-    },
-    defaultTooltipFormatter: function (params) {
-      let minusFlag = true
-      let str = '<div>'
-      params.forEach((item, i) => {
-        const alias = this.queryAlias(i)
-        if (i === 0 && alias.indexOf('Previous ') === -1) {
-          const value = item.data[0]
-          const tData = new Date(value)
-          str += [tData.getFullYear(), tData.getMonth() + 1, tData.getDate()].join('-') + ' ' +
+      },
+      defaultToolBoxFormatter (params) {
+        if (params.name === 'stack') {
+          return this.$t('overall.toolBox.stack')
+        }
+        return params.title
+      },
+      defaultTooltipFormatter: function (params) {
+        let minusFlag = true
+        let str = '<div>'
+        params.forEach((item, i) => {
+          const alias = this.queryAlias(i)
+          if (i === 0 && alias.indexOf('Previous ') === -1) {
+            const value = item.data[0]
+            const tData = new Date(value)
+            str += [tData.getFullYear(), tData.getMonth() + 1, tData.getDate()].join('-') + ' ' +
               [tData.getHours(), tData.getMinutes(), tData.getSeconds()].join(':')
-          str += '<br/>'
-        }
-        if (alias.indexOf('Previous ') !== -1 && minusFlag) {
-          const value = item.data[0] - this.minusTime
-          const tData = new Date(value)
-          str += [tData.getFullYear(), tData.getMonth() + 1, tData.getDate()].join('-') + ' ' +
-            [tData.getHours(), tData.getMinutes(), tData.getSeconds()].join(':')
-          str += '<br/>'
-          minusFlag = false
-        }
-        const val = Number(item.data[1])
-        str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
-        str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${alias || item.seriesName}:  </div>`
-        str += '<div style="padding-left: 10px;">'
-        str += chartDataFormat.getUnit(this.unit).compute(val, null, 2)
-        str += '</div>'
-        str += '</div>'
-      })
-      str += '</div>'
-      return str
-    },
-    queryAlias: function (i) {
-      let alias = null
-      if (this.legend && this.legend.length > 0) {
-        const tempLegend = this.legend.find((item, index) => { return index === i })
-        if (tempLegend) {
-          alias = tempLegend.alias
-        }
-      }
-      return alias
-    },
-    defaultYAxisFormatter: function (value, index) {
-      const maxValueCopies = this.getMaxValue(this.series, { unit: this.unit })
-      const maxValue = maxValueCopies.maxValue
-      const copies = maxValueCopies.copies
-      let dot = maxValueCopies.dot
-      let chartUnit = this.unit
-      chartUnit = chartUnit || 2
-      const unit = chartDataFormat.getUnit(chartUnit)
-      const flag = JSON.stringify(value).length > JSON.stringify(chartDataFormat.Interval(maxValue, copies, unit.type)).length
-      if (dot === 0 || flag) {
-        dot = 1
-      }
-      return unit.compute(value, index, -1, dot)
-    },
-    setRandomColors: function (num) { // 当线条过多，默认颜色数量不够时须使用此方法,num 颜色的数量，通常传递series的length即可
-      const colors = []
-      for (let i = 0; i < num; i++) {
-        colors.push(randomcolor())
-      }
-      this.colors = Object.assign([], colors)
-      this.$set(this.option, 'color', colors)
-    },
-    startLoading: function () {
-      this.$refs.loading.startLoading()
-      this.$emit('is-loading', true)
-    },
-    endLoading: function () {
-      this.$refs.loading.endLoading()
-      this.$emit('is-loading', false)
-    },
-    guid () {
-      function S4 () {
-        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
-      }
+            str += '<br/>'
+          }
+          if (alias.indexOf('Previous ') !== -1 && minusFlag) {
+            if (i !== 0) {
+              str += '<div style="border:1px dashed #333;width:100%;margin-top: 5px"></div>'
+            }
+            const value = item.data[0] - this.minusTime
+            const tData = new Date(value)
+            str += [tData.getFullYear(), tData.getMonth() + 1, tData.getDate()].join('-') + ' ' +
+              [tData.getHours(), tData.getMinutes(), tData.getSeconds()].join(':')
+            str += '<br/>'
+            minusFlag = false
+          }
+          const val = Number(item.data[1])
+          str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
+          str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${alias || item.seriesName}:  </div>`
+          str += '<div style="padding-left: 10px;">'
+          str += chartDataFormat.getUnit(this.unit).compute(val, null, 2)
+          str += '</div>'
 
-      return (S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4())
-    },
-    clearChart () {
-      if (this.chart) {
-        this.chart.clear()
-      }
-    },
-    showMore () { // 显示更多
-      this.legend = this.legendAll
-      const option = {
-        series: this.optionSeriesAll
-      }
-      this.chart.setOption(option)
-      this.chart.resize()
-    },
-    chartInit () {
-      this.chart = echarts.init(document.getElementById(this.chartId))
-    },
-    getMaxValue (dataArg, chartInfo) {
-      let maxValue = 0
-      let minValue = 0
-      if (chartInfo.unit && dataArg.length > 0) {
-        maxValue = 0
-        minValue = 0
-        for (let j = 0; j < dataArg.length; j++) {
-          for (let i = 0; i < dataArg[j].data.length; i++) {
-            if (!isNaN(dataArg[j].data[i][1])) {
-              maxValue = (maxValue < Number(dataArg[j].data[i][1]) ? Number(dataArg[j].data[i][1]) : maxValue)
-              minValue = (minValue > Number(dataArg[j].data[i][1]) ? Number(dataArg[j].data[i][1]) : minValue)
+          const previousItem = params.find((series) => ('Previous ' + item.seriesName) === series.seriesName)
+          if (previousItem) {
+            str += '<div style="padding-left: 10px;">'
+            let previousval = parseFloat(Number(previousItem.data[1]).toFixed(2))
+            if (previousval === 0) {
+              previousval = Number(item.data[1]).toExponential(2)
+            }
+            let minusVal = 0
+            if (previousval <= val) {
+              minusVal = val - previousval
+              str += '+'
+            } else {
+              minusVal = previousval - val
+              str += '-'
+            }
+
+            str += chartDataFormat.getUnit(this.unit).compute(minusVal, null, 2)
+            str += '</div>'
+          }
+          str += '</div>'
+        })
+        str += '</div>'
+        return str
+      },
+      queryAlias: function (i) {
+        let alias = null
+        if (this.legend && this.legend.length > 0) {
+          const tempLegend = this.legend.find((item, index) => { return index === i })
+          if (tempLegend) {
+            alias = tempLegend.alias
+          }
+        }
+        return alias
+      },
+      defaultYAxisFormatter: function (value, index) {
+        const maxValueCopies = this.getMaxValue(this.series, { unit: this.unit })
+        const maxValue = maxValueCopies.maxValue
+        const copies = maxValueCopies.copies
+        let dot = maxValueCopies.dot
+        let chartUnit = this.unit
+        chartUnit = chartUnit || 2
+        const unit = chartDataFormat.getUnit(chartUnit)
+        const flag = JSON.stringify(value).length > JSON.stringify(chartDataFormat.Interval(maxValue, copies, unit.type)).length
+        if (dot === 0 || flag) {
+          dot = 1
+        }
+        return unit.compute(value, index, -1, dot)
+      },
+      setRandomColors: function (num) { // 当线条过多，默认颜色数量不够时须使用此方法,num 颜色的数量，通常传递series的length即可
+        const colors = []
+        for (let i = 0; i < num; i++) {
+          colors.push(randomcolor())
+        }
+        this.colors = Object.assign([], colors)
+        this.$set(this.option, 'color', colors)
+      },
+      startLoading: function () {
+        this.$refs.loading.startLoading()
+        this.$emit('is-loading', true)
+      },
+      endLoading: function () {
+        this.$refs.loading.endLoading()
+        this.$emit('is-loading', false)
+      },
+      guid () {
+        function S4 () {
+          return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
+        }
+
+        return (S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4())
+      },
+      clearChart () {
+        if (this.chart) {
+          this.chart.clear()
+        }
+      },
+      showMore () { // 显示更多
+        this.legend = this.legendAll
+        const option = {
+          series: this.optionSeriesAll
+        }
+        this.chart.setOption(option)
+        this.chart.resize()
+      },
+      chartInit () {
+        this.chart = echarts.init(document.getElementById(this.chartId))
+      },
+      getMaxValue (dataArg, chartInfo) {
+        let maxValue = 0
+        let minValue = 0
+        if (chartInfo.unit && dataArg.length > 0) {
+          maxValue = 0
+          minValue = 0
+          for (let j = 0; j < dataArg.length; j++) {
+            for (let i = 0; i < dataArg[j].data.length; i++) {
+              if (!isNaN(dataArg[j].data[i][1])) {
+                maxValue = (maxValue < Number(dataArg[j].data[i][1]) ? Number(dataArg[j].data[i][1]) : maxValue)
+                minValue = (minValue > Number(dataArg[j].data[i][1]) ? Number(dataArg[j].data[i][1]) : minValue)
+              }
             }
           }
         }
-      }
-      const chartUnit = chartInfo.unit ? chartInfo.unit : 2
-      const unit = chartDataFormat.getUnit(chartUnit)
-      minValue = minValue > 0 ? 0 : minValue
-      maxValue = maxValue - minValue
-      maxValue = chartDataFormat.formatDatas(maxValue, unit.type, 'ceil', unit.ascii)
-      let oldValue = maxValue
-      let dot = 0
-      if (maxValue == 1) {
-        dot++
-      }
-      if (oldValue > 10) {
-        while (oldValue > 10) {
-          oldValue = oldValue / 10
-        }
-      } else if (oldValue < 1 && maxValue !== 0) {
-        while (oldValue < 1 && oldValue > 0) {
-          oldValue = oldValue * 10
+        const chartUnit = chartInfo.unit ? chartInfo.unit : 2
+        const unit = chartDataFormat.getUnit(chartUnit)
+        minValue = minValue > 0 ? 0 : minValue
+        maxValue = maxValue - minValue
+        maxValue = chartDataFormat.formatDatas(maxValue, unit.type, 'ceil', unit.ascii)
+        let oldValue = maxValue
+        let dot = 0
+        if (maxValue == 1) {
           dot++
         }
-        maxValue = Math.floor(oldValue) / Math.pow(10, dot)
-        dot++
+        if (oldValue > 10) {
+          while (oldValue > 10) {
+            oldValue = oldValue / 10
+          }
+        } else if (oldValue < 1 && maxValue !== 0) {
+          while (oldValue < 1 && oldValue > 0) {
+            oldValue = oldValue * 10
+            dot++
+          }
+          maxValue = Math.floor(oldValue) / Math.pow(10, dot)
+          dot++
+        }
+        const copies = chartDataFormat.copies(oldValue, unit.type)
+        let oldDot = 2
+        if (maxValue <= 1) {
+          oldDot = dot > 6 ? 6 : dot
+        }
+        return {
+          maxValue,
+          dot,
+          copies,
+          minValue,
+          unit,
+          oldDot
+        }
       }
-      const copies = chartDataFormat.copies(oldValue, unit.type)
-      let oldDot = 2
-      if (maxValue <= 1) {
-        oldDot = dot > 6 ? 6 : dot
-      }
-      return {
-        maxValue,
-        dot,
-        copies,
-        minValue,
-        unit,
-        oldDot
-      }
-    }
-  },
-  mounted () {
-    this.chartInit()
-    EleResize.on(this.$el, this.resize, this.chartType)
-  },
-  watch: {
+    },
+    mounted () {
+      this.chartInit()
+      EleResize.on(this.$el, this.resize, this.chartType)
+    },
+    watch: {
 
-  },
-  beforeDestroy () {
-    this.$refs.chartRoom.removeEventListener('mousemove', this.chartRoomMouseMove)
-    if (this.chart) {
-      this.chart.clear()
-      /* this.chart.off('mouseover');
-        this.chart.off('mouseout');
-        EleResize.off(this.$el, this.resize, this.chartType); */
+    },
+    beforeDestroy () {
+      this.$refs.chartRoom.removeEventListener('mousemove', this.chartRoomMouseMove)
+      if (this.chart) {
+        this.chart.clear()
+        /* this.chart.off('mouseover');
+          this.chart.off('mouseout');
+          EleResize.off(this.$el, this.resize, this.chartType); */
+      }
     }
   }
-}
 </script>
 <!--<style>
  @import "../../../charts/chart.scss";