echarts开发项目心得总结

需求：假如现在需要开发截图这种echarts折线图

上代码：

<template>
  <div
    id="leftEchartsLine"
    ref="leftEchartsLine"
  ></div>
</template>

<script>
export default {
  props: ["chartData"],
  data() {
    return {
      myChart: null,
      option: null
    };
  },
  watch: {
    chartData: {
      // immediate: true,
      deep: true,
      handler(chartData) {
        this.initChart(chartData);
      }
    }
  },
  mounted() {
    const option = {
      title: {
        text: ""
      },
      tooltip: {
        trigger: "axis",
        formatter: function(params) {
          var result = params[0].axisValue + "</br>";
          params.forEach(function(item) {
            if (item.seriesName == "Emergency") {
              result +=
                '<span class="circle-span-emergency"></span>' +
                item.seriesName +
                ": " +
                item.value +
                "</br>";
            } else if (item.seriesName == "Critical") {
              result +=
                '<span class="circle-span-critical"></span>' +
                item.seriesName +
                ": " +
                item.value +
                "</br>";
            } else if (item.seriesName == "Warning") {
              result +=
                '<span class="circle-span-warning"></span>' +
                item.seriesName +
                ": " +
                item.value +
                "</br>";
            } else if (item.seriesName == "Notice") {
              result +=
                '<span class="circle-span-notice"></span>' +
                item.seriesName +
                ": " +
                item.value +
                "</br>";
            } else if (item.seriesName == "Information") {
              result +=
                '<span class="circle-span-information"></span>' +
                item.seriesName +
                ": " +
                item.value +
                "</br>";
            }
          });
          return result;
        }
      },
      legend: {
        data: ["Emergency", "Critical", "Warning", "Notice", "Information"],
        x: "right",
        y: "bottom"
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "10%",
        containLabel: true
      },
      yAxis: {
        minInterval: 1,
        type: "value",
        axisLine: {
          show: false //y轴线消失
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed" // 横坐标横线变虚线
          }
        }
      },
      series: [
        {
          name: "Emergency",
          type: "line",
          color: "#F67389",
          data: []
        },
        {
          name: "Critical",
          type: "line",
          color: "#4ED6CC",
          data: []
        },
        {
          name: "Warning",
          type: "line",
          color: "#F7B500",
          data: []
        },
        {
          name: "Notice",
          type: "line",
          color: "#2E91B4",
          data: []
        },
        {
          name: "Information",
          type: "line",
          color: "#898989",
          data: []
        }
      ]
    };
    this.option = option;

    var dom = document.getElementById("leftEchartsLine");
    var myChart = this.echarts.init(dom);
    this.myChart = myChart;
    let that = this;
    // 监听resize
    window.addEventListener("resize", function() {
      that.myChart.resize();
    });
  },
  methods: {
    initChart(chartData) {
      if (
        chartData &&
        chartData.xOffsets &&
        chartData.xOffsets.length &&
        chartData.datasets &&
        chartData.datasets.length
      ) {
        this.option.xAxis = {
          type: "category",
          boundaryGap: false,
          data: chartData.xOffsets,
          axisLabel: {
            rotate: 60, // 横坐标 旋转度数
            //X轴刻度配置
            interval: chartData.xOffsets.length > 7 ? 2 : 0 //0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
          }
        };

        this.option.series[0].data = chartData.datasets[0].value;
        this.option.series[1].data = chartData.datasets[1].value;
        this.option.series[2].data = chartData.datasets[2].value;
        this.option.series[3].data = chartData.datasets[3].value;
        this.option.series[4].data = chartData.datasets[4].value;
        if (this.myChart) {
          this.myChart.setOption(this.option);
        }
      }
    }
  }
};
</script>

<style>
#leftEchartsLine {
  width: 100%;
  height: 100%;
  margin-top: -13px;
  overflow: hidden;
  /* margin-top: -80px; */
}
.circle-span-emergency {
  display: inline-block;
  margin-right: 5px;
  border-radius: 10px;
  width: 10px;
  height: 10px;
  background-color: #f67389;
}

.circle-span-critical {
  display: inline-block;
  margin-right: 5px;
  border-radius: 10px;
  width: 10px;
  height: 10px;
  background-color: #4ed6cc;
}

.circle-span-warning {
  display: inline-block;
  margin-right: 5px;
  border-radius: 10px;
  width: 10px;
  height: 10px;
  background-color: #f7b500;
}

.circle-span-notice {
  display: inline-block;
  margin-right: 5px;
  border-radius: 10px;
  width: 10px;
  height: 10px;
  background-color: #2e91b4;
}

.circle-span-information {
  display: inline-block;
  margin-right: 5px;
  border-radius: 10px;
  width: 10px;
  height: 10px;
  background-color: #898989;
}
</style>

把echarts图这块封装成一个子组件，通过父组件里面传值进行渲染，watch 里面进行监听，如果传的值发生了改变，则触发渲染echarts方法 initChart

优化的点：

1. echarts公共的option配置提出来，减少option渲染次数
   关于地图渲染的过程中，可以把 echarts公共的option配置提出来，减少option渲染次数，放到mounted里面执行一次，然后存到一个 变量option里，后面动态渲染的时候，直接this.option调用就行，减少重新渲染option的问题

2. DOM只在mounted里渲染一次，存变量,减少DOM渲染次数
   echarts DOM重复渲染的问题，也是同样，在mounted里面执行一次，然后调用自带的init方法，存到一个变量 myChart里

	var dom = document.getElementById("leftEchartPie");
    var myChart = this.echarts.init(dom);
    this.myChart = myChart;

后面直接在渲染方法里面取mounted生命周期函数里面存的myChart变量就行。

	  // 绘制图表
      this.myChart.setOption(this.option);

3. resize问题使用window原生事件,减少使用第三方插件
   关于echarts 图 resize问题，之间引用的是插件 element-resize-detector , 但是迁移代码过程中发现遇到了不好解决的问题，不是很好定位问题，于是自己用原生js自带的监听事件写的 ，上代码：

  mounted() {
    ...
	var dom = document.getElementById("leftEchartPie");
	// leftEchartPie 对应echarts的 DOM ID 
    var myChart = this.echarts.init(dom);
    this.myChart = myChart;
    let that = this;
    // 监听resize
    window.addEventListener("resize", function() {
      that.mychart.resize();
    });
  }