vue中动态生成echarts饼图加载数据失败

Question

vue中通过调用后台获取到List集合数据，前端通过变量接收，然后给data赋值，但是生成echarts饼图加载数据失败

mounted() {
    let myChart = echarts.init(document.getElementById(this.cli));
    var Xdata=[];
    this.http.post("/api/PurchTable/test").then(reslut=>{
      console.info(reslut);
      reslut.forEach((value, index) => {
        Xdata.push({
          name: value.name,
          value: value.value
        });
      });
    });
    console.info(Xdata);

    // 绘制图表
    myChart.setOption({
      title: {
        text: "Vue3从入门到放弃",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        top: 100,
        orient: "vertical",
        right: "10",
      },
      series: [
        {
          name: "访问来源",
          type: "pie",
          radius: ["40%", "75%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
          },
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "40",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data:Xdata,
          // data: [
          //   { value: 1048, name: "搜索引擎" },
          //   { value: 735, name: "直接访问" },
          //   { value: 580, name: "邮件营销" },
          //   { value: 484, name: "联盟广告" },
          //   { value: 300, name: "视频广告" },
          // ],
        },
      ],
    });

Answer 1

该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下：
在Vue中动态生成ECharts饼图并加载数据失败的原因可能是在mounted()钩子函数中，异步请求的数据还没有完全获取到，就已经开始设置图表的选项。为了解决这个问题，你可以将设置图表选项的操作放在asyncData()函数中，并在created()钩子函数中调用asyncData()函数。这样可以确保在设置图表选项时，异步请求的数据已经完全获取到。

修改后的代码如下：

export default {
  data() {
    return {
      myChart: null,
      Xdata: [],
    };
  },
  async mounted() {
    await this.asyncData();
  },
  methods: {
    async asyncData() {
      this.myChart = echarts.init(document.getElementById(this.cli));
      await this.http.post("/api/PurchTable/test").then((result) => {
        console.info(result);
        result.forEach((value, index) => {
          this.Xdata.push({
            name: value.name,
            value: value.value,
          });
        });
      });
      console.info(this.Xdata);

      // 绘制图表
      this.myChart.setOption({
        title: {
          text: "Vue3从入门到放弃",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: 100,
          orient: "vertical",
          right: "10",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["40%", "75%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.Xdata,
          },
        ],
      });
    },
  },
};

这样修改后，应该可以解决动态生成ECharts饼图加载数据失败的问题。

---

如果以上回答对您有所帮助，点击一下采纳该答案～谢谢