echarts自适应的一种方法

今天没事干做了一下echarts自适应，不知道这个方案合不合适，但是自适应效果是实现了的，大概就是页面加载时绘制图表，使用window.onresize监听窗口大小的变化，窗口大小发生改变就重新执行绘制图表的方法，并传入一个 true参数 标识这是重绘，代码如下：

<div id="echartPanel" style="background-color: #a4f5aa "></div>//定义容器

  var echartPanel=document.getElementById("echartPanel");//获得容器
    var rates = ["1.52", "9.00", "3.03", "8.00", "3.03", "7.00", "0.00", "1.00", "0.00", "9.00", "0.00", "4.00", "0.00", "3.00", "20.00", "0.00", "6.00", "0.00", "4.00", "0.00", "0.00", "15.00"];//数据
    var projects = ["云南", "新疆", "四川", "北京", "陕西", "广东", "辽宁", "上海", "江西", "贵州", "内蒙古", "台湾", "河南", "福建", "浙江", "西藏", "甘肃", "陕西", "河北", "黑龙江", "湖南", "海南"];//坐标值

function drawChart(rate,projects,afresh) {          echartPanel.style.width = window.innerWidth+'px';//获取window的宽度
        echartPanel.style.height = window.innerHeight+'px';//获取window的高度          var myChart = echarts.init(echartPanel);//初始化地图

        if(afresh){
       //如果传入的afresh是true 表示 是重绘地图，在这里销毁掉原来的地图，重新初始化一个地图
            myChart.dispose();
            myChart = echarts.init(echartPanel);
        }

        var app = {};
        option = null;
        option = {
            animation: !afresh,//如果是重绘的地图 就关掉动画效果，这样就可以实现只在页面第一次加载的时候展示绘图动画
            tooltip : {
                trigger: 'axis',
                axisPointer : {           
                    type : 'shadow'       
                }
            },
            xAxis: {
            },
            yAxis: {
                type: 'category',
                data:projects

            },
            series: [{
                data: rates,
                type: 'bar'
            }]
        };
        ;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }

    } 

 drawChart(window.rate,window.projects,false);//页面加载时执行 画图函数  rate 和 projects是数据，false表示不重



 window.onresize=function(){
        // 监听div和屏幕的改变
        drawChart(window.rate,window.projects,true);//窗口变化   重新执行画图函数，true表示重绘地图
    } 

20190807更新

好吧 ,echart自带resize方法,,以下代码是在vue中:

this.chart = this.$echarts.init(this.$refs.chart);
this.chart.setOption(option);

window.onresize = () => {
  this.chart.resize();
}