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