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