使用v-show控制Echarts模块显隐导致宽度无法控制

1.需要做一个页面，里面有多个模块，根据type值的不同来控制显示哪个模块。其中有一个模块包含了Echarts图，但是这个模块使用v-show，会出现一个问题，就是Echarts图的宽会变的特别窄，class无法控制。

2.解决办法：在绘制折线图的方法内包裹一层 this.$nextTick(() => {里面是绘制的Echarts代码}，加上这句话，Echarts就显示正常了

3.nextTick是啥？nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后立即使用 $nextTick，则可以在回调中获取更新后的 DOM。

我的理解就是nextTick方法相当于当页面渲染结束的使用再调用nextTick方法，nextTick方法能获取页面最新的dom元素

   InitEcharts () {
      this.$nextTick(() => {
        //  绘制echarts
        // let _this = this;
        let chartDom = document.getElementById("myEcharts");
        let myChart = echarts.init(chartDom);
        var data = {
          year: ['06-01', '06-02', '06-03', '06-04', '06-05'],
          legend: ['小菜蛾', '菜青虫', '菜蚜'],
          color: ['rgb(44,232,147)', 'rgb(44,160,250)', 'rgb(128,97,241)'],
          data: [
            [2, 5, 6, 9, 4], // 原材料
            [6, 12, 20, 37, 14.0,],
            [6.0, 8.0, 9.0, 30, 5.0],
          ]
        }
        var option = {
          // backgroundColor: "#000518",
          color: data.color,
          legend: {
            top: 10,
            textStyle: {
              fontSize: 14,
              color: 'rgb(255,255,255)',
              padding: [3, 0, 0, 0]
            },
            data: data.legend
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              label: {
                show: true,
                color: '#556677',
                borderColor: 'rgba(0,0,0,0)',
                shadowColor: 'rgba(0,0,0,0)',
                shadowOffsetY: 0
              },
              lineStyle: {
                width: 0,
              }
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '4%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              color: 'rgb(66,214,255)'
            },
            axisLine: {
              lineStyle: {
                color: 'rgb(66,214,255)'
              },
              width: 5
            },
            axisTick: {
              show: false,
            },
            data: data.year
          },
          yAxis: {
            type: 'value',
            name: '单位：/只',
            axisLabel: {
              color: 'rgb(28,225,255)'
            },
            axisLine: {
              lineStyle: {
                color: 'rgb(255,255,255)'
              },
              width: 5
            },

            axisTick: {
              show: false,
            },
            splitLine: {
              // show:false,
              lineStyle: {
                color: 'rgb(66,214,255)'
              }
            },
          },
          series: []
        };
        for (var i = 0; i < data.legend.length; i++) {
          option.series.push({
            name: data.legend[i],
            type: 'line',
            stack: '总量',
            symbolSize: 8,
            // symbol: 'circle',
            smooth: false, // 圆滑
            lineStyle: {
              width: 3,
              shadowColor: 'rgba(158,135,255, 0.3)',
              shadowBlur: 1,
              shadowOffsetY: 1
            },
            data: data.data[i],
          })
        }
        // myChart.setOption(option);
        option && myChart.setOption(option);
        window.onresize = myChart.resize;
      })

    },