echarts的自适应问题（窗口自适应，侧边栏自适应，el-tab中的自适应）

一、echart的图表提供了一个resize函数，当resize函数被触发时，图表会进行重绘。

二、常用的浏览器，窗口自适应。
(1) 将放置图表的容器div的宽设置为100%，不固定写死，height可以根据需求设置为vh或者px都行。

(2) 对浏览器窗口大小进行监听

    window.addEventListener('resize', () => {
        this.mychart.resize() //当浏览器窗口大小发生变化时，图表可以进行自适应
    })

三、侧边栏收起或者打开导致的放置图表的容器div
利用vuex根据侧边栏的收起或者打开触发echart的resize方法

  computed: {
    ...mapState({
      isCollapse: state => state.common.isCollapse,
    }),
  },
  watch: {
    isCollapse (newVal, oldVal) {
      if(newVal != oldVal) {
        this.myChart && this.myChart.resize({animation: {duration:1000}});
      }
    }
  },

四、el-tab切换时图表自适应宽度会变成100px压缩不自适应。
原因是el-tab的时候，其他不显示的tab下的div此时的display为none，在点击tab切换时候，div还未渲染完成，图表在执行js初始化的时候找不到这个元素，所以自动将"100%"转成了"100"，最后计算出来的图表就成了100px。
1、解决方法:

<div id="hh" style="width:100%;height:400px;" v-if="activeName==='hh'"/>

2、解决方法:

<div id="hh" style="width:100%;height:400px;" :lazy='true'/> 

 

原文链接：https://segmentfault.com/a/1190000040581962