使用axios将数据从flask传递到echart

Question

我正在尝试使用 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

Answer 1

首先你不能改变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();
    }
}

使用axios将数据从flask传递到echart

Passing data from flask to echart using axios

flask

vuejs2

axios

echarts