破碎的 apexcharts 图例 (vue-apexcharts)

如何解决破碎的 apexcharts 图例 (vue-apexcharts)

我只是用 vue-apexchart 创建简单的饼图。我想要的预期过程是，

1. 设置默认配置图表
2. 改变组件，然后根据 props 重新配置图表
3. 渲染它

我成功了，这个场景有效，但不知道我的饼图会发生什么。这是我的饼图

图例成功显示，但图例位置在饼图后面。我正在尝试在图表选项和图例选项中添加 offsetY。它仍然无法正常工作。

我错过了什么吗？

这是我的代码

<script>
import VueApexCharts from 'vue-apexcharts'

export default {
  components: {
    'apexchart': VueApexCharts,},props: {
    name: {default: "Durasi Parkir"},value: {default: () => ({})},height: {default: "320"},dir: {default: "ltr"},is_showed_legend: {default: true},is_floating_legend: {default: true},legend_position: {default: "top"},legend_vertical_align: {default: "center"},legend_horizontal_align: {default: "center"},legend_font_size: {default: "14px"},legend_x_offset: {default: 0},legend_y_offset: {default: 0},responsive_breakpoints: {default: 600},responsive_chart_height: {default: 240},is_responsive_show_legend: {default: false},additional_class: {default: ""}
  },data: () => ({
    series: [],options: {
      labels: [],colors: [],chart: {
        offsetY: 0,// iam trying to add offset but its still not works
      },legend: {
        show: true,position: "bottom",horizontalAlign: 'center',verticalAlign: 'middle',floating: false,fontSize: "14px",offsetX: 0,offsetY: 10,responsive: [{
        breakpoint: 0,options: {
          chart: {
            height: 0
          },legend: {
            show: false
          },}
      }]
    }
  }),created() {
    this.processthemingChart()
  },methods: {
    formatChartColor(index = 0) {
      let array_colors = [this.$utility.getPrimaryColor(),"#b6b6b6","#5fa2f4","#5abf78","#6983aa","#e97171","#ede682","#ba7967","#f1c5c5","#f69e7b"]
      if (index) return array_colors[index]
      else return array_colors
    },processFillChartColor() {
      this.options.colors = this.formatChartColor()
    },processFillChartOption() {
      this.options.legend.position = this.legend_position
      this.options.legend.fontSize = this.legend_font_size
      this.options.legend.show = this.is_showed_legend
      this.options.legend.floating = this.is_floating_legend
      this.options.responsive[0].breakpoint = this.responsive_breakpoints
      this.options.responsive[0].options.chart.height = this.responsive_chart_height
      this.options.responsive[0].options.legend.show = this.is_responsive_show_legend
      this.options.legend.horizontalAlign = this.legend_horizontal_align
      this.options.legend.verticalAlign = this.legend_vertical_align
      this.options.legend.offsetY = this.legend_y_offset
      this.options.legend.offsetX = this.legend_x_offset
    },processthemingChart() {
      this.processFillChartColor()
      this.processFillChartOption()
      this.processDataChart()
    },processDataChart() {
      this.series = []
      this.options.labels = []
      this.value.forEach(item => {
        this.series.push(item.value)
        this.options.labels.push(item.text)
      })
    },processFillChart() {
      try {
        (this.value !== '') ? this.processDataChart() : ''
      } catch (e) {
        this.$sentry.captureException(e,`user gagal merender grafik ${this.name}`)
      }
    },}
}
</script>
<template>
  <apexchart :class="`apex-charts ${additional_class}`" :height="height" type="pie" :dir="dir"
             :series="series" :options="options" 
  ></apexchart>
</template>