<template>
  <!-- 饼图 -->
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import { guid } from '@/utils/ruoyi';
import useUserStore from '@/store/modules/user';
const pinias = useUserStore();
const { proxy } = getCurrentInstance();
const id = guid();
const myChart = shallowRef('');
const emit = defineEmits(['click-call-back']);

const props = defineProps({
  //刷新标志
  refresh: {
    type: [String, Number],
    default: 1,
  },
  //数据
  echartData: {
    type: Array,
    default: [],
  },
  //饼图半径值
  radius: {
    type: [Array, String],
    default: ['40%', '70%'],
  },
  // 标题
  title: {
    type: String,
    default: '',
  },
});

watch(
  () => props.refresh,
  value => {
    //先销毁实例
    myChart.value && myChart.value.dispose();
    setTimeout(() => {
      intChart();
    });
  },
  { immediate: true }
);

//自适应
function resizeTheChart() {
  if (myChart.value) {
    myChart.value.resize();
  }
}
//初始化
function intChart() {
  myChart.value = proxy.echarts.init(document.getElementById(id));
  myChart.value.clear();
  // 绘制图表
  myChart.value.setOption({
    color: pinias.$state.chartColor,
    title: { text: props.title, x: 'center', y: 'center', textStyle: { fontSize: '13', color: '#00d1ff' } },
    grid: {
      bottom: 0,
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c} ({d}%)',
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: props.radius,
        data: props.echartData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
        label: {
          show: true,
          formatter: '{d|{b}}\n {c} ({d|{d}%})',
          position: 'outside',
          rich: {
            d: {
              fontSize: 13,
              color: '#509BE0',
              align: 'left',
              fontFamily: 'SourceHanSansCN',
            },
          },
        },
      },
    ],
  });
  // 点击事件
  myChart.value.on('click', e => {
    emit('click-call-back', e.data);
  });
}
onMounted(() => {
  window.addEventListener('resize', resizeTheChart);
});
</script>