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