<template>
  <div></div>
</template>
<script>
// import { deepClone } from "@/utils/js/common.js";
// import lodash from "lodash";
// import { getStatisticSexual } from "@/api/dataAdmin.js";
export default {
  props: {
    info: {
      type: Array,
      default: () => [],
    },
    option: {
      type: Object,
      default: () => {},
    },
    day: {
      type: String,
      default: () => "0",
    },
  },
  watch: {
    info(newval, oldval) {
      this.getData()
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      this._initEcharts(this.info);
    },
    _initEcharts(value) {
      const myChart = this.$echarts.init(this.$el);
      const echarts = this.$echarts;

      const colorList = ["#4D88FE", "#50CCCB", "#FFBF3C","#703cff","#7b7881"];
      let option = {
        grid: {
          left: "2%",
          right: "2%",
          top: "5%",
          bottom: "15%",
          containLabel: true,
        },

        legend: {
          top: "15%",
          right: "right",
          itemWidth: 13,
          textStyle: {
            color: "#556677",
          },
        },
        graphic: {
          // 这个属性可以在饼图内部填充图片,文字等
          elements: [
            {
              type: "image",
              left: "center", //
              top: "center", // 配置图片居中
            },
          ],
        },
        series: [
          {
            type: "pie",
            radius: "80%",
            center: ["30%", "52%"],
            label: {
              fontWeight: "bold",
              rich: {
                rich_blue: {
                  color: "#4D88FE",
                },
                rich_orange: {
                  color: "#FFBF3C",
                },
                rich_green: {
                  color: "#50CCCB",
                },
              },
            },
            label: {
              normal: {
                formatter: "{c}", //自定义显示格式(b:name, c:value, d:百分比)
              },
            },
            labelLine: {
              length: 6,
              length2: 6,
            },
            itemStyle: {
              normal: {
                borderColor: "#fff",
                borderWidth: 2,
                color: function (params) {
                  return colorList[params.dataIndex];
                },
              },
            },
            data: value,
          },
        ],
      };

      // if (this.option) {
      //   option = lodash.defaultsDeep(deepClone(this.option), option);
      // }
      myChart.setOption(option, true);
    },
  },
};
</script>
