echarts实现页面的响应式变化

echarts实现页面的响应式变化

echarts图表本身提供了一个resize函数，当浏览器页面发生resize事件的时候，让表格触发echats的resize事件，然后重绘canvas

• 页面只有一个echarts图表时，用window.onresize = myChart.resize;即可完成自适应
• 当一个页面有多个echarts图表时，使用时间绑定方法addEvebtListener可以解决

window.addEventListener("resize",()=>{
       this.myChart.resize();
       this.myChart2.resize(); 
       this.myChart3.resize();  
});    

在vue中使用响应式图表，可以直接对单独的表格对象添加事件；

myCharts.setOption(option);
window.addEventListener("resize", () => { myCharts.resize();});

myCharts2.setOption(option);
window.addEventListener("resize", () => { myCharts2.resize();});

 

转载于:https://www.cnblogs.com/BR-Tao/p/11558517.html