echarts 图表随窗口变化而变化

很多情况下，使用echarts进行统计图制作时需要做自适应效果，能够随着窗口的大小而变化大小。但是统计图比例并没有随窗口大小改变而自动调整到最佳视觉效果，如

造成这个的原因：echarts的图表实例事实上并没有主动的去绑定resize()事件，就是说显示区域大小发生改变内部并不知道，当你需要去做一些自适应的效果的时候，需要使用方主动的去绑定这个事件达到自适应的效果，加上以下代码便可解决。

  $(window).resize(function(){
            myChart.resize();
        })

或者

window.onresize = function(){
    myChart.resize();
    //myChart1.resize();    //若有多个图表变动，可多写

}

如：

        let option = {
            title: {
                x: 'left',
                y: 'top',
                // text: '单位：万元',
                textStyle: {
                    color: '#fff',
                    fontSize: 14,
                    fontWeight: 'normal'
                }
            },
            tooltip: {
                trigger: 'axis',
                formatter: '{b}:{c} 万元'
            },
            toolbox: {
                show: false,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            grid: {
                left: '19%',
            },
            calculable: true,
            xAxis: [
                {
                    type: 'value',
                    name: 'GDP',
                    boundaryGap: [0, 0.01],
                    axisLine: {
                        lineStyle: {
                            type: 'solid',
                            color: '#fff',//左边线的颜色
                            width: '1'//坐标线的宽度
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff',//坐标值得具体的颜色

                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'category',
                    name: '区域',
                    axisLine: {
                        lineStyle: {
                            type: 'solid',
                            color: '#fff',//左边线的颜色
                            width: '1'//坐标线的宽度
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff',//坐标值得具体的颜色

                        }
                    },
                    data: data1
                }
            ],
            series: [
                {
                    type: 'bar',
                    data: data2,
                    itemStyle: {
                        normal: {
                            color: '#00b8ee'
                        }
                    },
                }
            ]
        }

        var myChart = echarts.init(document.getElementById("gdp_fx"));
        myChart.setOption(option);

        $(window).resize(function(){
            myChart.resize();
        })