ApexChart 饼图/圆环图未显示

Question

我正在尝试让 ApexCharts 在我的 Vue 项目（我使用 Vue3）上运行，但我遇到了饼图/圆环图问题。如果我将模板标签下的类型更改为，下面的代码将起作用 "bar"

<template>
  <div>
    <apexchart v-if="loaded" width="500" type="pie" :options="chartOptions" :series="series"></apexchart>
  </div>
</template>

<script>
export default {
    data() {
      return {
        loaded:true,
        series: [{
            data:[23, 11, 54, 72, 12]
            }],
        chartOptions: {
            labels: ["Apple", "Mango", "Banana", "Papaya", "Orange"],
            dataLabels: {
                enabled: true
            },
            responsive: [{
                breakpoint: 480,
                options: {
                    chart: {
                        width: 200
                    },
                    legend: {
                        positon:'bottom',
                        show: false
                    }
                }
            }],
        }
      }
    }
};

</script>

这是我在浏览器中运行时的结果。只有传说出现。

我需要使用饼图和圆环图以及从 API 获取的数据，但即使使用静态硬编码数据也无法运行。

Answer 1

series应该是一个标量数组：

//series: [{ data:[23, 11, 54, 72, 12] }],
series: [23, 11, 54, 72, 12]

演示