//今日人员行为数据占比情况 饼图
<template>
  <div
    ref="barEcharts"
    :id="id"
    :style="{ width: '100%', height: '100%' }"
  ></div>
</template>

<script>
// import resize from "./mixins/resize";
export default {
  // mixins: [resize],
  props: {
    type: {
      type: String,
      default: "",
    },
    legend: {
      type: Array,
      default() {
        return [];
      },
    },
    // title: {
    //   type: String,
    //   default: ''
    // },
    xAxisData: {
      type: Array,
      default() {
        return [];
      },
    },
    yAxisData: {
      type: Array,
      default() {
        return [];
      },
    },
    colorList: {
      type: Array,
      default() {
        return ["#88aefe", "#4983fb"];
      },
    },
  },
  data() {
    return {
      id: "pieEchartsJrryxwsjzbqk",
      chart: null,
    };
  },
  methods: {
    drawBar() {
      this.chart = this.$echarts.init(document.getElementById(this.id));
      this.chart.setOption({
        // grid: {
        //   top: 70,
        //   bottom: 70,
        //   left: 60,
        //   right: 30,
        // },
        series: [
          {
            // name: this.legend[0],
            // data: this.yAxisData,
            data: [
              { value: 1048, name: "男性" },
              { value: 735, name: "女性" },
            ],
            type: "pie",
            radius: ["40%", "65%"],
            color: ["#2F44FF", "#ffc165"],
            center: ["50%", "50%"], // 饼图位置
            label: {
              formatter: function (arg) {
                return arg.name + "：" + arg.percent + "%";
              },
              fontSize: 17,
              color: "#EBEFFF",
            },
          },
        ],
      });
    },
  },
  watch: {
    yAxisData() {
      // console.log(this.findingsData);
      // console.log(this.type);
      this.drawBar();
    },
  },
  mounted() {
    this.drawBar();
  },
};
</script>

<style></style>
