<template>
   <div style="height:100%;width:100%" :id="echartsId"></div>
</template>
  
<script setup>
import * as echarts from "echarts";
import "echarts-gl";
import { ref, watch ,defineProps,nextTick } from "vue";
const props = defineProps({
  echartsId:{
    type:String,
    default:'lineId'
  },
  color:{
    type:String,
    default:'lineId'
  },
  data:{
    type:Array,
    default:[]
  }
});
watch(()=>props.data,val=>{
  nextTick(()=>{ handleDate(val) })
},{immediate:true,deep:true})

const handleDate = (val)=>{
    let newArray = val.map(v=>{
        let obj = {
            value: v.value,
            name: v.label,
        }
        if(v.color) obj.itemStyle = {  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [  { offset: 0, color: v.color[0] },  { offset: 1, color: v.color[1] } ])}
        return obj
    })
    initChart(newArray)
}

const initChart = (data) => {
  var myChart = echarts.init(document.getElementById(props.echartsId));
  const option = {
    backgroundColor: "transparent",
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
      backgroundColor: "rgba(0,0,0,0.7)",
      borderColor: "#0C2E5A",
      textStyle: {
        color: "#fff"
      }
    },
    legend: {
      top: "middle",
      right: "5%",
      orient: "vertical",
      itemGap: 20,
      textStyle: {
        color: props.color,
        fontSize: 14
      },
      itemWidth: 15,
      itemHeight: 15,
      icon: "roundRect",
      formatter: function (name) {
        const data = option.series[0].data;
        const target = data.find((item) => item.label === name);
        if (target) {
          return `${name}  ${target.value}  ${( (target.value / 50) *  100 ).toFixed(0)}%`;
        }
        return name;
      }
    },
    series: [
      {
        name: "情报反馈统计",
        type: "pie",
        radius: ["40%", "75%"],
        center: ["30%", "50%"],
        startAngle: 90,
        zlevel: 10,
        itemStyle: {},
        selectedMode: "single",
        selectedOffset: 30,
        animation: true,
        animationType: "scale",
        animationEasing: "elasticOut",
        label: { show: false  },
        labelLine: { show: false },
      
        data: data,
        zlevel: 10,
        emphasis: {
          scale: true,
          scaleSize: 10,
          itemStyle: {
            shadowBlur: 30,
            shadowColor: "rgba(0,0,0,0.6)"
          }
        }
      }
    ]
  };

  option && myChart.setOption(option);

  // 监听窗口大小变化
  window.addEventListener("resize", () => {
    myChart.resize();
  });
};

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