echarts 图表大小随窗口变动而自适应变动（无需刷新浏览器调整）

问题提出：

使用echars做完图表之后，需要根据浏览器窗口的缩放做自适应效果。

原因分析及解决方案：

echars的图标实例事实上并没有主动的去绑定resize()事件，就是说显示区域的大小改变内部并不知道，当你需要去做一些自适应的效果的时候，需要主动绑定这个时间才能达到自使用的效果，常见的如window.onresize = myChart.resize()

示例：

var map5 = echarts.init(document.getElementById('map5'));
    var option5 = {
        backgroundColor: '#def1f9',
        color: ['#c23531', '#1875ff'],
        title: {
            left: 10,
            top: 10,
            text: 'Bill charts for the past year'
        },
        // color: ['#1875ff', '#1fe6ab', '#eee119', '#ff3074', '#6f99d9'],
        legend: {
            top: 30,
            right: 30
        },
        tooltip: {},

        xAxis: {type: 'category'},
        yAxis: {},
        series: [
            {type: 'bar'},
            {type: 'bar'}
        ]
    }
    map5.setOption(option5);
   

    window.onresize = function () {
        setTimeout(function () {  
            map1.resize()
            map2.resize()
            map3.resize()
            map4.resize()
            map5.resize()
        },10)
    }

重点：

window.onresize = function () {

      map1.resize() ; // 如果有多个图标变动，可写多个

}

 

参考博客：

https://blog.csdn.net/TionSu/article/details/78039045

https://blog.csdn.net/qq_38382380/article/details/80460729

详细参数请参考echarts官方文档对resize事件的说明：

http://echarts.baidu.com/echarts2/doc/doc.html#实例方法