0

updateSeries 函数似乎不起作用。我不知道为什么它没有。uChart() 函数确实被调用了。我有以下代码：

<template>
<div>
    <Menu></Menu>
    <h1> Our Home Website! </h1>

    <apexchart ref="chart1" width="500" type="line" :options="options" :series="series"></apexchart>
</div>

从 './Menu' 导入菜单 从 'axios' 导入 axios

export default {
    name: 'Home',
    components: {
        'Menu': Menu
    },
    data: function () {
        return {
            options: {
                chart: {
                    height: 350,
                    type: 'bar',
                    id: 'chart'
                },
                dataLabels: {
                    enabled: false
                },
                series: [],
                title: {
                    text: 'Ajax Example',
                },
                noData: {
                    text: 'Loading...'
                }
            }
        }
    },
    mounted: function () {
        this.uChart()
    },
    methods: {
        uChart: function() {
            axios
                .get('http://my-json-server.typicode.com/apexcharts/apexcharts.js/yearly')
                .then(function (response) {
                    this.$refs.chart1.updateSeries([{
                        name: 'Sales',
                        data: response.data
                    }])
                });
            console.log(this.$refs.chart1);
        }
    }

对图表的引用和 JSON 数据的链接一样有效。但是图表仍然处于“加载”状态。： 这就是它在网站上的实际样子以及我得到的错误

4

1 回答 1

0

正如 Estus Flask 在他的评论中提到的那样。这个问题的答案是对“then”参数使用箭头语法，因为它是一个回调。因此正确的函数如下所示：

    methods: {
    uChart: function() {
        axios
            .get('http://my-json-server.typicode.com/apexcharts/apexcharts.js/yearly')
            .then(response => {
                this.$refs.chart1.updateSeries([{
                    name: 'Sales',
                    data: response.data
                }])
            });
        console.log(this.$refs.chart1);
    }
}

有关此主题的更多详细信息，请查看此问题的答案： 如何this在回调中访问正确的？

于 2020-04-30T08:22:21.433 回答