<template>
  <div class="chartBox" :id="id"></div>
</template>
<script setup name="pieChartGszl">
import { guid } from '@/utils/ruoyi';
const { proxy } = getCurrentInstance();
import { nowSize } from '@/utils/util.js';
const props = defineProps({
  //刷新标志
  refresh: {
    type: [String, Number],
    default: 1,
  },
  //数据
  echartData: {
    type: Array,
    default: [],
  },
});

const id = guid();
const myChart = shallowRef('');
let activeName = ref(null);
watch(
  () => props.refresh,
  value => {
    //先销毁实例
    myChart.value && myChart.value.dispose();
    intChart();
  }
);
//自适应
function resizeTheChart() {
  if (myChart.value) {
    myChart.value.resize();
  }
}
//初始化
let colorLine = ['#4458caFF', '#05d6e2FF', '#256be6FF', '#fcc43eFF'];
function intChart() {
  myChart.value = proxy.echarts.init(document.getElementById(id));
  myChart.value.clear();
  // 绘制图表
  myChart.value.setOption({
    color: colorLine,
    tooltip: {
      // trigger: "axis",
      // axisPointer: {
      //   type: "shadow",
      //   label: {
      //     show: true,

      //   }
      // },
      formatter: function (prams) {
        return prams.name + '：' + prams.value;
      },
    },
    legend: {
      triggerEvent: true,
      bottom: nowSize(40, 1920),
      x: 'center',
      itemWidth: nowSize(18, 1920),
      itemHeight: nowSize(10, 1920),
      selectedMode: false,
      itemGap: nowSize(10, 3328),
      textStyle: {
        color: '#FFFFFF',
        fontSize: nowSize(14, 1920),
      },
    },
    series: [
      {
        name: '统计',
        type: 'pie',
        roseType: 'radius',
        radius: ['10%', '40%'],
        center: ['50%', '40%'],
        label: {
          show: true,
          position: 'outside',
          formatter: function (params) {
            const name = params.name;
            const value = params.percent;
            const index = params.dataIndex;
            return [`{a${index}|${name}(${value}%)}`, `{hr${index}|}`].join('\n');
          },
          rich: getRich(),
        },
        labelLine: {
          show: true,
          length: 4,
          length2: 4,
        },
        data: props.echartData,
      },
    ],
  });
  myChart.value.on('click', params => {
    activeName.value = params.dataIndex;
    // emit('updateKeyAi',activeName.value)
    myChart.value.resize();
  });
}
function getRich() {
  let result = {};
  colorLine.forEach((v, i) => {
    result[`hr${i}`] = {
      backgroundColor: colorLine[i],
      borderRadius: 3,
      width: 3,
      height: 3,
      padding: [3, 3, 0, -12],
    };
    result[`a${i}`] = {
      padding: [-11, 6, -20, 6],
      color: colorLine[i],
      backgroundColor: 'transparent',
      fontSize: 12,
    };
  });
  return result;
}
onMounted(() => {
  intChart();
  window.addEventListener('resize', resizeTheChart);
});
</script>

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