<!--
 * @Author: hcc han_chen301@163.com
 * @Date: 2025-05-23 09:27:19
 * @LastEditors: hcc
 * @LastEditTime: 2025-05-29 18:04:37
 * @remarker: 
-->
<script lang="ts" setup>
import type { EchartsUIType } from '@vben/plugins/echarts';

import { onMounted, ref } from 'vue';

import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);

onMounted(() => {
  renderEcharts({
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
    },
    series: [
      {
        name: '协作警种能力占比',
        type: 'pie',
        selectedMode: 'single',
        radius: [0, '30%'],

        label: {
          position: 'inner',
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1640, name: '治安', selected: true },
          { value: 1200, name: '网安' },
          { value: 820, name: '视侦' },
          { value: 580, name: '技侦' },
        ],
      },
      {
        name: '协作警种能力占比',
        type: 'pie',
        radius: ['40%', '55%'],

        data: [
          { value: 800, name: '派出所基础信息-信息查询' },
          { value: 540, name: '旅馆业治安管理·信息查询' },
          { value: 300, name: '治安管控平台-信息查询' },
          { value: 700, name: '网安平台-手机号码查询' },
          { value: 500, name: '网安平台-网络信息查询' },
          { value: 520, name: '视侦平台-基础查询' },
          { value: 300, name: '视侦平台-高级查询' },
          { value: 400, name: '技侦平台-基础查询' },
          { value: 180, name: '技侦平台-高级查询' },
        ],
      },
    ],

    // series: [
    //   {
    //     animationDelay() {
    //       return Math.random() * 400;
    //     },
    //     animationEasing: 'exponentialInOut',
    //     animationType: 'scale',
    //     center: ['50%', '50%'],
    //     color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
    //     data: [
    //       { name: '外包', value: 500 },
    //       { name: '定制', value: 310 },
    //       { name: '技术支持', value: 274 },
    //       { name: '远程', value: 400 },
    //     ].sort((a, b) => {
    //       return a.value - b.value;
    //     }),
    //     name: '协作警种能力占比',
    //     radius: '80%',
    //     roseType: 'radius',
    //     type: 'pie',
    //   },
    // ],
  });
});
</script>

<template>
  <EchartsUI ref="chartRef" />
</template>
