ApexCharts 圆环图图例标题未反映提供的数据标签（卡在 'series-1' 等）

Question

我正在将 Apexcharts 的简单圆环图导入到我的 Vue.js 项目中，但是，即使按照 site 上提供的文档进行操作，图例标题仍保持为 'series-1, series-2, ...'。

这是渲染的图片：Donut Chart

如您所见，我正在按照文档添加 series 和 labels 到数据 object 和 div 元素，但出于某种原因仍然无法呈现正确的标签。

我该如何解决这个问题？

旁注：将 legend.show 从 false 切换为 true 没有任何作用。

<div id="donut-chart">

    <v-container>
        <div id="chart">
            <apexchart 
                type=donut 
                width=380 
                :options="chartOptions" 
                :labels="labels" 
                :series="series" />
        </div>
    </v-container>

</div>

import VueApexCharts from 'vue-apexcharts'

export default {
    name: 'donut-chart',
    data: () => ({
        series: [23, 11, 54, 72, 12],
        labels: ["Apple", "Mango", "Banana", "Papaya", "Orange"],
        chartOptions: {
            dataLabels: {
                enabled: false
            },
            responsive: [{
                breakpoint: 480,
                options: {
                    chart: {
                        width: 200
                    },
                    legend: {
                        show: false
                    }
                }
            }],
            legend: {
                position: 'right',
                offsetY: 0,
                height: 230
            }
        }
    }),
    components: {
        apexchart: VueApexCharts,
    }
}

Answer 1

labels 属性应该是 chartOptions 的嵌套属性，不能作为单独的属性传递。

chartOptions: {
  labels: ["Apple", "Mango", "Banana", "Papaya", "Orange"],
  dataLabels: {
      enabled: false
  },
  responsive: [{
      breakpoint: 480,
      options: {
          chart: {
              width: 200
          },
          legend: {
              show: false
          }
      }
  }],
  legend: {
      position: 'right',
      offsetY: 0,
      height: 230
  }
}


<apexchart 
  type=donut 
  width=380 
  :options="chartOptions" 
  :series="series" />

ApexCharts 圆环图图例标题未反映提供的数据标签（卡在 'series-1' 等）

ApexCharts Donut Chart legend titles not reflecting provided data labels (stuck as 'series-1' etc.)

vue.js

apexcharts