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();});

你可能感兴趣的:(echarts实现页面的响应式变化)