如何使用具有 ES6 标准的 vuejs 转换以下 JavaScript 逻辑

Question

我有一个 JavaScript 文件，我希望使用具有 ES6 标准的 Vuejs 实现相同的逻辑。 我想在“LineChart.vue”中添加这个逻辑，然后我会将它导入到我的 parent.vue 中以显示图表。

和 vuejs 一样，有很多生命周期钩子方法，因为我是 vuejs 新手，我不知道如何在 vuejs 中实现相同的逻辑。 请帮我解决一下这个。

代码在这里：

function chart_shot(type, id, interval) {
    $.ajax({
        type: "GET",
        url: getApiUrl("find/" + type + "?interval=" + interval),
        headers: {
            "api_key": ''
        },
        cache: true,
        timeout: 30,
        dataType: "json",
        success: function (data) {
            var ctx = document.getElementById(id);

        var highChart = [];
        for(i = 0; i < data["date"].length; i++) {
            highChart.push({
                t: moment(data["date"][i], "X").toDate(),
                y: data["challenges"][i]
            })
        }

        if(my !== undefined) {
            my.destroy();
        }

        my = new Chart(ctx, {
            type: 'line',
            data: {
                datasets: [{
                    label: "challenges",
                    data: highChart,
                }]
            },
            options: {
                lineTension: 0,
                maintainAspectRatio: false,
                legend: {
                    display: false
                },
                scales: {
                    yAxes: [{
                        scaleLabel: {
                            display: false
                        },
                        ticks: {
                            beginAtZero: true,
                            callback: function (value, index, values) {
                                return value + '%';
                            }
                        }
                    }],
                    xAxes: [{
                        type: 'time',
                        time: {
                            unit: 'month'
                        },
                        scaleLabel: {
                            display: true,
                            labelString: ''
                        },
                    }]
                }
            }
        });
    }
});

}

请帮助我，因为我是 vuejs 的新手，我不知道在 vuejs 中编写此代码的有效方法。

请告诉我它可以在哪种文件类型中完成，我的意思是在 js 或 vue 中？

以及如何在其他 vue 组件中使用编写的代码。

Answer 1

https://codesandbox.io/s/dry-cache-ilesg

这是与您的问题相关的 VueJS 应用程序的一个小演示。 请检查一下，您将对它的工作原理有所了解。