<template>
  <div id="binChartstwo" style="width: 100%; height: 100%"></div>
</template>
  

<script setup>
import * as echarts from "echarts";

import {
  ref,
  defineProps,
  reactive,
  onMounted,
  defineExpose,
  nextTick
} from "vue";
import { chartAdaptation } from "@/utils/tools";
//   import { deepClone } from "@/utils/tools";
const props = defineProps({
  binData: {
    type: Array,
    default: []
  },
  loadingshow: {
    type: Boolean,
    default: false
  }
});

onMounted(() => {
  nextTick(() => {
    if (props.loadingshow) {
      getBintwo(props.binData);
    }
  });
});
const getBintwo = (data) => {
  const chartDom = document.getElementById("binChartstwo");
  const myChart = echarts.init(chartDom);
  let option;

  option = {
    backgroundColor: "rgba(0,0,0,0)",
    title: {
      text: "",
      subtext: "",
      left: "center"
    },
    tooltip: {
      trigger: "item"
    },
    legend: {
      orient: "vertical",
      left: "left",
      textStyle: {
        color: "#319177"
      }
    },

    dataZoom: [
      {
        type: "slider",
        show: true,
        left: "93%",
        start: 1,
        end: 50,
        yAxisIndex: [0] //设置组件控制的y轴
      }
    ],
    series: [
      {
        name: "",
        type: "pie",
        radius: ["40%", "70%"],
        left: 100,
        // adjust the start angle
        startAngle: 180,
        label: {
          show: true,
          formatter(param) {
            // correct the percentage
            return param.name + " (" + param.percent * 1 + "%)";
          },
          textStyle: {
            color: "#07c8bd"
          }
        },
        data: data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(9, 217, 162, 0.8)"
          }
        }
      }
    ]
  };
  option && myChart.setOption(option);
  //自适应
  chartAdaptation(myChart);
};
</script>
<style scoped></style>
  
  