我想取出数据库中的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();
},
参考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轴上了。