vue单页面中有多个echarts图表时公用代码写法

1. html中：

      <div class="charts1"/>
      <div class="charts2"/>
      <div class="charts3"/>
      <div class="charts4"/>
      <div class="charts5"/>
      <div class="charts6"/>
      <div class="charts7"/>

2. 数据处理就不用提了。嗯，直接画图：

 // 画 折线图
    drawLine() {
    // 数据处理的方法
      this.dealEchartsData()
      var myChartsArr = []
      for (var i = 1; i <= 7; i++) {
        this.myCharts = this.$echarts.init(document.getElementsByClassName('charts' + i)[0])
        myChartsArr.push(this.myCharts)
        var option = this.commonOption(this.myCharts, this.adnormalTypeSummery[i - 1], this.destArrAll[i - 1])
        // 为echarts对象加载数据    true 防止echarts数据叠加！！！
        this.myCharts.setOption(option, true)
      }
      window.onresize = function() { // 自适应
        for (var j = 0; j < myChartsArr.length; j++) {
          if (myChartsArr[j].resize()) {
            myChartsArr[j].resize()
          }
        }
      }
    },

3. 公用部分：

  // option 主体
    commonOption(myCharts, titleText, destData) {
      var option = {
        title: {
          text: titleText
        },
        tooltip: {
          trigger: 'axis',
          confine: true
        },
        legend: {
          type: 'scroll',
          width: '90%',
          top: '13%'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '2%',
          containLabel: true
        },
        toolbox: {
          right: '20',
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.monthName
        },
        yAxis: {
          type: 'value'
        },
        series: destData
      }
      return option
    }

4. 离开该页面时候摧毁：

destroyed() {
    if (this.myCharts) {
      this.myCharts.clear()
      this.myCharts.dispose()
      window.onresize = null
    }