解决echarts自适应问题

原创已于 2023-02-01 09:53:01 修改 · 1w 阅读

37 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

echarts

于 2021-02-19 09:21:30 首次发布

本文详细介绍了如何在Vue项目中解决ECharts图表的自适应问题，包括单图表和多图表场景，并重点讲述了如何通过Vuex管理侧边栏隐藏状态，确保图表在容器大小变化时动态调整。阅读者将学会如何配合Vue、Element UI和ECharts实现图表的响应式设计。

解决echarts自适应问题

在vue项目中是用echarts生成图表，基本配置之后也出现了，可现在的网页基本都是自适应的，而echarts图表只生成了一次，无法自适应，需要刷新才能重新渲染图表。

单图表自适应：

第一次进入很正常

在这里插入图片描述

屏幕缩小之后，发现没有显示完整

在这里插入图片描述

解决办法 ：

echart图表本身是提供了一个resize的函数的

// 使用刚指定的配置项和数据显示图表。
var myChart = echarts.init(document.getElementById("main"));
myChart.setOption(this.option);
window.onresize = myChart.resize;

多图表自适应：

在很多时候，我们一个页面中不只是有一张图表，可能要显示很多图表，并且也需要自适应

var myChart = echarts.init(document.getElementById("main"));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(this.option);

var myChartr = echarts.init(document.getElementById("mainr"));
// 使用刚指定的配置项和数据显示图表。
myChartr.setOption(this.optionr);

var myChartd = echarts.init(document.getElementById("maind"));
// 使用刚指定的配置项和数据显示图表。
myChartd.setOption(this.optiond);

window.addEventListener("resize",function(){
   myChart.resize();
   myChartr.resize();
   myChartd.resize();
});

vue+elementui+echarts,隐藏侧边栏后图表未自适应容器

前两种方法，在窗口发生变化后会自适应，但是没有自适应容器

没有隐藏侧边栏时，图表正常显示

在这里插入图片描述

隐藏侧边栏后，图表没有自适应容器

在这里插入图片描述

解决办法 ：

把侧边栏隐藏的状态存起来，vuex或者其他地方，我这里存放到vuex中

//展开和收缩
toggleCollapse(){
    this.isCollapse=!this.isCollapse
    // 存到Vuex中
    this.$store.dispatch("setIsCollapse", this.isCollapse);
},

在你需要自适应图表的页面或组件中，去监听vuex中的值，如果侧边栏的状态（隐藏或显示）改变，那么就重新渲染echarts图表

watch:{
    '$store.getters.getIsCollapse'(value){
      console.log(value)
        setTimeout(() => {
          var myChart = echarts.init(document.getElementById("main"));
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(this.option);
          myChart.resize();
        }, 0)
    }
  },