<script lang="ts" setup>
import { nextTick, reactive, ref } from 'vue'
import * as echarts from 'echarts'
const props = withDefaults(defineProps<Props>(), {
  id: '',
  data: () => [],
  title: '',
})
// const props = withDefaults(defineProps<Props>(), {})
const person: any = reactive({
  markList: [],
})
interface Props {
  id: string
  data: string[]
  title: string
}
const GetEchar = () => {
  const myChart = ref<HTMLElement>()
  const myCharts = ref<any>()
  nextTick(() => {
    const chartDom = document.getElementById(props.id)!
    myCharts.value = echarts.init(chartDom)
    const option = {
      tooltip: {
        trigger: 'item',
      },
      color: ['rgb(40, 184, 228)', '#ccc'],
      legend: {
        orient: 'vertical',
        right: '0',
        bottom: '50%',
        itemGap: 20,
      },
      graphic: {
        type: 'text',
        left: 'center',
        top: '45%',
        style: {
          text: props.title,
          textAlign: 'center',
          fill: '#333',
          fontSize: 18,
        },
      },
      series: [
        {
          name: '培训考核',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 0,
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold',
            },
          },
          label: {
            normal: {
              show: false,
              position: 'center',
            },
          },
          labelLine: {
            show: false,
          },
          data: props.data,
        },
      ],
    }
    myCharts.value.setOption(option)
    // 让图表跟随屏幕自动的去适应
    window.addEventListener('resize', () => {
      myCharts.value.resize()
    })
  })
}
watch(
  [() => props.data], ([newName], [oldName]) => {
    GetEchar()
  }, { immediate: true, deep: true })
GetEchar()
</script>

<template>
  <div :id="props.id" class="bars_w" />
</template>

<style lang="scss" scoped>
.bars_w {
  width: 100%;
  height: 90%;
  transform: translateX(-25%);
}
</style>