一个页面多个echarts时自适应失效,分两种情况
一是当前页面有多个echarts
,resize
失效,将上面的代码替换成下面的就可以了:
myChart.setOption(option);
window.onresize = myChart.resize;
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
二是,引了echarts
组件,循环展示了多个echarts
,子组件中的window.onresize
只获取到了最后一个echarts
,
需要在父页面引用的子组件上加上ref
,然后在父页面操作就可以了:
<EchartList :id ='"myEchart_"+index' :key='index' :list='list' ref='echartsName'></EchartList>
//vue页面 在mounted()里写
window.addEventListener('resize',()=>{
if(this.$refs && this.$refs.echartsName != undefined){
this.$refs.echartsName.map(v =>{
v.charts.resize();
})
}
})