<template>
  <div ref="echart" class="echartDiv"></div>
</template>

<script setup>
import { choseRbgb } from '@/utils/tools'
import * as echarts from "echarts";
import { onMounted, toRefs, ref, reactive } from "vue";
let vehicleChart = null
const echart = ref()
//挂载
onMounted(() => {
  initCharts()
  window.addEventListener('resize', handleResize)
});

const initCharts = () => {
  vehicleChart = echarts.init(echart.value)
  const colors = ['#00f0ff', '#0066ff', '#ff9900', '#00cc66']
  const countData = [
    {
      value: 2056,
      name: '待办',
      colorType: 'blue',
      color: ['#00f0ff', '#00a0cc'],
      color1: [choseRbgb('#00f0ff', 0.3), choseRbgb('#00a0cc', 0.3)]
    },
    {
      value: 4356,
      name: '已办',
      colorType: 'lightBlue',
      color: ['#0066ff', '#0044cc'],
      color1: [choseRbgb('#0066ff', 0.3), choseRbgb('#0044cc', 0.3)]
    },
    {
      value: 3018,
      name: '未处理',
      colorType: 'orange',
      color: ['#ff9900', '#cc7a00'],
      color1: [choseRbgb('#ff9900', 0.3), choseRbgb('#cc7a00', 0.3)]
    },
    {
      value: 1998,
      name: '忽略',
      colorType: 'green',
      color: ['#00cc66', '#009944'],
      color1: [choseRbgb('#00cc66', 0.3), choseRbgb('#009944', 0.3)]
    }
  ]
  vehicleChart.setOption(createChartOption(countData, colors))
}

const createChartOption = (data, colors) => {
  let total = data.reduce((sum, item) => sum + item.value, 0)
  return {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: '60%',
      top: 'center',
      textStyle: {
        color: '#fff',
        rich: {
          value: {
            color: '#fff'
          },
          percentage: {
            padding: [0, 0, 0, 10]
          },
          blue: {
            color: colors[0]
          },
          lightBlue: {
            color: colors[1]
          },
          orange: {
            color: colors[2]
          },
          green: {
            color: colors[3]
          }
        }
      },
      formatter: (name) => {
        const item = data.find(d => d.name === name);
        let percentage = ((item.value / total) * 100).toFixed(2);
        return `${name} ${item.value} {${item.colorType}|(${percentage}%)}`
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['55%', '70%'],
        center: ['28%', '50%'],
        data: data.map(item => ({
          ...item,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: item.color[0] },
              { offset: 1, color: item.color[1] }
            ])
          }
        })),
        label: {
          show: false
        },
        emphasis: {
          scale: false,
          focus: 'none'
        },
        z: 2
      },
      {
        type: 'pie',
        radius: ['65%', '85%'],
        center: ['28%', '50%'],
        data: data.map(item => ({
          ...item,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: item.color1[0] },
              { offset: 1, color: item.color1[1] }
            ])
          }
        })),
        label: {
          show: false
        },
        emphasis: {
          scale: false,
          focus: 'none'
        },
        z: 1,
        silent: true
      }
    ]
  }
}


const handleResize = () => {
  vehicleChart?.resize()
}

</script>

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