echarts自适应的一种方法

Daming 2018-07-24
0条评论 1,083 次浏览
Daming 2018-07-240条评论 1,083 次浏览

今天没事干做了一下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();
}
1+

发表评论

电子邮件地址不会被公开。