echarts图表通过遍历出来的，resize()方法只生效最后一次执行的那个

echarts图表通过遍历出来的，resize()方法只生效最后一次执行的那个

1.定义一个放echarts图表的盒子

//定义一个盒子
<template>
  <div class="chartCon" ref="barLineCon" style="margin-top: 0">  </div>
</template>

2.在data里面进行echarts图表配置

blCharts: null,
      blChartsOption: {
        title: {
          text: "",
          x: "center",
          textStyle: {
            fontSize: 14
          }
        },
        xAxis: {
          name: "",
          nameTextStyle: {
            fontSize: 11,
            color: "#0c629c",
            padding: [20, 0, 0, -16]
          },
          data: [],
          axisLabel: {
            interval: 0,
            rotate: -34
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            onZero: false
          }
        },
        grid: {
          //距离
          right: "10%",
          left: "10%",
          bottom: "50px",
          top: "100px"
        },
        yAxis: [
          {
            name: "",
            show: true,
            nameTextStyle: {
              fontSize: 12,
              lineHeight: 75,
              color: "#0c629c"
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: true
            },
            axisLine: {
              show: true
            }
          }
        ],
        tooltip: {
          trigger: "axis",
          confine: true
        },
        legend: {
          right: "12%",
          top: "11%",
          textStyle: {
            color: "#000"
          },
          show: true,
          data: []
        },
        color: ["#58a1fd", "orange"],
        series: [
          {
            name: "",
            type: "bar",
            barWidth: 10,
            symbol: "circle",
            data: []
          },
          {
            name: "",
            type: "line",
            barWidth: 15,
            symbol: "circle",
            data: []
          }
        ]
      }
    };

3.在methods里面写好方法

methods: {
    blChatrsCon() {
      var self = this;
      var handleResult = res => {
        const timeDate = [];
        const data = [];
        if (res) {
          res.forEach(el => {
            timeDate.push(el.featureTime);
            data.push(el.featureValue);
          });
          if (res && res[0] && res[0].updateCycle === "daily") {
            self.deviceTimeDate = timeDate.slice(-15);
            self.deviceData = data.slice(-15);
            self.blChartsOption.xAxis.name = "日期（日）";
            self.blChartsOption.xAxis.axisLabel.interval = 1;
          } else if (res && res[0] && res[0].updateCycle === "weekly") {
            self.deviceTimeDate = timeDate.slice(-8);
            self.deviceData = data.slice(-8);
            self.blChartsOption.xAxis.name = "日期（周）";
            self.blChartsOption.xAxis.axisLabel.interval = 0;
          } else if (res && res[0] && res[0].updateCycle === "monthly") {
            self.deviceTimeDate = timeDate.slice(-12);
            self.deviceData = data.slice(-12);
            self.blChartsOption.xAxis.name = "日期（月）";
            self.blChartsOption.xAxis.axisLabel.interval = 0;
          }
          if (res && res[0] && res[0].featureChart === "line") {
            self.blChartsOption.series[1].data = self.deviceData;
            self.blChartsOption.series[0].data = [];
            self.blChartsOption.series[1].name = self.legend;
          } else if (res && res[0] && res[0].featureChart === "hist") {
            self.blChartsOption.series[0].data = self.deviceData;
            self.blChartsOption.series[1].data = [];
            self.blChartsOption.series[0].name = self.legend;
          }
        }
        self.blChartsOption.title.text = self.featureName;
        self.blChartsOption.legend.data = [self.legend];
        self.blChartsOption.xAxis.data = self.deviceTimeDate;
        self.blChartsOption.yAxis[0].name = self.yName;
        self.blCharts = self.$refs.barLineCon;
        // 初始化图表
        self.blCharts = self.$echarts.init(self.blCharts);
        // 使用刚指定的配置项和数据显示图表。
        self.blCharts.setOption(self.blChartsOption);
        // window.onresize = () => {
        //   this.blCharts.resize();
        // };
        window.addEventListener("resize", () => {
          this.blCharts.resize();
        });
      };
      var params = {
        object: {
          projectCode: self.$root.PRONAME,
          featureId: self.featureId
        }
      };
      return new Promise((resolve, reject) => {
        api
          .getFeatureValues(params)
          .then(response => {
            if (response.code == "0000") {
              let result = response.data;
              if (result) {
                handleResult(result);
              }
            }
          })
          .catch(error => {
            reject(error);
          });
      });
    }
  }

此方法需要被调用才能生效，一般会在mounted里面而不是created里面调用此方法，因为在mounted里面，DOM已经渲染完成，执行created时，DOM还没有渲染。

4.修改resize()方法

我们在用resize()方法时，如果用这种

window.onresize = () => {
	this.blCharts.resize();
};

效果是这样的，这种方法适合一个echarts图表的时候使用。

有两个echarts图表，但是只会生效一个

因此，我们需要用到这种方法

window.addEventListener("resize", () => {
	this.blCharts.resize();
});

这种方法的效果是这样的，放大缩小所有的echarts图表都同时变化。适合通过遍历出来的多个图表使用。