要解决ApexCharts与Vue中切换stackType时不正确呈现刻度和值的问题,可以尝试使用以下解决方法:
npm install apexcharts vue-apexcharts
import VueApexCharts from 'vue-apexcharts'
export default {
components: {
apexchart: VueApexCharts,
},
// 其他组件代码
}
data() {
return {
chartOptions: {
chart: {
height: 350,
type: 'bar',
},
series: [
{
name: 'Series 1',
data: [30, 40, 45, 50, 49, 60, 70, 91, 125],
},
{
name: 'Series 2',
data: [23, 40, 35, 50, 49, 60, 70, 91, 125],
},
],
xaxis: {
categories: [2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009],
},
fill: {
opacity: 1,
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded',
},
},
},
stackType: 'normal',
}
},
methods: {
toggleStackType() {
this.stackType = this.stackType === 'normal' ? '100%' : 'normal'
this.updateChart()
},
updateChart() {
this.$refs.chart.updateOptions({
plotOptions: {
bar: {
stacked: this.stackType !== 'normal',
},
},
})
},
},
通过以上步骤,就可以在Vue应用中使用ApexCharts,并能够正确切换stackType以呈现正确的刻度和值。