我正在嘗試使用 axios 將從后端獲得的資料傳遞給 echarts，但我運氣不佳。這是我的 LineChart.js 檔案
import {Line} from 'vue-chartjs'
import axios from 'axios';
export default {
extends: Line,
props: ["data"],
mounted() {
this.renderChart(
{
labels: [
'Jan',
'Feb',
'March'
],
datasets: [
{
label: 'Stream',
backgroundColor: "#42c9d5",
data: []
}
]
},
{responsive: true, maintainApsectRatio: false}
)
},
computed: {
chartData: function() {
return this.data;
}
},
methods: {
getScore() {
axios({
method: 'get',
url: 'http://localhost:5000/time',
}).then((response) => {
this.data = response.data.score
console.log(this.data);
})
.catch((error) => {
// eslint-disable-next-line
console.error(error);
});
}
},
created() {
this.getScore();
}
}
我可以在控制臺中看到輸出，但我不確定如何將其傳遞給資料：[] in datasets
uj5u.com熱心網友回復：
首先你不能改變 a props。所以你不能這樣做this.data = ...。如果您檢查瀏覽器檢查器，您將看到與您無法修改道具有關的錯誤。
state當您收到 axios 回應時，您必須創建并更改狀態：
import {Line} from 'vue-chartjs'
import axios from 'axios';
export default {
extends: Line,
props: ["data"],
methods: {
getScore() {
axios({
method: 'get',
url: 'http://localhost:5000/time',
}).then((response) => {
this.renderChart(
{
labels: [
'Jan',
'Feb',
'March'
],
datasets: [
{
label: 'Stream',
backgroundColor: "#42c9d5",
data: response.data.score
}
]
},
{responsive: true, maintainApsectRatio: false}
)
})
.catch((error) => {
// eslint-disable-next-line
console.error(error);
});
}
},
mounted() {
this.getScore();
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/443955.html