echarts實現頁面的響應式變化

echarts實現頁面的響應式變化

echarts圖表自己提供了一個resize函數,當瀏覽器頁面發生resize事件的時候,讓表格觸發echats的resize事件,而後重繪canvasvue

  • 頁面只有一個echarts圖表時,用window.onresize = myChart.resize;便可完成自適應
  • 當一個頁面有多個echarts圖表時,使用時間綁定方法addEvebtListener能夠解決
window.addEventListener("resize",()=>{
       this.myChart.resize();
       this.myChart2.resize(); 
       this.myChart3.resize();  
});    

在vue中使用響應式圖表,能夠直接對單獨的表格對象添加事件;canvas

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

myCharts2.setOption(option);
window.addEventListener("resize", () => { myCharts2.resize();});
相關文章
相關標籤/搜索