<template>
  <div class="chart-container">
    <e-charts :option="chartOption" autoresize />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const chartOption = ref({
  backgroundColor: 'transparent',
  tooltip: {
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    right: '10%',
    top: 'center',
    textStyle: {
      color: '#fff',
      fontSize: 16
    },
    data: ['一般', '轻度']
  },
  series: [
    {
      name: '人员不良行为分析',
      type: 'pie',
      radius: '55%',
      center: ['40%', '50%'],
      roseType: false,
      zlevel: 1,
      startAngle: 90,
      selectedMode: 'single',
      selectedOffset: 30,
      clockwise: true,
      itemStyle: {
        borderRadius: 8,
        borderColor: '#0a2740',
        borderWidth: 4,
        opacity: 0.8,
        shadowBlur: 10,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      },
      label: {
        show: false
      },
      emphasis: {
        itemStyle: {
          opacity: 0.5,
          shadowBlur: 20,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      data: [
        {
          value: 59,
          name: '一般',
          itemStyle: {
            color: '#1976a1'
          }
        },
        {
          value: 59,
          name: '轻度',
          itemStyle: {
            color: '#1de9ff'
          }
        }
      ]
    }
  ],
  // 3D视角控制
  viewControl: {
    alpha: 40,
    beta: 40,
    rotateSensitivity: 1,
    zoomSensitivity: 1,
    autoRotate: true,
    autoRotateSpeed: 10
  }
})
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 400px;
  background: transparent;
  perspective: 1000px;
  transform-style: preserve-3d;
}
</style> 