<template>
  <div :style="{height,width}" ref="chartRef"></div>
</template>
<script setup lang="ts">
  import { ref, shallowReactive, watch } from "vue";
  import * as echarts from "echarts";
  interface ColorObjProps {
    textStyle: string;
    series: {
      color: string[];
      dataColor: {
        normal: string;
        shadowColor: string;
      };
    };
  }
  const props = withDefaults(defineProps<{
    tips: number;
    colorObj: ColorObjProps;
  }>(), {
    tips: 50,
    colorObj: () => ({
      textStyle: "#3fc0fb",
      series: {
        color: ["#00bcd44a", "transparent"],
        dataColor: {
          normal: "#03a9f4",
          shadowColor: "#97e2f5"
        }
      }
    })
  });
  const height = "100px";
  const width = "120px";
  // 定义 ref
  const chartRef = ref();
  // 配置项
  let options = shallowReactive({ title: null, series: null });
  // echarts 实例
  let chartInstance: echarts.ECharts | null = null;
  watch(
    () => props.tips,
    (val: any) => {
      options = {
        title: {
          text: val * 1 + "%",
          x: "center",
          y: "center",
          textStyle: {
            color: props.colorObj.textStyle,
            fontSize: 16
          }
        },
        series: [
          {
            type: "pie",
            radius: ["75%", "80%"],
            center: ["50%", "50%"],
            hoverAnimation: false,
            color: props.colorObj.series.color,
            label: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: val,
                itemStyle: {
                  normal: {
                    color: props.colorObj.series.dataColor.normal,
                    shadowBlur: 10,
                    shadowColor: props.colorObj.series.dataColor.shadowColor
                  }
                }
              },
              {
                value: 100 - val
              }
            ]
          }
        ]
      };
      // 手动触发更新
      if (chartRef.value) {
        if (!chartInstance) {
          chartInstance = echarts.init(chartRef.value);
        }
        chartInstance.setOption(options);
      }

    },
    {
      immediate: true,
      deep: true
    }
  );
</script>


<style scoped lang="scss">

</style>