echarts控制檯報錯和100px寬度問題

起因echarts的父元素沒有寬高或者設定了v-show;

解決思路

• 父元素沒有寬高或者
  需要在mounted鉤子中開始繪製(這個時候Dom已渲染);
  或者使用this.nextTick(()=>{console.log('需要做的操作')});
• v-show問題

  // v-show改用v-if, 在watch監聽資料變化加入nextTick();
  watch: {
    pieData: {
      deep: true,
      handler(val) {
        if (val) {
          this.$nextTick(function() {
            this.getData();
          });
        }
      },
    },
  },
   
  

資料為空時圖表不清空和螢幕大小發生變化不重繪

解決思路

• 資料為空之後需要清空資料使用echartDom.clear();

  if (dataY.length) {
    this.chartsDom.setOption(option);
  } else {
    this.chartsDom.clear();
  }
  

• mounted中新增瀏覽器寬高變化resize事件監聽

  mounted() {
    // 不建議使用普通事件 因為普通事件有且只能生效一個 所以會被改寫覆蓋 請使用事件監聽
    // window.onresize = () => this.chartsDom ? this.chartsDom.resize() : '';
    // 使用事件監聽
    window.addEventListener('resize', () =>
      this.chartsDom ? this.chartsDom.resize() : ''
    );
  }