<script setup>
import * as echarts from 'echarts'

const chartColumn = ref(null)
const { proxy } = getCurrentInstance()
const option = ref({
  color: [
    "#3b75d2",
    "#ef8b45",
    "#1E9BD1",
    "#2058D9",
    "#11B972",
    "#829eec"
  ],
  backgroundColor: "#fff",
  grid: {
    bottom: 150,
    left: 100,
    right: "10%"
  },
  legend: {
    orient: "vertical",
    top: "middle",
    right: "0%",
    textStyle: {
      fontSize: 12
    },
    icon: "roundRect",
    data: [
      "集装箱昼夜吞吐量(万TEU)",
      "集装箱当前港存量(万TEU)",
      "散杂货昼夜吞吐量(万TEU)",
      "散杂货当前港存量(万TEU)",
      "油品散货昼夜吞吐量(万TEU)",
      "油品散货当前港存量(万TEU)"
    ]
  },
  series: [
    {
      radius: ["40%", "71%"],
      center: ["33%", "50%"],
      type: "pie",
      label: {
        show: true,
        formatter: "{c}%",
        fontSize: 12, // 将 fontSize 直接放在 label 下
        position: "outside"
      },
      emphasis: { // 将 emphasis 放在 label 外面
        label: {
          show: true
        }
      },
      labelLine: {
        show: true,
        length: 10,
        length2: 15
      },
      name: "民警训练总量",
      data: [
        { name: "集装箱昼夜吞吐量(万TEU)", value: 10 },
        { name: "集装箱当前港存量(万TEU)", value: 10 },
        { name: "散杂货昼夜吞吐量(万TEU)", value: 10 },
        { name: "散杂货当前港存量(万TEU)", value: 10 },
        { name: "油品散货昼夜吞吐量(万TEU)", value: 10 },
        { name: "油品散货当前港存量(万TEU)", value: 20 }
      ]
    },
    {
      radius: ["40%", "44%"],
      center: ["33%", "50%"],
      type: "pie",
      label: { show: false },
      emphasis: { label: { show: false } },
      labelLine: { show: false },
      animation: false,
      tooltip: { show: false },
      data: [
        { value: 1, itemStyle: { color: "rgba(250,250,250,0.3)" } }
      ]
    },
    {
      name: "外边框",
      type: "pie",
      clockwise: false,
      scale: false,
      center: ["33%", "50%"],
      radius: ["75%", "75%"],
      label: { show: false },
      data: [
        { value: 9, name: "", itemStyle: { borderWidth: 2, borderColor: "#ccc" } }
      ]
    }
  ]
})

onMounted(() => {
  initChart()
})

function initChart() {
  chartColumn.value = echarts.init(proxy.$refs['chartColumn'])
  chartColumn.value.setOption(option.value)
  chartColumn.value.resize()
}
</script>

<template>
  <div ref="chartColumn" className="echarts"></div>
</template>

<style scoped lang="scss">
.echarts {
  width: 100%;
  height: 100%;
}
</style>