<template>
  <div id="device-overview-container" style="height: 228px"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import { Pie } from '@antv/g2plot';

const data = [
  { type: '在线', value: 27 },
  { type: '故障', value: 25 },
  { type: '离线', value: 18 },
  { type: '报警', value: 15 },
];
let piePlot = null;

function render() {
  piePlot = new Pie('device-overview-container', {
    legend: false,
    appendPadding: 10,
    data,
    angleField: 'value',
    colorField: 'type',
    radius: 1,
    innerRadius: 0.64,
    label: {
      type: 'inner',
      offset: '-50%',
      autoRotate: false,
      style: { textAlign: 'center' },
    },
    statistic: {
      title: { offsetY: -12, content: '设备总数' },
      content: { offsetY: 0 },
    },
    // 添加 中心统计文本 交互
    interactions: [
      { type: 'element-selected' },
      { type: 'element-active' },
      {
        type: 'pie-statistic-active',
        cfg: {
          start: [
            { trigger: 'element:mouseenter', action: 'pie-statistic:change' },
            { trigger: 'legend-item:mouseenter', action: 'pie-statistic:change' },
          ],
          end: [
            { trigger: 'element:mouseleave', action: 'pie-statistic:reset' },
            { trigger: 'legend-item:mouseleave', action: 'pie-statistic:reset' },
          ],
        },
      },
    ],
  });
  piePlot.render();
}

onMounted(() => {
  render();
});
</script>
