多个图表写法
<div id="main" style="width: 100%; height: 260px"></div>
<div id="main2" style="width: 100%; height: 300px; margin-top: 20px"></div>
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);
},
重点:事件监听后要记得移除事件,因为是绑定在window上的
// 添加了监听事件记得要销毁
beforeDestroy() {
window.removeEventListener("resize", this.chartResize);
window.removeEventListener("resize", this.chartResize2);
},