echarts.js图表宽度自适应的问题

echarts.js的官方文档，找到了这一句

window.onresize = myChart.resize;   

多个图标可以这样写：

window.onresize = () => {
    this.myChart.resize()
    this.myChart1.resize()
}

加上去，就可以自适应了，就是把window的onresize事件赋值为echart的resize事件。触发echart的resize事件，重绘canvas，即重绘图表。总之，当echarts容器大小改变时，若需要echarts图表大小改变，就需要调用echarts的resize事件。

 

当然了，针对一个页面有多个图表，这种原生js 的window.onresize 只能生效最后一个，那就加个jQuery吧

$(window).resize(function() {
    myChart.resize();
    myChart1.resize();
});

或者：

window.addEventListener("resize", () => { 
    this.myChart.resize();  
    this.myChart1.resize();  
    this.myChart2.resize();
})

以上参考：