标签: apexcharts

<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 获取的数据，但即使使用静态硬编码数据也无法运行。