ECharts怎么取出数据库的数据

Question

我想取出数据库中的itemname和numbers放到x,y轴，请问应该怎么改呢？这是我现在的代码：

data() {
      xData: [],
      yData: [],

    }
  },


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

    },
}

getEchartData() {
      var myChart = echarts.init(document.getElementById('tiaoxing'));
      let option = {
        title: {
          text: "库存条形图"
        },
        xAxis: {

          data: this.xData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.yData,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }
      myChart.setOption(option);
    },
  }

 mounted() {
    this.getEchartData();
  },

Answer 1

参考GPT和自己的思路：根据你提供的代码，我看到你已经从数据库中获取了数据，并将其存储在了stockList中。那么，要将itemname和numbers分别作为x和y轴数据，你应该做一些改变。

首先，在getStockList()方法中，将获取到的数据赋值给xData和yData数组的过程需要修改，代码如下：

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

在这里，我使用了map()方法从stockList中获取到每个对象的itemname和numbers属性，并将它们作为一个新的数组存储在xData和yData中。

然后，在getEchartData()方法中，只需要将data属性改为xData和yData即可，如下所示：

getEchartData() {
  var myChart = echarts.init(document.getElementById('tiaoxing'));
  let option = {
    title: {
      text: "库存条形图"
    },
    xAxis: {
      data: this.xData //修改这里
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: this.yData, //修改这里
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  }
  myChart.setOption(option);
},

这样，你就可以将从数据库中获取的数据通过ECharts呈现在x轴和y轴上了。