ele-usky-admin/src/views/powerQuality/realTimeMonitoring/realScoreComponent/pieChart.vue

<template>
  <div shadow="never" class="homeBoxCard">
    <div class="height300" id="pieChart" ref="pieChart" />
  </div>
</template>
<script setup>
  import { defineComponent, onMounted, watch, ref } 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)
  // }

  const props = defineProps({
    getTableData: Object,
  })

  let pieChart = ref(null)

  // 读取数据 func
  const getData = async () => {}
  function echarts2() {
    let myChart = echarts.init(pieChart.value)
    // 绘制图表
    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',
        selectedMode: false, //取消图例上的点击事件
        // 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()
  })
</script>
<style lang="scss" scoped>
  .homeBoxCard {
    margin-bottom: 24px;
    :deep(.el-card__header) {
      padding-left: 12px;
      padding-right: 12px;
    }
    :deep(.el-card__body) {
      padding: 12px;
      font-size: 14px;
      line-height: 1.5715;
    }
    :deep(.el-divider) {
      margin: 8px 0;
    }
    .num {
      font-size: 30px;
      color: #515a6e;
    }
    .height300 {
      height: 300px;
    }
  }
</style>