<template>
  <el-row >
    <div
      id="xg"
      style="width:570px;height:280px;margin:-70px 0 0 40px"
    ></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("xg"));
      let option = {
         color: [
            '#F8B13D',
            'rgba(46,52,64,1)',
        ],
        title: {
          text: ((this.resData[0].value / (this.resData[0].value + this.resData[1].value)) * 100).toFixed(2) + '%',
          textStyle: {
            color: '#E6EFFF',
            fontSize: 14
          },
          subtext: '巡更准时率',
          subtextStyle: {
            color: '#E6EFFF',
            fontSize: 10
          },
          itemGap: 5, // 主副标题距离
          left: 'center',
          top: '44%'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '73%',
          left: 'center',
          // orient: 'vertical',
          textStyle: {
            color: "#FFF",
            fontSize:12
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['30%', '45%'],
            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>

