echarts 隨屏幕大小改變大小(resize)

echarts多個圖表大小隨屏幕的大小改變自適應，Echarts 多圖表自適應窗口大小，echarts隨頁面大小變化而變化；

今天在做雲監控（Dashboard）時發現 Echarts 同一頁面存在多個圖表的時候，只有一個生效

當頁面只有一個圖表的時候直接用 window.onresize = myChart.resize 就可以了

resize 用來改變圖表尺寸，在容器大小發生改變時需要手動調用。

var myChart = echarts.init(document.getElementById('main'));

// 指定圖表的配置項和數據
var option={title:{text:'ECharts 入門示例'},tooltip:{},legend:{data:['銷量']},xAxis:{data:["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]},yAxis:{},series:[{name:'銷量',type:'bar',data:[5,20,36,10,10,20]}]};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
window.onresize = myChart.resize;

但是如果一個頁面有多個圖表的時候就需要用到 addEventListener 了，不然頁面上只有一個圖表會根據瀏覽器的變化而自適應。

var myChart = echarts.init(document.getElementById('main'));
var myChartA = echarts.init(document.getElementById('mainA'));
var myChartB = echarts.init(document.getElementById('mainB'));
// 指定圖表的配置項和數據
var option={title:{text:'ECharts 入門示例'},tooltip:{},legend:{data:['銷量']},xAxis:{data:["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]},yAxis:{},series:[{name:'銷量',type:'bar',data:[5,20,36,10,10,20]}]};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
myChartA.setOption(option);
myChartB.setOption(option);

window.addEventListener("resize",function (){
    myChart.resize();
    myChartA.resize();
    myChartB.resize();
});

或者

window.onresize = function(){
    myChart.resize();
    myChartA.resize();
    myChartB.resize();
}

 

相關

---

echarts 不顯示,tab切換重新渲染Echarts

echarts查看版本