<template>
  <el-row >
    <div
      id="af"
      style="width:800px;height:300px;margin-top:-60px"
    ></div>
  </el-row>
</template>
<script>
import * as echarts from 'echarts';
export default {
  props: ["resData"],
  data() {
    return {
    };
  },
  watch: {
    resData() {
      this.getData();
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      let myChart = echarts.init(document.getElementById("af"));
      let option = {
         color: [
            '#F8B13D',
            'rgba(46,52,64,1)',
        ],
        title: {
          //text: data.attendeeIsSign,
          text: this.resData[0].value + this.resData[1].value + '个',
          textStyle: {
            color: '#E6EFFF',
            fontSize: 16
          },
        //   subtext: '使用率',
        //   subtextStyle: {
        //     color: '#E6EFFF',
        //     fontSize: 20
        //   },
        //   itemGap: 10, // 主副标题距离
          left: 'center',
          top: '47%'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '75%',
          left: 'center',
          itemGap: 10,
          // orient: 'vertical',
          textStyle: {
            color: "#FFF",
            fontSize:12
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['30%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              // label: {
              //   show: true,
              //   fontSize: '40',
              //   fontWeight: 'bold'
              // }
            },
            labelLine: {
              show: false
            },
            data: this.resData
          }
        ]
      };
      myChart.setOption(option);
      option && myChart.setOption(option);
      window.addEventListener("resize",function() {
        myChart.resize();
      });
    },
  },
};
</script>

