echarts大小自适应，width=100%实际100px的问题

1. echarts大小自适应

1. 首先要在data中定义一个为null的空值，用来保存你实例化图表的对象

  data() {
    return {
      // echarts图表
      myCharts: null,
      // 获取网页可见区域宽
      screenWidth: document.body.clientWidth,
    };
  },

2. 在mounted生命周期中定义新的onresize函数，获取当前的窗口大小，并将值赋值给data中定义的screenWidth，这样在watch中就可以监听到屏幕宽度的变化

  mounted() {
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        this.screenWidth = window.screenWidth;
      })();
    };
  },

3. 在watch中监听浏览器屏幕宽度的变化，改变时，使echarts图表resize

也可以在进行其他操作时，重新改变图形的大小

  watch: {
    '$store.state.app.sidebar.opened'() {
      setTimeout(() => {
        // 避免第一次进入页面中，图标没有初始化，人后resize报错的问题
        this.myCharts && this.myCharts.resize();
      }, 300);
    },
    screenWidth: {
      immediate: true,
      handler: function(val) {
        this.screenWidth = val;
        setTimeout(() => {
          // 避免第一次进入页面中，图标没有初始化，人后resize报错的问题
          this.myCharts && this.myCharts.resize();
        }, 300);
      },
    },
  },

2. width=100%实际100px的问题

这个原因是因为图形尚未被加载出来，不知道父元素的宽高，一般出现这种问题是因为，设置了v-show或者tab页，echarts图表在没有显示的tab页里

这种使用一般使用$nextTick，dom元素加载完成后再进行图表初始化

        this.$nextTick(() => {
          // 初始化echarts图表
          this.initCharts();
        });