解决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,隐藏侧边栏后图表未自适应容器

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

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

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

解决办法 ：

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

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

2. 在你需要自适应图表的页面或组件中，去监听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)
    }
  },

个人博客：https://aeiherumuh10.cn/zeno-blog/