Echarts随屏幕改变自适应大小（注意是单个图表还是多个图表）

    这段代码在你的项目生效了吗？？？
    window.onresize = function () {
        myChart.resize();
    }

相信你在看到我这篇文章之前应该也看过其他文章了，应该看见别人说添加了以上代码就可以了，你也在你的项目中写了，但是未必有用。至于①这是啥，②为啥我用就不好使，③该怎么用，可能也不太清楚。下边是我的思考，带着问题读下去，希望对你有帮助。

做的图表显示都挺好 ，板板正正的

当我改变浏览器的宽度后，图表会有重叠的部分，说明浏览器宽度发生变化时，图表的尺寸没有跟着变化

按照上边的代码那样写的也无济于事，做不到自适应

听谁的也不如自己看官方文档：https://www.echartsjs.com/zh/api.html#echartsInstance.resize

************************************************文档内容顶部分割线****************************************************

echartsInstance.resize Function

(opts?: {
    width?: number|string,
    height?: number|string,
    silent?: boolean
}) => ECharts

改变图表尺寸，在容器大小发生改变时需要手动调用。

参数

• opts

  opts 可缺省。有下面几个可选项：

  • width

    可显式指定实例宽度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的宽度。

  • height

    可显式指定实例高度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的高度。

  • silent

    是否禁止抛出事件。默认为 false。

Tip: 有时候图表会放在多个标签页里，那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽，可能会绘制失败，因此在切换到该标签页时需要手动调用 resize 方法获取正确的高宽并且刷新画布，或者在 opts 中显示指定图表高宽。

**************************************************文档内容底部分割线********************************************************

①这是啥？？？

官方解释：resize改变图表尺寸，在容器大小发生改变时需要手动调用

我们可以理解成：在容器大小改变时（使用环境：浏览器尺寸发生变化时），手动调用resize（使用方法：调用resize），来改变图表尺寸（目的：解决自适应）

opts 可缺省，就是可以不指定参数具体数值使用默认值。

②为啥我用就不好使？？？

如果一个页面只有一个图表，那用文章开头的代码没有问题，至于像我一个页面有三个图表肯定是不会生效的

③到底该怎么用？？？

（1）一个页面只有一个图表

    window.onresize = function () {
       echarts.init(document.getElementById('myChart')).resize();
    }

（2）一个页面多个图表

window.addEventListener("resize",function (){
		echarts.init(document.getElementById('chartColumn')).resize();
		echarts.init(document.getElementById('chartLine')).resize();
		echarts.init(document.getElementById('chartPie')).resize();
});

如果有说的不对的地方各位批评指正，共同进步