<template>
  <Card title="品牌统计图表" :loading="loading">
    <div ref="chartRef" :style="{ width, height }"></div>
  </Card>
</template>
<script lang="ts" setup>
import { Ref, onMounted, ref, watch } from "vue";
import { Card } from "ant-design-vue";
import { useECharts } from "@/hooks/web/useECharts";

const props = defineProps({
  loading: Boolean,
  width: {
    type: String as PropType<string>,
    default: "100%",
  },
  height: {
    type: String as PropType<string>,
    default: "620px",
  },
  sData: {
    type: Array as PropType<any>,
    default: [],
  },
});
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
onMounted(() => {
  initChart(props.sData);
});
const initChart = (data) => {
  const option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "5%",
      left: "center",
      type:'scroll'
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 10,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: data,
      },
    ],
  };
  setOptions(option);
};
watch(
  () => props.sData,
  () => {
    console.log("watch");
    initChart(props.sData);
  },
  { immediate: true }
);
</script>
