移动端echarts图表的自适应使用

多个图表写法

<div id="main" style="width: 100%; height: 260px">div>

<div id="main2" style="width: 100%; height: 300px; margin-top: 20px">div>
1
2
3

import * as echarts from "echarts";
import { brokenLineOptions } from "./echarts/broken-line"; // 单独的option
import { barGraphOption } from "./echarts/bar-graph"; // 单独的option

// 多个图表的重绘要用事件监听，否则只会作用于最后一个图表
methods:{
	  // 图表一
	 initEahcrts() {
      // 基于准备好的dom，初始化echarts实例
      // 在data里面定义myChart，方便写图表重绘
      this.myChart = echarts.init(document.querySelector("#main"));
      // 绘制图表
      this.myChart.setOption(brokenLineOptions, true);
    },
    chartResize() {
      this.myChart.resize({
        width: document.querySelector("#main").getBoundingClientRect().width,
      });
    },
    //图表二： 折线图
    initBrokenLine() {
      this.myChart2 = echarts.init(document.getElementById("main2"));
      this.myChart2.setOption(barGraphOption);
    },
    chartResize2() {
      this.myChart2.resize({
        width: document.querySelector("#main2").getBoundingClientRect().width,
      });
    },
},
  mounted() {
    this.initEahcrts();
    this.initBrokenLine();
    window.addEventListener("resize", this.chartResize);
    window.addEventListener("resize", this.chartResize2);
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

重点：事件监听后要记得移除事件，因为是绑定在window上的

// 添加了监听事件记得要销毁
  beforeDestroy() {
    window.removeEventListener("resize", this.chartResize);
    window.removeEventListener("resize", this.chartResize2);
  },
1
2
3
4
5