ECharts饼图从数据库中取出数据

Question

我想做一个饼图，请问需要想从数据库中取出itemname和numbers放入饼图中，应该写几个实体存数据呢？饼图哪里需要放数据呢？
我从后台取出物资信息及饼图的代码如下：

methods: {
    async getStockList() {
      const {data: res} = await this.$http.get("allStock", {params: this.queryInfo});
      this.stockList = res.data;//用户列表
      this.total = res.numbers;//总用户数
}

getEchartData2(){
      var myChart = echarts.init(document.getElementById("bingtu"));
      var option = {
        title: {
          text: '库存占比图',
          left: 'left'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {//图示
          orient: 'vertical',
          left: 'right',
          right: 10,
          top: 20,
          bottom: 20,
      
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: "55%",
            center: ["40%", "50%"],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
          myChart.setOption(option);
    }

Answer 1

参考GPT和自己的思路：对于从数据库中取出的itemname和numbers放入饼图中的问题，你只需要定义一个存放数据的数组即可。在getStockList()方法中，将从数据库中取出的itemname和numbers存入该数组中。然后在getEchartData2()方法中的series中，将该数组赋值给data属性即可将数据放入饼图中。

具体代码实现如下：

data() {
  return {
    stockData: []  //存放itemname和numbers的数组
  }
},
methods: {
  async getStockList() {
    const {data: res} = await this.$http.get("allStock", {params: this.queryInfo});
    this.stockList = res.data;  //用户列表
    this.total = res.numbers;  //总用户数
    // 将itemname和numbers存入stockData数组中
    this.stockList.forEach(item => {
      this.stockData.push({
        name: item.itemname,
        value: item.numbers
      });
    });
  },
  getEchartData2() {
    var myChart = echarts.init(document.getElementById("bingtu"));
    var option = {
      title: {
        text: '库存占比图',
        left: 'left'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {// 图示
        orient: 'vertical',
        left: 'right',
        right: 10,
        top: 20,
        bottom: 20,
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: "55%",
          center: ["40%", "50%"],
          data: this.stockData,  //将stockData数组赋值给data属性
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    myChart.setOption(option);
  }
}