Echarts 如何设置图表自适应窗口大小

一、单个图表自适应窗口大小

原理：利用echarts中的resize函数
这里我的echarts 是绑定到了vue的data对象中,所以是this.chart
如果没有挂在到vue上 就正常写就完事了（懂的都懂，O(∩_∩)O哈哈~）

// 获取echarts对象
this.chart = echarts.init(this.$el, "macarons");

// 设置echarts属性（省略了）
this.chart.setOption({......})

//  重点：当窗口或者大小发生改变时执行resize，重新绘制图表 
window.onresize = this.chart.resize;

亲测，好使！！！！

二、多个图表自适应窗口大小

重点来了！！！
直接上代码，奥利给！

// 获取echarts对象
this.chart = echarts.init(this.$el, "macarons");

// 设置echarts属性（省略了）
this.chart.setOption({......})

// 保存this-----addEventListener中的function 的this指向发生了变更，所以我需要保存一下this
let that = this

//  当窗口或者大小发生改变时执行resize，重新绘制图表
window.addEventListener("resize", function () {
  that.chart.resize();
});

简单解释下原理，通过设置监听事件，监听resize事件，当其发生变化后执行echarts对象中的resize()。
代码的语义还是很简单的，我这里是将echarts对象挂载到了data中才出现的that.chart。
别懵，和你正常let myChart = this.$echarts.init(this.$el, "macarons");是一毛一样的，就是写法不同。

又是奥利给的一天，冲鸭！