一个页面多个echarts时自适应失效

吃糖牙疼

于 2020-05-29 14:15:40 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue echarts 文章标签：前端

本文链接：https://blog.csdn.net/weixin_43997143/article/details/106424250

vue 同时被 2 个专栏收录

20 篇文章

订阅专栏

echarts

6 篇文章

订阅专栏

本文详细介绍了在页面中使用多个ECharts实例时遇到的自适应问题，并提供了两种有效的解决策略。一种适用于直接在页面中展示多个图表的情况，另一种则针对通过组件循环展示多个ECharts的情形。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个页面多个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();
         })
     }
 })