2020-03-18 echart 自适应宽度两种方法

1.一个页面多个图表的自适应宽度可以用

注意：应写在多个图表的后面，不能一个一个写，会发生错误

//根据窗口的大小变动图表 
window.onresize = function(){
    myChart.resize();
    myChart1.resize();    //若有多个图表变动，可多写
 
}

2.若是一个页面的多个图表需要分别监听改变宽度的话用（可以一个一个写）

window.addEventListener("resize",function(){
     myChart.resize();
});

3.若是要自适应高度和宽度的话

首先你的初始div 必须有初始的高度和宽度（因为echart绘制需要宽和高）
需要写一个JavaScript方法去获取你当前div 的高度和宽度；
然后通过监听事件去监听你当前高度和宽度的变化
例如：

// es5
function fn(){//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
    //var height=$("#divID").height()
    //或
    var height=document.getElementById("divID").offsetHeight
    var width=document.getElementById("divID").offsetWidth
};
 
fn ();//设置容器高宽
 
//窗口大小发生了变化，代码：
//方法1
window.onresize = function () {//用于使chart自适的方法  
    fn ();//重置容器高宽
    myChart.resize();
}

//方法2

window.addEventListener("resize",function(){   //监听
    fn ();//重置容器高宽
    myChart.resize();
})

原文链接：https://blog.csdn.net/weixin_44897255/article/details/98598117