怎么设置echarts的大小（Echarts图表自适应？你可以这样做）

一 
    
    
    
、图表变形

使用 Echarts 绘制图表时 
    
    
    
，可能会遇到变形的问题    
    
    
    
。如下图：

其原因是 Echarts 在初始化实例的时候
     


     


     


     ，对应 dom 元素的宽高还没有确定  


     


     


     


。

解决方案也很简单： 监听对应 dom 元素 




 




 




 



，如果大小发生变化 

   

   

   

，调用resize()方法


 




 




 




 。

import echarts from echarts;...const chartDom = document.getElementById(myChart);let myChart = echarts.init(chartDom);// 若dom尺寸变化
     

     

     

    ，则resizeconst chartObserver = new ResizeObserver(() => {    myChart.resize();});chartObserver.observe(chartDom);

二
     


     


     


     、自适应解决方案

自适应是浏览器窗口变化的时候  




  




  




  


，echarts 图表大小能够相应的变化   

   

   

   
。可通过监听浏览器窗口实现   

     

     

     

。

window.onresize = () => {    myChart.resize();}

多个 echarts 图的话 


  


  


  


，则

window.onresize = () => {    myChart1.resize();    myChart2.resize();}

个别时候
     
     
     
   ，也会遇到myChart1与myaChart2不在同一个作用域内   




   




   




   

，如果多次调用window.onresize() 



 



 



 



，后一个将会覆盖掉前一个



  




  




  




 。如下：

window.onresize = () => {    myChart1.resize();}...// 后一个执行的代码会覆盖掉前一个window监听window.onresize = () => {    myChart2.resize();}

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

window.addEventListener(resize, () => {    myChart1.resize();}, false); // false代表事件句柄在冒泡阶段执行...window.addEventListener(resize, () => {    myChart2.resize();}, false);

当然
    




    




    




    
，也可以跟最上面的处理一样



















，使用ResizeObserver分别监听对应 dom 元素                 ，调用resize()解决  


  


  


  
。

「参考资料：」

「ResizeObserver API」：https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver

本文由 mdnice 多平台发布