vue3封裝echarts圖表數(shù)據(jù)無法渲染到頁面問題

更新時間：2024年09月07日 14:48:47 作者：Asus.Blogs

這篇文章主要介紹了vue3封裝echarts圖表數(shù)據(jù)無法渲染到頁面問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue3封裝echarts圖表數(shù)據(jù)無法渲染到頁面

問題是后端的數(shù)據(jù)已經(jīng)成功返回到前端了，但是Echarts圖表一直不能被渲染，卡了一個多小時，最后問gpt才解決（gptyyds！?。。?/p>

 methods: {
    loadGet() {
      this.$axios.get(this.$httpUrl + '/goods/count').then(res => res.data).then(res => {
        console.log(res)
        // this.cntdata = res.data
        if (res.code == 200) {
          // this.yData = res.data
          // this.cntData.length=0;
          for (let i = 0; i < res.data.length; i++) {
            this.cntData.push(res.data[i]);
          }
          console.log("data = =" + this.cntData + res.data.length)
          this.$message({
            message: '操作成功！',
            type: 'success'
          });
        } else {
          this.$message({
            message: '操作失?。?,
            type: 'error'
          });
        }

      })
    },
    init() { //調(diào)用session中的用戶數(shù)據(jù)
      this.user = JSON.parse(sessionStorage.getItem('CurUser'))
    },
    initEcharts() {
      let option = {
        title: {
          text: "現(xiàn)存物資量"
        },
        tooltip: {},
        legend: {
          data: [""]
        },
        xAxis: {
          data: ["鼠標", "帳篷", "鍵盤", "口罩", "礦泉水", "棉被"]
        },
        yAxis: {},
        series: [
          {
            name: "發(fā)放量",
            type: "bar", //類型為柱狀圖
            // data: [5, 20, 36, 10, 10, 20]
            data: this.cntData  //問題出在這 data一直不能被后端返回的this.cntData渲染！
          }
        ]
      };
      const myChart = echarts.init(this.$refs.mychart);// 圖標初始化

      myChart.setOption(option);// 渲染頁面
      //隨著屏幕大小調(diào)節(jié)圖表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
  created() {
    this.init()
  }
}
</script>

原文

我：這份代碼中ECharts圖標中的 series 中的data無法被后端傳來的數(shù)據(jù)渲染怎么辦
gpt：在你提供的代碼中，ECharts 圖表的數(shù)據(jù)被初始化為 this.cntData，但 this.cntData 在組件創(chuàng)建時是一個空數(shù)組。要使圖表能夠根據(jù)后端傳來的數(shù)據(jù)進行渲染，你需要確保在數(shù)據(jù)加載完成后再初始化圖表。
為了實現(xiàn)這一點，你可以在 loadGet 方法成功獲取數(shù)據(jù)后調(diào)用 initEcharts 方法來初始化圖表。這確保了數(shù)據(jù)已經(jīng)準備好并且可以在圖表中使用。

下面是修改后的代碼片段：

methods: {
  loadGet() {
    this.$axios.get(this.$httpUrl + '/goods/count').then(res => res.data).then(res => {
      console.log(res);
      if (res.code === 200) {
        this.cntData = res.data; // 將數(shù)據(jù)賦值給 cntData
        this.initEcharts(); // 初始化圖表 !!!!!!這里！
        this.$message({
          message: '操作成功！',
          type: 'success'
        });
      } else {
        this.$message({
          message: '操作失?。?,
          type: 'error'
        });
      }
    });
  },
  initEcharts() {
    let option = {
      // ... 其余圖表配置 ...
      series: [
        {
          name: "發(fā)放量",
          type: "bar", //類型為柱狀圖
          data: this.cntData // 使用從后端獲取的數(shù)據(jù)
        }
      ]
    };
    const myChart = echarts.init(this.$refs.mychart);
    myChart.setOption(option);
    window.addEventListener("resize", () => {
      myChart.resize();
    });
  },
  // ... 其他方法 ...
},

我：其中的mounted方法是先于beforeMount運行的嗎

gpt：不對，beforeMount 方法在 mounted 方法之前執(zhí)行。

Vue.js 生命周期中的順序是如下的：

beforeCreate：在實例初始化之后，數(shù)據(jù)觀測 (data observation) 和事件配置 (event/watcher setup) 之前被調(diào)用。這時實例還沒有初始化完成，數(shù)據(jù)和事件方法尚不可用。
created：在實例創(chuàng)建完成后被立即調(diào)用。在這一步，實例已完成以下的配置：數(shù)據(jù)觀測(data observation)，屬性和方法的運算，watch/event事件回調(diào)。然而，掛載階段還沒開始，DOM 元素也還沒有被創(chuàng)建。
beforeMount：在掛載開始之前被調(diào)用：相關的 render 函數(shù)首次被調(diào)用。
mounted：el 被新創(chuàng)建的 vm.$el 替換，并掛載到實例上去之后調(diào)用該鉤子。

所以，beforeMount 在 mounted 之前執(zhí)行，它們分別位于 Vue 實例生命周期的不同階段。

–沒看懂。。。。

我：那為什么this.cntData不能去填充圖標的data

gpt：問題可能是由于異步操作的原因。在你的代碼中，loadGet 方法通過異步請求從后端獲取數(shù)據(jù)，并在獲取數(shù)據(jù)后調(diào)用initEcharts 方法。然而，由于異步請求的性質，initEcharts 方法可能在數(shù)據(jù)還沒有獲取到時就被調(diào)用了，導致 this.cntData 仍然是空數(shù)組。

要解決這個問題，你可以確保在數(shù)據(jù)成功獲取后再調(diào)用 initEcharts 方法。你已經(jīng)在 loadGet

方法中進行了這個調(diào)用，但是需要注意確保數(shù)據(jù)獲取成功后才執(zhí)行這個調(diào)用。

看懂了好像…