The problem is that the back-end data has been successfully returned to the front-end, but the Echarts chart has been unable to be rendered. It was stuck for more than an hour. Finally, I asked gpt to solve it (gptyyds!!!)
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() {
//调用session中的用户数据
this.user = JSON.parse(sessionStorage.getItem('CurUser'))
},
initEcharts() {
let option = {
title: {
text: "现存物资量"
},
tooltip: {
},
legend: {
data: [""]
},
xAxis: {
data: ["鼠标", "帐篷", "键盘", "口罩", "矿泉水", "棉被"]
},
yAxis: {
},
series: [
{
name: "发放量",
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);// 渲染页面
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
myChart.resize();
});
},
},
created() {
this.init()
}
}
</script>
original:
Me: What should I do if the data in the series in the ECharts icon in this code cannot be rendered by the data from the backend?
gpt:
In the code you provided, the data in the ECharts chart is initialized to this.cntData, but this.cntData is in The component is created as an empty array. To enable the chart to render based on data from the backend, you need to ensure that the chart is initialized after the data is loaded.
To achieve this, you can call the initEcharts method to initialize the chart after the loadGet method successfully obtains the data. This ensures that the data is ready and ready for use in charts. Here is the modified code snippet:
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; // 将数据赋值给 cntData
this.initEcharts(); // 初始化图表 !!!!!!这里！
this.$message({
message: '操作成功！',
type: 'success'
});
} else {
this.$message({
message: '操作失败！',
type: 'error'
});
}
});
},
initEcharts() {
let option = {
// ... 其余图表配置 ...
series: [
{
name: "发放量",
type: "bar", //类型为柱状图
data: this.cntData // 使用从后端获取的数据
}
]
};
const myChart = echarts.init(this.$refs.mychart);
myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
});
},
// ... 其他方法 ...
},
Me: Does the mounted method run before beforeMount?
gpt: No, the beforeMount method is executed before the mounted method. The sequence in the Vue.js life cycle is as follows:beforeCreate: Called after instance initialization, but before data observation and event/watcher setup. At this time, the instance has not been initialized and the data and event methods are not yet available.
created: Called immediately after the instance is created. At this step, the instance has completed the following configuration: data observation, operations on properties and methods, and watch/event event callbacks. However, the mounting phase has not started yet, and the DOM elements have not been created yet.
beforeMount: Called before mounting starts: the related render function is called for the first time.
mounted: el is replaced by the newly created vm.$el, and this hook is called after being mounted to the instance.
Therefore, beforeMount is executed before mounted, and they are located at different stages of the Vue instance life cycle.
– I don’t understand. . . .
Me: Then why can’t this.cntData fill in the data of the icon?
gpt: The problem may be due to asynchronous operations. In your code, the loadGet method gets the data from the backend through an asynchronous request and calls the initEcharts method after getting the data. However, due to the nature of asynchronous requests, the initEcharts method may be called before the data is obtained, causing this.cntData to still be an empty array.
To solve this problem, you can ensure that the initEcharts method is called after the data has been successfully obtained. You have already
made this call in the loadGet method, but you need to make sure that the data is obtained successfully before executing this call.
I understand it seems...