I have a vue.js file that the user can select different graphs. The selection of the graph is defined as activeOrderView
and changes with @click
. Different graphs have different x-axis categories and y-axis values.
My problem is, the data of the graphs are fetched from data()
, and the data are updated with two functions in methods
. The data does not update when a different graph is selected and the original data is retained even another graph is selected. How can I force the data to be updated by the functions when a different graph is selected? I am using the Vue-apexchart component so I cannot bind the functions in method directly to the HTML template.
HTML template
<b-tabs card fill>
<b-tab title="Popular products" :title-link-class="'tab-title-class'" @click="activeOrderView = 'popularProducts'" active>
<div v-if="activeOrderView === 'popularProducts'">
<apexcharts type="bar" :options="chartOptions" :series="series"></apexcharts>
</div>
</b-tab>
<b-tab title="Least popular products" :title-link-class="'tab-title-class'" @click="activeOrderView = 'leastPopularProducts'">
<div v-if="activeOrderView === 'leastPopularProducts'">
<apexcharts type="bar" :options="chartOptions" :series="series"></apexcharts>
</div>
</b-tab>
<b-tab title="Total orders" :title-link-class="'tab-title-class'" @click="activeOrderView = 'totalOrders'">
<div v-if="activeOrderView === 'totalOrders'">
<apexcharts type="line" :options="chartOptions" :series="series"></apexcharts>
</div>
</b-tab>
<b-tab title="Order status" :title-link-class="'tab-title-class'" @click="activeOrderView = 'orderStatus'">
<div v-if="activeOrderView === 'orderStatus'">
<apexcharts type="pie" :options="chartOptions" :series="series"></apexcharts>
</div>
</b-tab>
</b-tabs>
<script>
import VueApexCharts from 'vue-apexcharts'
export default {
name: 'dashboard-analytics-orders',
components: {
apexcharts: VueApexCharts
},
data () {
return {
activeOrderView: 'popularProducts',
chartOptions: {
chart: {
animations: {
enabled: true,
easing: 'easeinout',
speed: 800,
animateGradually: {
enabled: true,
delay: 150
},
dynamicAnimation: {
enabled: true,
speed: 350
}
},
},
xaxis: {
title: {
text: 'Product name'
},
categories: []
},
yaxis: {
title: {
text: 'Number of orders'
},
min: 0
},
colors: ['#ff0000'],
grid: {
row: {
colors: ['#f3f3f3', 'transparent'],
opacity: 0.8
}
}
},
series: [{
name: 'orders',
data: []
}]
}
},
methods: {
getOrderCategories: function () {
if (this.activeOrderView === 'popularProducts') {
this.chartOptions = {...this.chartOptions, ...{
xaxis: {
categories: ['Apple iPhone', 'Apple iWatch', 'Apple Macbook Pro', 'Samsung Galaxy Fold', 'Chromebook']
}
}}
console.log('1');
} else if (this.activeOrderView === 'leastPopularProducts') {
this.chartOptions = {...this.chartOptions, ...{
xaxis: {
categories: ['Chair', 'Table', 'Haddock', '3D printer', 'Yamaha 2-stroke engine']
}
}}
console.log('2');
} else if (this.activeOrderView === 'totalOrders') {
this.chartOptions = {...this.chartOptions, ...{
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}
}}
} else if (this.activeOrderView === 'orderStatus') {
this.chartOptions = {...this.chartOptions, ...{
xaxis: {
categories: ['Completed', 'Processing', 'Dispatched', 'On hold', 'Cancelled', 'Refunded']
}
}}
}
},
getOrderData: function () {
if (this.activeOrderView === 'popularProducts') {
this.series = [{
data: [950, 789, 751, 654, 159]
}];
} else if (this.activeOrderView === 'leastPopularProducts') {
this.series = [{
data: [50, 23, 22, 20, 1]
}];
} else if (this.activeOrderView === 'totalOrders') {
this.series = [{
data: [981, 766, 885, 463, 498, 879, 465, 979, 159, 684, 654, 846]
}];
} else if (this.activeOrderView === 'orderStatus') {
this.series = [{
data: [300, 10, 12, 2, 32, 16]
}];
}
}
},
created() {
this.getOrderCategories();
this.getOrderData();
}
}
Thank you!
Simply execute getOrderCategories()
and getOrderData()
when you switch views.
I would do so with a method, otherwise your @click
expressions will get messy.
For example
methods: {
// snip
switchActiveOrderView(view) {
this.activeOrderView = view
this.getOrderCategories()
this.getOrderData()
}
}
and in your tabs
<b-tab
title="Popular products"
title-link-class="tab-title-class"
@click="switchOrderView('popularProducts')"
active>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.