解决Echarts 隐藏再显示后宽度高度变小的问题

问题：很多时候会用到把echarts图放在弹框内。点击后显示弹框出现图表，但是这样会遇到问题就是打开弹框的时候图表会缩的非常小挤在一块。
原因：是因为echarts根据父级盒子大小来渲染图表，但是因为你隐藏了盒子，所以echarts检索不到父级宽高，然后就导致默认给自己了一个很小的宽高，就会挤在一块。

解决办法

所以我们也就顺着这个原因解决，那就再他弹框出来后从新获取一下他的宽高从新渲染一下不就好了吗。
这里就是注意再myChart初始化后直接先resize来构图一遍，这样就保证了每次调用这个方法都会在初始化后先获取宽高然后才给数据渲染图表

    topGraph(val) {
      var myChart = this.$echarts.init(this.$refs["topechart"]);
      //这是重点，就是在元素绑定后直接resize一下，获取宽高从新渲染一遍。
      myChart.resize();
      var option = {
        title: {
          text: "波形趋势",
          left: "center",
          top: 0,
          bottom: "auto",
          textVerticalAlign: "auto",
          padding: [0, 0, 0, 0],
        },
        //全部颜色为黑
        color: "#222",
        grid: {
          left: "3%",
          right: "4%",
          top: "20%",
          bottom: 0,
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          //X轴刻度信息
          data: this.xData,
          axisLabel: {
            show: true,
            interale: 0, //坐标轴刻度标签的显示间隔,设置成 0 强制显示所有标签
            rotate: 40, //设置日期显示样式（倾斜度)
            showMaxLabel: true,
          },
        yAxis: [
          {
            type: "value",
          },
        ],
        series: val.pointList,
      };
      //初始化表格
      myChart.clear();
      myChart.setOption(option);
      //监听，根据视口变化动态从新渲染表格
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },