<template>
  <div :id="props.ids" style="width: 100%; height: 100%">
  </div>
</template>

<script setup>

import * as echarts from "echarts";
import { ref, defineProps, watch, onMounted, defineEmits, watchEffect } from "vue";
import { chartAdaptation } from "@/utils/tools";
import emitter from "@/utils/eventBus.js";
import { getApi, postApi } from "@/api/tobAcco_api.js";
const emits = defineEmits(['clickpieli']);
//   import { deepClone } from "@/utils/tools";

const binTab = ref(null)
const binshow = ref(false);
const data = ref({})
const props = defineProps({
  pieNum: {
    type: Array,
    default: []
  },
  ids: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ''
  }
});

watch(
  () => props.pieNum,
  (val) => {
    getinto(val)
    binshow.value = true
  },
  { deep: true }
)
onMounted(() => {
  binshow.value = true
  getinto(props.pieNum)

})
const getinto = (data) => {
  const chartDom = document.getElementById(props.ids);
  const myChart = echarts.init(chartDom);
  let option;
  option = {
    backgroundColor: "rgba(0,0,0,0)",
    title: {
      text: props.title,
      subtext: '',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      // icon:'circle',
      textStyle: {
        color: '#319177'
      },
      itemGap: 10,
    },


    dataZoom: [
      {
        type: "slider",
        show: true,
        left: "98%",
        start: 1,
        end: 50,
        yAxisIndex: [0], //设置组件控制的y轴
      },
    ],
    series: [
      {
        name: '',
        type: 'pie',
        radius: '60%',
        right: -100,
        data: data,
        itemStyle: {
          normal: {
            label: {
              // show:false
              textStyle: {
                color: '#07c8bd'
              }
            },
            //       labelLine: {
            //           show: false
            //       },
            //       color: function (colors) {
            //    var colorList = [
            //      '#ff0000',
            //      '#00aeff',
            //      '#0d7d07',
            //    ];
            //    return colorList[colors.dataIndex];
            //  }
          }
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(9, 217, 162, 0.8)'
          }
        }

      }
    ]
  }
  //点击事件
  myChart.on("click", function (params) {
    emits('clickpieli', params.data)
  });
  option && myChart.setOption(option);
  //自适应
  chartAdaptation(myChart);
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}


</script>
<style scoped></style>