<template>
  <!-- 大屏左边区域的饼图 -->
  <div id="pieCharts" style="width: 100%; height: 100%">
  </div>
  <BinTab ref="binTab" :loadingshow="binshow" />
</template>

<script setup>

import * as echarts from "echarts";
import { ref, defineProps, reactive, onMounted, nextTick, watchEffect } from "vue";
import { chartAdaptation } from "@/utils/tools";
import emitter from "@/utils/eventBus.js";
import BinTab from "../binTab.vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
//   import { deepClone } from "@/utils/tools";

const binTab = ref(null)
const binshow = ref(false);

const props = defineProps({
  totalInsData: {
    type: Array,
    default: []
  },
});


onMounted(() => {
  // binshow.value = true
  const chartDom = document.getElementById("pieCharts");
  const myChart = echarts.init(chartDom);
  let option;
  option = {
    backgroundColor: "rgba(0,0,0,0)",
    title: {
      text: '',
      subtext: '',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
         formatter: "{b}: {c} ({d}%)"
      // formatter: "{a} <br/>{b}: {c} ({d}%)"
    },

    legend: {
      selectedMode: true,
      icon: "circle",
      itemHeight: 10, //圆点大小
      orient: 'vertical',
      // top: 10,
      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: ['30%', '80%'],
        top: 0,
        right: -150,
        data: props.totalInsData,
        itemStyle: {
          normal: {
            label: {
              // show:false
              formatter: '{c}',
              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)'
          }
        }

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

  //  4. 点击后触发
  myChart.on("click", (params) => {
    // const {visible} = binTab.value
    // binTab.value.visible = true
  });
})


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

