Echarts图表变形与自适应解决方案
展开全部
使用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
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
东莞大凡
2024-08-07 广告
在东莞市大凡光学科技有限公司，我们利用Halcon软件处理机器视觉项目时，会用到自定义标定板以满足特定需求。Halcon支持用户根据实际应用场景自定义标定板形状与标记点。这不仅可以灵活应对不同工作环境，还能提高标定精度。通过调整圆点数量、间...
点击进入详情页
本回答由东莞大凡提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
