UpdateOptions()方法导致错误[vue-apexcharts]

Question

Nuxt

plugins\apexCharts.js

import Vue from 'vue';
import VueApexCharts from 'vue-apexcharts';
Vue.use(VueApexCharts);
Vue.component('ApexChart', VueApexCharts);

nuxt.config.js

plugins: [
{ src: '~/plugins/apexCharts.js', ssr: false },
],

组件

<template>
<ApexChart ref="apexChart" height='300px' :type="type" :series="series" :options="options"></ApexChart>
</template>

尝试更新图表后：

updateChart() {
this.$refs.apexChart.updateOptions({
xaxis: {
labels: {
show: false
}
},
yaxis: {
labels: {
show: false
}
}
});
}

我们收到一个错误：

TypeError: Cannot read property 'filter' of undefined

浏览器控制台：

TypeError: Cannot read property 'filter' of undefined
at t.value (apexcharts.min.js:15)
at t.value (apexcharts.min.js:15)
at i.value (apexcharts.min.js:6)
at t.value (apexcharts.min.js:15)
at VueComponent.updateOptions (vue-apexcharts.js:186)
at VueComponent.updateChart (index.js?!./node_modules/vue-loader/lib/index.js?!./components/elements/charts/base/apexCharts.vue?vue&type=script&lang=js&:65)
at invokeWithErrorHandling (vue.runtime.esm.js:1853)
at Vue.$emit (vue.runtime.esm.js:3882)
at VueComponent.changeTheme (index.js?!./node_modules/vue-loader/lib/index.js?!./components/header/themes.vue?vue&type=script&lang=js&:33)
at VueComponent.clickSwitch (index.js?!./node_modules/vue-loader/lib/index.js?!./components/header/themes.vue?vue&type=script&lang=js&:22)

Answer 1

问题已经解决。错误在我这边。

下面是一个工作示例：

<template>
<div v-if="showChart">
<apexchart width="500" type="bar" :options="chartOptions" :series="series"></apexchart>
<button @click="getData()">Update</button>
</div>
</template>
<script>
export default {
data: function() {
return {
showChart: false,
chartOptions: {
chart: {
id: 'vuechart-example'
},
xaxis: {
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
}
},
series: [{
name: 'series-1',
data: [30, 40, 35, 50, 49, 60, 70, 91]
}]
}
},
mounted() {
this.getData();
this.showChart = true;
},
methods: {
getData() {
let total = 6;
let startYears = this.random(2000, 2025);
let series = [];
let categories = [];
for (let i = 0; i < total; i++) {
series.push(this.random(200, 500));
categories.push(startYears++);
}
let index = this.random(0, 2);
let colors = ['#ff0000', '#00ff00', '#0000ff'];
this.series = [{
data: series
}];
this.chartOptions = {
chart: {
foreColor: colors[index]
},
xaxis: {
categories: categories
}
};
},
random(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
}
};
</script>

Answer 2

这对我来说就像一种魅力：

<template>
<div>
<apexchart ref="table123" width="500" type="bar" :options="chartOptions" :series="series"></apexchart>
<button @click="getData()">Update</button>
</div>
</template>
<script>
export default {
data: function() {
return {
showChart: false,
chartOptions: {
chart: {
id: 'vuechart-example'
},
xaxis: {
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
}
},
series: [{
name: 'series-1',
data: [30, 40, 35, 50, 49, 60, 70, 91]
}]
}
},
mounted() {
this.getData();            
},
methods: {
getData() {
let total = 6;
let startYears = this.random(2000, 2025);
let series = [];
let categories = [];
for (let i = 0; i < total; i++) {
series.push(this.random(200, 500));
categories.push(startYears++);
}
let index = this.random(0, 2);
let colors = ['#ff0000', '#00ff00', '#0000ff'];
this.series[0].data = series;
this.chartOptions.xaxis.categories = categories;
this.$refs.table123.updateSeries(this.series,true)
this.$refs.table123.updateOptions(this.chartOptions, false ,true)
},
random(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
}
};
</script>

查看中的其他示例

https://github.com/apexcharts/vue-apexcharts/issues/74#issuecomment-472297640

https://codesandbox.io/s/qzl15y1nlj?fontsize=14&file=/src/components/Chart.component.vue:2546-2559