<script setup>
import * as echarts from "echarts";
import { ref, onMounted, defineProps, watch } from "vue";
const prop = defineProps({
  title: {
    type: String
  },
  data: { type: Array }
});
watch(
  () => prop.data,
  () => {
    upEchares();
  }
);
//echarts容器
const pieEchart = ref(null);
//配置echarts
function getOption() {
  const option = {
    title: {
      text: prop.title,
      left: "center",
      textStyle: {
        color: "rgba(255,255,255, 1)",
        fontSize: "12px"
      }
    },
    tooltip: {
      trigger: "item"
    },
    legend: {
      top: "10%",
      left: "center",
      textStyle: {
        color: "rgba(255,255,255, 1)",
        fontSize: "12px"
      }
    },
    series: [
      {
        name: prop.title,
        type: "pie",
        radius: "50%",
        center: ["50%", "65%"],
        data: prop.data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  };
  return option;
}
//初始化
function upEchares() {
  echarts.init(pieEchart.value).setOption(getOption());
}
onMounted(() => {
  upEchares();
});
</script>
<template>
  <div class="pie">
    <div ref="pieEchart"></div>
  </div>
</template>
<style lang="scss" scoped>
.pie {
  width: 100%;
  height: 100%;
  > div {
    width: 100%;
    height: 100%;
  }
}
</style>