admin-fiveFollowing/src/views/powerQuality/realTimeMonitoring/realScoreComponent/pieChart.vue

<template>
  <div shadow="never" class="homeBoxCard" v-loading="loading">
    <div class="height300" id="pieChart" ref="pieChart" />
  </div>
</template>
<script>
import { defineComponent, onMounted, ref ,watch} from 'vue'
// import { useStore } from 'vuex'
import * as echarts from 'echarts'

// var total_datas = 0
// for (var i = 0; i < echartData.length; i++) {
//   total_datas += Number(echartData[i].value)
//   console.log(typeof echartData[i].value)
// }

export default defineComponent({
  name: 'PieChart',
  props: {
    getTableData: Object,
  },
  setup(props) {
    // 读取数据 func
    const loading = ref(true)
    const getData = async () => {
      loading.value = false
    }
    function echarts2() {
      let myChart = echarts.init(document.getElementById('pieChart'))
      // 绘制图表
      myChart.setOption({
        title: [
          {
            text: 1,
            subtext: '共计回路',
            textStyle: {
              fontSize: 24,
              color: 'black',
            },
            subtextStyle: {
              fontSize: 16,
              color: 'black',
            },
            textAlign: 'center',
            left: '49%',
            top: '40%',
          },
        ],
        tooltip: {
          trigger: 'item',
          formatter: function (parms) {
            var str =
              '</br>' +
              parms.marker +
              '' +
              parms.data.legendname +
              '</br>' 
              // +
              // '数量：' +
              // parms.data.value +
              // '</br>' +
              // '占比：' +
              // parms.percent +
              // '%'
            return str
          },
        },
        legend: {
          type: 'scroll',
          orient: 'horizontal',
          bottom: '0%',
          align: 'left',
          // top:'middle',
          textStyle: {
            color: '#8C8C8C',
          },
          height: 250,
        },
        series: [
          {
            // name: '标题',
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['37%', '55%'],

            clockwise: false, //饼图的扇区是否是顺时针排布
            avoidLabelOverlap: false,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: props.getTableData.score>=80?1:0,
                legendname: '优秀',
                name: '优秀',
                itemStyle: { color: '#40ABFE' },
              },
              {
                value: props.getTableData.score>=60?1:0,
                legendname: '合格',
                name: '合格',
                itemStyle: { color: '#EEAA3F' },
              },
              {
                value: props.getTableData.score<60?1:0,
                legendname: '不合格',
                name: '不合格',
                itemStyle: { color: '#FF2222' },
              },
            ],
          },
        ],
      })
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }

    const writeValue = (val) => {
      val
      getData()
      echarts2()
    }

    //监听变化
    watch(
      () => props.getTableData,
      (newVal, oldVal, clear) => {
        // 执行异步任务，并得到关闭异步任务的 id
        // console.log(newVal)
        let id = writeValue(newVal, oldVal)
        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
        clear(() => clearTimeout(id))
      },
      { lazy: true }
    )


    onMounted(() => {
      getData()
      echarts2()
    })

    return {
      loading,
      echarts2,
    }
  },
})
</script>
<style lang="scss" scoped>
.homeBoxCard {
  margin-bottom: 24px;
  ::v-deep(.el-card__header) {
    padding-left: 12px;
    padding-right: 12px;
  }
  ::v-deep(.el-card__body) {
    padding: 12px;
    font-size: 14px;
    line-height: 1.5715;
  }
  ::v-deep(.el-divider) {
    margin: 8px 0;
  }
  .num {
    font-size: 30px;
    color: #515a6e;
  }
  .height300 {
    height: 300px;
  }
}
</style>