echart折線圖異常多出一條連線線

YJUI發表於2023-02-27

 

開發背景：vue3父傳子，父中調子元件echarts圖表

問題：第一次進入資料圖表正常，再次進入不更新圖表資料的情況下，圖表異常多出來一條開始到結尾的連線線

原因：上次資料沒清空

解決：請求完介面後先清空資料，在往父傳子push圖表值

date.value = [];//圖表X軸日期
arr1.value.length = 0;//圖表資料1
arr2.value.length = 0;//圖表資料2

　　

<!-- 父元件傳給子傳值 -->
<fundEcharts v-if="$utils.getVarType.isObjEmpty(fatherToSonData.trendObj)" :dataObj="fatherToSonData.trendObj" id="trendEcharts"></fundEcharts>子

子元件接收

const props = defineProps({
  dataObj: { type: Object},
  id: { type: String},
});
watch(
  props.dataObj,(n, o) => {
    //重新繪製echarts
    charts.value.clear();
    console.log('props.dataObj:', props.dataObj);
    nextTick(() => {
      showChart(true);
    });
  },
  { deep: true },
);

 

 

把watch接收到的資料打出來看看，發現資料疊加了，

 

所以得到結論，主要這句話：

date.value = [];//圖表X軸日期
arr1.value.length = 0;//圖表資料1
arr2.value.length = 0;//圖表資料2

 

相關文章