技術標籤：前端學習echarts

echarts圖表定義在子元件中，父元件從後臺得到資料後再給子元件傳值。因為ajax請求是非同步的，執行順序為echarts繪製然後父元件才得到資料傳給echarts子元件，所以在echarts中不會渲染資料，因此我在子元件中用Watch來監聽父元件傳遞的值的變化。

  // 監聽獲取資料的變化
  @Watch("dataX")
  onDataXChange(newDataX: string[], oldDataX: string[]) {
    this.dataX = newDataX;
    this.drawChartLine();
  }
 

後臺返回的資料x軸為年份，y軸為數值，這個年份不是從打到小排列的

因此後來又提出了一個需求是要給x軸的年份排序，按從小到大展示

然後。。我就直接在配置option的時候給dataX排序了

xAxis: {
        type: "category",
        //排序
        data: this.dataX?.sort(function (a: PdCAny, b: PdCAny) {
          return a - b;
        }),
        boundaryGap: false,
        //座標軸名稱的樣式
        axisLabel: {
          color: "rgba(192,196,206)",
          fontSize: 12,
          fontFamily: "Microsoft YaHei UI",
          fontWeight: "400",
        },
        // 軸線樣式
        axisLine: {
          lineStyle: {
            color: "#FFFFFF",
          },
        },
        //不顯示x座標刻度
        axisTick: {
          show: false,
        },
      },
 

於是出現一個報錯“You may have an infinite update loop in watcher with expression”：

而且打包上傳到伺服器之後頁面直接卡死了！

為什麼會出現這個bug呢？原因如下：

首先dataX在created生命週期中獲取資料時也發生了變化，Watch監聽到後，就執行option操作，結果option中的dataX中的陣列進行了排序，然後watch監聽的dataX又發生變化，陷入了無限死迴圈中。

於是我在父元件中得到dataX的值後的資料之後就對這個陣列進行了排序，避免了死迴圈的錯誤。

總結：watch的資料不要隨意修改，不要在watch中改變所監聽的資料！~