dongxin/src/components3/conferenceRoomStatistics/pie.vue

<template>
  <el-row >
    <div
      id="index1"
      style="width:360px;height:360px;margin:-78px 0 0 134px;"
    ></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("index1"));
      let option = {
         color: [
            '#F8B13D',
            'rgba(46,52,64,1)',
        ],
        title: {
          //text: data.attendeeIsSign,
          text: this.data[0].value + '%',
          textStyle: {
            color: '#E6EFFF',
            fontSize: 25
          },
          subtext: '使用率',
          subtextStyle: {
            color: '#E6EFFF',
            fontSize: 20
          },
          itemGap: 10, // 主副标题距离
          left: 'center',
          top: '42%'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '70%',
          left: 'center',
          textStyle: {
            color: "#FFF"
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['30%', '35%'],
            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>