<template>
  <div :id="props.ids" style="width: 100%; height: 100%">
  </div>
</template>
<script setup>
import * as echarts from "echarts";
import { ref, defineProps, onMounted } from "vue";
import { chartAdaptation } from "@/utils/tools";
const binshow = ref(false);
const props = defineProps({
  pieNum: {
    type: Array,
    default: []
  },
  ids: {
    type: String,
    default: ''
  }
});
onMounted(() => {
  binshow.value = true
  const chartDom = document.getElementById(props.ids);
  const myChart = echarts.init(chartDom);
  let option;
  option = {
    backgroundColor: "rgba(0,0,0,0)",
    title: {
      text: '',
      subtext: '',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      textStyle: {
        color: '#319177'
      },
      itemGap: 10,
    },


    dataZoom: [
      {
        type: "slider",
        show: true,
        left: "98%",
        start: 1,
        end: 50,
        yAxisIndex: [0],
      },
    ],
    series: [
      {
        name: '',
        type: 'pie',
        radius: '60%',
        right: -100,
        data: props.pieNum,
        itemStyle: {
          normal: {
            label: {
              textStyle: {
                color: '#07c8bd'
              }
            }
          }
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(9, 217, 162, 0.8)'
          }
        }

      }
    ]
  }
  option && myChart.setOption(option);
  //自适应
  chartAdaptation(myChart);
  window.addEventListener('resize', () => {
    myChart.resize()
  })
})
</script>
<style scoped></style>