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

轉 載https://blog.csdn.net/qq6759/article/details/95632822

 

echarts多個圖表大小隨屏幕的大小改變自適應，Echarts 多圖表自適應窗口大小，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();
    }