<template>
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import { guid } from "@/utils/ruoyi";
const { proxy } = getCurrentInstance();
const id = guid();
const myChart = shallowRef("");
const props = defineProps({
  //刷新标志
  refresh: {
    type: [String, Number],
    default: 1,
  },
  //数据
  echartData: {
    type: Array,
    default: [],
  },
  //饼图半径值
  radius: {
    type: [Array, String],
    default: ["40%", "70%"],
  },
  //图列的排列方式
  legend: {
    type: Object,
    default: {
      top: "5%",
      orient: "vertical", //horizontal
      left: "right", //left ,center
    },
  },
  //饼块颜色设置
  colorList: {
    type: Array,
    default: [],
  },
});

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

//自适应
function resizeTheChart() {
  if (myChart.value) {
    myChart.value.resize();
  }
}
//初始化
function intChart() {
  myChart.value = proxy.echarts.init(document.getElementById(id));
  // 绘制图表
  myChart.value.setOption({
    tooltip: {
      trigger: "item",
    },
    legend: props.legend,
    grid: {
      bottom: 0,
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: props.radius,
        data: props.echartData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        itemStyle: {
          //   normal: {
          //     color: function (colors) {
          //       var colorList = props.colorList;
          //       return colorList[colors.dataIndex];
          //     },
          //   },
        },
        label: {
          show: true,
          formatter: "{d|{b}}（{d|{d}%}）",
          position: "outside",
          rich: {
            d: {
              fontSize: 16,
              color: "#000000",
              align: "left",
              fontFamily: "SourceHanSansCN",
            },
            d: {
              fontSize: 14,
              color: "#000000",
              align: "left",
              fontFamily: "SourceHanSansCN",
            },
          },
        },
      },
    ],
  });
}
onMounted(() => {
  intChart();
  window.addEventListener("resize", resizeTheChart);
});
onBeforeUnmount(() => {
  myChart.value && myChart.value.dispose();
});
</script>