echarts自适应

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了echarts自适应相关的知识,希望对你有一定的参考价值。

参考技术A

使用Echarts绘制图表时,可能会遇到变形的问题。如下图:
【变形图】
其原因是Echarts在初始化实例的时候,对应dom元素的宽高还没有确定。
解决方案也很简单:
监听对应dom元素,如果大小发生变化,调用 resize() 方法。

自适应是浏览器窗口变化的时候,echarts图表大小能够相应的变化。可通过监听浏览器窗口实现。

多个echarts图的话,则

个别时候,也会遇到 myChart1 与 myaChart2 不在同一个作用域内,如果多次调用 window.onresize() ,后一个将会覆盖掉前一个。如下:

这时,可以使用 window.addEventListener(\'resize\', callback) 来避免监听被覆盖:

当然,也可以跟最上面的处理一样,使用 ResizeObserver 分别监听对应dom元素,调用 resize() 解决。

参考:
ResizeObserver API : https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver

以上是关于echarts自适应的主要内容,如果未能解决你的问题,请参考以下文章

实现echarts图表自适应

echarts 视图自适应问题

eCharts 多个图表自适应窗口大小

Echarts中窗口自适应

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

vue 中使用 echarts 自适应问题