echarts动态改变图表的大小

Posted 2023-03-27

参考技术A

本文同步发表于个人的 CSDN博客

echarts5 以上的版本，echarts容器支持直接设定百分比宽高，但是仍然会有低版本的一个问题，就是浏览器尺寸变动的时候，echarts容器不会响应式的变化。

为了解决这个问题，有了如下解决方案：

其中父元素一定要使用行内样式的方式设定宽高。

在处理echarts图表的时候，往往需要使用 window.onresize 来监听页面大小，从而进一步去改变echarts的大小，但是 resize 事件触发的频率极其频繁，如果页面的echarts图表又很多，这无疑是一件十分灾难的事情。

首先定义一个节流函数，需要接收一个函数，并且返回一个函数，示例如下：

原理很简单，就是使用 setTimeout 延迟执行，如果尚未执行完毕，则直接返回。

应用如下：

效果还是很明显的：

echarts生成的图表大小怎么随屏幕的大小改变自适应

echarts图表自适应屏幕大小，根据屏幕大小图表大小也随之改变。

在实际的应用中一个页面可能会有好几个Echarts图表，而使用window.onresize = option.chart.resize(),加载页面图表后，页面上只有一个图表会根据浏览器的变化而自适应。如果要是页面上的图表都要自适应。则需要将resize事件叠加在不同的图上面，使用一下代码可以实现。

具体的实现方法可以参照：

Echarts页面多图表大小自适应的解决办法

参考技术A 在setoption之后添加这段代码：window.onresize = myChart.resize;echarts生成的图表大小怎么随屏幕的大小改变自适应 参考技术B 在setoption之后添加这段代码：window.onresize = myChart.resize; 参考技术C 在setoption之后添加这段代码:window.onresize = myChart.resize;