記錄下vue 中引用echarts 出現 "TypeError: Cannot read property 'getAttribute' of undefined"問題

今天做項目，用echarts展示數據 ，自己測試 先測試 了下。寫的代碼html：

     <div ref="myChart" style="height:300px;width:100%"></div>

JS

  methods: {
    drawLine() {
      // 基於准備好的dom，初始化echarts實例
      let myChart = this.$echarts.init(this.$refs.myChart);
      // 繪制圖表
      myChart.setOption({
        title: { text: "在Vue中使用echarts" },
        tooltip: {},
        xAxis: {
          data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
        },
        yAxis: {},
        series: [
          {
            name: "銷量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      });
    }
  },
  mounted() {
    this.drawLine();
  }

結果報"TypeError: Cannot read property 'getAttribute' of undefined"的錯。。

百度了下，說是dom沒有加載完的問題，要放在this.$nextTick改成

  mounted() {
    this.$nextTick(() => {
      this.drawLine();
    });
  }

這樣可以了。

后來測試 了下，用vif控制 隱藏與顯示也是報這樣的錯。。vshow不會。

原理還是一樣吧，vif是dom不加載 的。vshow只是把dom display:none，還是加載了