echarts图表自适应设置

项目开发过程中,出现了图表无法自适应的问题,侧边栏的展开与收缩都会引起页面宽度的变化,而echarts图表却没有发生改变,之后发现在页面大小宽度产生变化后,通过重新加载框架,可以让图表符合当前页面宽度,所以需要每当页面大小宽度发生改变后(我这里发生变化的原因是侧边栏)让图表重新加载以此来适应页面宽度变化

//在mounted中
window.onresize = function(){  
//使用window.onresize来监听页面大小的改变
document.getElementById('targetChart3').innerHTML = " ";
//每次加载如果数据不变，则图表不变化,所以需要清空图表
this.getTargetChart3();
//调用方法
}

//在getTargetChart3()方法中
//增加  document.getElementById("id").removeAttribute("_echarts_instance_");
//在    echarts.init(document.getElementById("id"));  前

完成这些后,效果为:
当侧边栏收缩,页面宽度变大时,图表不变,
当侧边栏展开,页面宽度缩小时,图表放大,
当侧边栏再次收缩,页面宽度变大时,图表缩小
与预期相反,原因是监听到页面宽度变化后,图表先加载,页面宽度后变化,导致宽度变化后所展示出的图表是宽度变化前的图表
所以需要改善我们的代码,很简单,加一个延时器

//在mounted中
window.onresize = function(){  
//使用window.onresize来监听页面大小的改变\
setTimeout(function(){
document.getElementById('targetChart3').innerHTML = " ";
//每次加载如果数据不变，则图表不变化,所以需要清空图表
this.getTargetChart3();
//调用方法
},100);   //延时后加载
}

加入延时后即可达成所需效果:
当侧边栏收缩,页面宽度变大时,图表变大,
当侧边栏展开,页面宽度缩小时,图表缩小

参考博文亲测有效，echarts刷新图表，清空图表数据
参考博文js延时函数–setTimeout

Echarts,他要求在容器上以行内样式固定宽高。这就无法按照浏览器大小进行自适应调整。经过一番纠结发现了解决方法,就是在以上方法后对Echarts的容器进行宽高百分比设置,竟然可以实现图表的自适应效果

使用 innerHTML = " " 会对内容产生破坏
推荐使用 dispose() 方法

this.chart1 = echarts.init(document.getElementById('targetChart1'));
if(this.chart1)this.chart.dispose();
setTimeout(function(){
this.getTargetChart1();//调用方法
},100);   //延时后加载

来源：CSDN

作者：WangShuoQing

链接：https://blog.csdn.net/WangShuoQing/article/details/103876023

标签

自适应