<template>
  <el-row style="display: inline-block;">
    <div
      id="meeting"
      style="width:300px;height:300px; position: absolute;
  top:-90px;
  left:-60px;"
    ></div>
  </el-row>
</template>
<script>
import * as echarts from "echarts";
export default {
  props: ["resData"],
  data() {
    return {
      data:[]
    };
  },
  watch: {
    resData(val,old){
      this.data = val
      this.getData()
    }
  },
  methods: {
    getData() {
      let myChart = echarts.init(document.getElementById("meeting"));
      let option = {
         color: [
            '#F18738',
            '#ccc',
        ],
        title: {
          //text: data.attendeeIsSign,
          text: this.data[0].value + '%',
          textStyle: {
            color: '#03C2F4',
            fontSize: 22
          },
          subtext: '使用率',
          subtextStyle: {
            color: '#03C2F4',
            fontSize: 12
          },
          itemGap: 10, // 主副标题距离
          left: 'center',
          top: '42%'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '70%',
          left: 'center',
          textStyle: {
            color: "#000"
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['30%', '40%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              // label: {
              //   show: true,
              //   fontSize: '40',
              //   fontWeight: 'bold'
              // }
            },
            labelLine: {
              show: false
            },
            data:this.data
          }
        ]
      };
    
      myChart.setOption(option);
      option && myChart.setOption(option);
      setTimeout(function () {
        window.onresize = function () {
          myChart.resize();
        };
      }, 200);
    },
  },
};
</script>
<style>
.cc{
  position: absolute;
  top:0;
  left:0;
}
</style>

