Apexchart 不使用 axios 动态更新

Question

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);
        }
    }

对图表的引用以及 link 对 JSON 数据的引用同样有效。但图表仍处于 "loading" 状态。： This is how it actually looks like on the website and the errors that I get

Answer 1

正如 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);
    }
}

有关此主题的更多详细信息，请查看此问题的答案： How to access the correct this inside a callback?

Apexchart 不使用 axios 动态更新

Apexchart does not update dynamically using axios

web-applications

vue.js

apexcharts