perf: echarts性能优化

2020-09-25 11:48:54 +08:00
parent 733b2c45da
commit 19df95c6be
4 changed files with 99 additions and 47 deletions
--- a/nezha-fronted/package-lock.json
+++ b/nezha-fronted/package-lock.json
@@ -4725,7 +4725,8 @@
        "ansi-regex": {
          "version": "2.1.1",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "aproba": {
          "version": "1.2.0",
@@ -4746,12 +4747,14 @@
        "balanced-match": {
          "version": "1.0.0",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "brace-expansion": {
          "version": "1.1.11",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "balanced-match": "^1.0.0",
            "concat-map": "0.0.1"
@@ -4766,17 +4769,20 @@
        "code-point-at": {
          "version": "1.1.0",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "concat-map": {
          "version": "0.0.1",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "console-control-strings": {
          "version": "1.1.0",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "core-util-is": {
          "version": "1.0.2",
@@ -4893,7 +4899,8 @@
        "inherits": {
          "version": "2.0.3",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "ini": {
          "version": "1.3.5",
@@ -4905,6 +4912,7 @@
          "version": "1.0.0",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "number-is-nan": "^1.0.0"
          }
@@ -4919,6 +4927,7 @@
          "version": "3.0.4",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "brace-expansion": "^1.1.7"
          }
@@ -4926,12 +4935,14 @@
        "minimist": {
          "version": "0.0.8",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "minipass": {
          "version": "2.3.5",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "safe-buffer": "^5.1.2",
            "yallist": "^3.0.0"
@@ -4950,6 +4961,7 @@
          "version": "0.5.1",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "minimist": "0.0.8"
          }
@@ -5030,7 +5042,8 @@
        "number-is-nan": {
          "version": "1.0.1",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "object-assign": {
          "version": "4.1.1",
@@ -5042,6 +5055,7 @@
          "version": "1.4.0",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "wrappy": "1"
          }
@@ -5127,7 +5141,8 @@
        "safe-buffer": {
          "version": "5.1.2",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "safer-buffer": {
          "version": "2.1.2",
@@ -5163,6 +5178,7 @@
          "version": "1.0.2",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "code-point-at": "^1.0.0",
            "is-fullwidth-code-point": "^1.0.0",
@@ -5182,6 +5198,7 @@
          "version": "3.0.1",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "ansi-regex": "^2.0.0"
          }
@@ -5225,12 +5242,14 @@
        "wrappy": {
          "version": "1.0.2",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "yallist": {
          "version": "3.0.3",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        }
      }
    },
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -38,9 +38,18 @@
    height: 5px;
    box-sizing: inherit;
  }
+
+  .temp-dom {
+    visibility: hidden;
+    font-size: 14px;
+    position: fixed;
+  }
 </style>
 <template>
  <div class="list-width"  id="listContainer"><!--v-drag-->
+
+    <span class="temp-dom"></span>
+
    <draggable v-model="dataList" @start="start" @end="end" :move="move" :key
               :scroll-sensitivity="150"
               :options="{
@@ -58,7 +67,7 @@
               }"  >
      <div v-for="(item, index) in dataList" :key="item.id" :id="'chart-' + item.id" :name="item.title" :class="{'drag-disabled': !draggable,'chartBox':true}" v-show="!item.isHide">
        <line-chart-block v-if="item.type === 'line' || item.type === 'bar' ||item.type == 'stackArea' || item.type === 4" :key="'inner' + item.id"
-                          :ref="'editChart'+item.id"
+                          :ref="'editChart'+item.id" :temp-dom="tempDom"
                          @on-refresh-data="refreshChart"
                          @on-remove-chart-block="removeChart"
                          @on-duplicate-chart-block="duplicateChart"
@@ -162,6 +171,7 @@
      draggable: {type: Boolean, default: true},
      detail: Object
    },
+
    components: {
      chartAlertList,
      chartDetail,
@@ -196,11 +206,14 @@
        dragging: null,
        chartDataCacheGroup:new Map,//图表数据缓存，用于查询：id:{}
        stepHeight: 50,
+
+        tempDom: {height: "", width: ""},
      };
    },
    methods: {
-      change (event) {
-        console.log('change', event)
+      tempDomInit() {
+        let span = document.querySelector(".temp-dom");
+        this.tempDom.width = span.offsetWidth;
      },
      start (event) {
        //console.log('start', event, this.dataList);
@@ -898,6 +911,7 @@
                                  width: 1,
                                  opacity: 0.9
                                },
+                                animation: false,
                                type: chartInfo.type,
                              },
                              metric_name: '',
@@ -1683,6 +1697,9 @@
        }, 100);
      },
    },
+    mounted() {
+      this.tempDomInit();
+    },
  };

 </script>
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -180,10 +180,12 @@
  import 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 timePicker from '../common/timePicker'
+  import chartDataFormat from './chartDataFormat';
+  import {randomcolor} from  '../common/js/radomcolor/randomcolor.js';
+  import timePicker from '../common/timePicker';
  import chartConfig from "../page/dashboard/overview/chartConfig";
+  import {getChart, setChart} from "../common/js/common";
+
  export default {
    name: 'lineChartBlock',
    components: {
@@ -211,7 +213,8 @@
      isExplore:{
        type:Boolean,
        default:false,
-      }
+      },
+      tempDom: Object
    },
    data() {
      return {
@@ -288,8 +291,8 @@
      },
      mouseEnterChart(){
        this.caretShow=true;
-        if (this.echartStore) {
-          this.echartStore.setOption({
+        if (getChart(this.chartIndex)) {
+          getChart(this.chartIndex).setOption({
            toolbox: {
              show:true,
            }
@@ -298,8 +301,8 @@
      },
      mouseLeaveChart(){
        this.caretShow=false;
-        if (this.echartStore) {
-          this.echartStore.setOption({
+        if (getChart(this.chartIndex)) {
+          getChart(this.chartIndex).setOption({
            toolbox: {
              show:false,
            }
@@ -327,28 +330,28 @@
      clickLegend(legendName,index){
        //点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
        let curIsGrey=this.isGrey[index];
-        if(this.echartStore){
+        if(getChart(this.chartIndex)){
          this.legendListMore.forEach((item,i)=>{
            let isGrey = this.isGrey[i];
            if(index != i){
              if(!curIsGrey && !isGrey){
-                this.echartStore.dispatchAction({
+                getChart(this.chartIndex).dispatchAction({
                  type: 'legendUnSelect',
                  name: item.name
                });
              }else if(!curIsGrey && isGrey){
-                this.echartStore.dispatchAction({
+                getChart(this.chartIndex).dispatchAction({
                  type: 'legendSelect',
                  name: item.name
                });
              }else{
-                this.echartStore.dispatchAction({
+                getChart(this.chartIndex).dispatchAction({
                  type: 'legendUnSelect',
                  name: item.name
                });
              }
            }else {
-              this.echartStore.dispatchAction({
+              getChart(this.chartIndex).dispatchAction({
                type: 'legendSelect',
                name: item.name
              });
@@ -419,8 +422,8 @@
        }
      },
      clearData(){
-        if(this.echartStore){
-          this.echartStore.clear();
+        if(getChart(this.chartIndex)){
+          getChart(this.chartIndex).clear();
        }
      },
      formatLegend(chartWidth,name){
@@ -428,7 +431,7 @@
          return '';
        }
        //计算宽度
-        var span = document.createElement("span");
+        /*var span = document.createElement("span");
        var result = {};
        result.width = span.offsetWidth;
        result.height = span.offsetHeight;
@@ -443,12 +446,14 @@
          span.innerText = name;
        }
        var txtWidth = parseFloat(window.getComputedStyle(span).width) - result.width;
-        document.body.removeChild(span);
-
+        document.body.removeChild(span);*/
+        let span = document.querySelector(".temp-dom");
+        span.textContent = name;
+        let txtWidth = parseFloat(window.getComputedStyle(span).width) - this.tempDom.width;
        if(txtWidth < chartWidth){
          return name;
        }else {
-          var charNum = `${(chartWidth-100)/(txtWidth/name.length)}`;
+          let charNum = `${(chartWidth-100)/(txtWidth/name.length)}`;
          return name.slice(0,charNum)+'...';
        }
      },
@@ -469,7 +474,8 @@
          maxTime = dataArg[0].data[len][0];
        }
        if (chartSite === 'local') {
-          this.echartStore = echarts.init(ele);
+          setChart(this.chartIndex, echarts.init(ele));
+          //getChart(this.chartIndex) = echarts.init(ele);
          //chartId='lineChartArea';
        }else if (chartSite === 'screen') {
          this.echartModalStore = echarts.init(ele);
@@ -785,19 +791,19 @@
            setTimeout(function () {
              let divHeight = self.$refs.legendArea.offsetHeight;
              if(!chartInfo.height){
-                self.echartStore.resize({height:(400-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
+                getChart(self.chartIndex).resize({height:(400-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
              }else {
-                self.echartStore.resize({height:(chartInfo.height-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
+                getChart(self.chartIndex).resize({height:(chartInfo.height-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
              }
              if(dataArg&&dataArg.length>0){
-                self.echartStore.clear();
-                self.echartStore.setOption(option);//创建图表
+                getChart(self.chartIndex).clear();
+                getChart(self.chartIndex).setOption(option);//创建图表
                self.noData=false;
              }else{
                self.noData=true;
                option=chartConfig.getOption('noData')
-                self.echartStore.clear();
-                self.echartStore.setOption(option);//创建图表
+                getChart(self.chartIndex).clear();
+                getChart(self.chartIndex).setOption(option);//创建图表
              }

              self.$refs['localLoading'+self.chartIndex].endLoading();
@@ -805,9 +811,9 @@
            }, 100);

            window.addEventListener('resize', function () {
-              self.echartStore.resize();
+              getChart(self.chartIndex).resize();
            });
-            this.echartStore.on('magictypechanged', function (params) {
+            getChart(this.chartIndex).on('magictypechanged', function (params) {
                self.isStackArea = !self.isStackArea;
                if(self.isStackArea){
                  this.setOption({
@@ -1119,8 +1125,8 @@
        chartBox.style.height = `${this.$chartResizeTool.calculateHeight(chartItem.height)}px`;
      },
      clearChart(){
-        if(this.echartStore){
-          this.echartStore.clear();
+        if(getChart(this.chartIndex)){
+          getChart(this.chartIndex).clear();
        }
        if(this.echartModalStore){
          this.echartModalStore.clear();
@@ -1485,7 +1491,7 @@
        let copies=maxValueCopies.copies;
        let unit=maxValueCopies.unit;
        let oldDot=maxValueCopies.oldDot;
-        this.echartStore.setOption({
+        getChart(this.chartIndex).setOption({
          series:this.seriesItem,
          yAxis:{
            minInterval: chartDataFormat.Interval(maxValue,copies,unit.type,'min'),
@@ -1498,9 +1504,9 @@
        this.$nextTick(()=>{
          let divHeight = this.$refs.legendArea.offsetHeight;
          if(!this.chartInfo.height){
-            this.echartStore.resize({height:(400-divHeight-this.$chartResizeTool.titleHeight-this.$chartResizeTool.chartBlankHeight)});
+            getChart(this.chartIndex).resize({height:(400-divHeight-this.$chartResizeTool.titleHeight-this.$chartResizeTool.chartBlankHeight)});
          }else {
-            this.echartStore.resize({height:(this.chartInfo.height-divHeight-this.$chartResizeTool.titleHeight-this.$chartResizeTool.chartBlankHeight)});
+            getChart(this.chartIndex).resize({height:(this.chartInfo.height-divHeight-this.$chartResizeTool.titleHeight-this.$chartResizeTool.chartBlankHeight)});
          }
        })
      },
--- a/nezha-fronted/src/components/common/js/common.js
+++ b/nezha-fronted/src/components/common/js/common.js
@@ -15,3 +15,13 @@ export function getUUID(){

  return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
 }
+
+const chartCache = {};
+
+export function getChart(key) {
+  return chartCache[`chart${key}`];
+}
+
+export function setChart(key, value) {
+  chartCache[`chart${key}`] = value;
+}