<template>
  <v-chart ref="saleChartRef" style="height: 420px" :option="options" />
</template>
<script setup>
  import VChart from 'vue-echarts';
  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { PieChart } from 'echarts/charts';
  import {
    GridComponent,
    TooltipComponent,
    LegendComponent,
    ToolboxComponent
  } from 'echarts/components';

  // 按需加载echarts
  use([
    CanvasRenderer,
    PieChart,
    GridComponent,
    TooltipComponent,
    LegendComponent
  ]);

  const options = reactive({
    legend: {
      top: 'bottom'
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [50, 150],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        data: [
          { value: 40, name: '快递不取件' },
          { value: 38, name: '快递不上门' },
          { value: 32, name: '时间不合适' },
          { value: 30, name: '发现更贵的平台' },
          { value: 28, name: '不想卖了' },
          { value: 26, name: '信息填写错误' },
          { value: 22, name: '以上都不是' }
        ]
      }
    ]
  });
</script>
