fiveFollowing-admin/src/views/powerQuality/realTimeMonitoring/loopMonitorComponent/loopPieChart.vue

<template>
  <div shadow="never" class="homeBoxCard" v-loading="loading">
    <div class="height200" ref="pieChart" />
  </div>
</template>
<script lang="ts">
import {
  computed,
  defineComponent,
  onMounted,
  Ref,
  ref,
  watch,
  ComputedRef,
} from "vue";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import { EChartOption } from "echarts";
import useEcharts from "@/composables/useEcharts";
import { StateType as HomeStateType } from "../../../home/store";
// import { ChartDataType } from "../../data";

var echartData=[
               {value:335, legendname:'优秀',name:"优秀",itemStyle:{color:"#40ABFE"}},
               {value:335, legendname:'合格',name:"合格",itemStyle:{color:"#EEAA3F"}},
               {value:335, legendname:'不合格',name:"不合格",itemStyle:{color:"#FF2222"}},
            
            ]

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 worksChartOption: EChartOption = {
  
   title: [
    {
        text:''+total_datas,
        subtext: '共计回路',
        textStyle:{
            fontSize:24,
            color:"black"
        },
        subtextStyle: {
            fontSize: 16,
            color: 'black'
        },
        textAlign:"center",
        left: '49%',
        top: '40%',
    }],
    tooltip: {
        trigger: 'item',
        formatter:function (parms:any){
          var str=  parms.seriesName+"</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: ['40%', '60%'],

             clockwise: false, //饼图的扇区是否是顺时针排布
            avoidLabelOverlap: false,
            label : {
              show : false
            },
            labelLine : {
              show : false
            },
            data:echartData
        }
    ]

};

interface WorksChartCardSetupData {
  t: (key: string | number) => string;
  loading: Ref<boolean>;
  pieChart: Ref;
  total: ComputedRef<number>;
  num: ComputedRef<number>;
}

export default defineComponent({
  name: "PieChart",
  setup(): WorksChartCardSetupData {
    const store = useStore<{ Home: HomeStateType }>();
    const { t } = useI18n();

    // 总数
    const total = computed<number>(() => store.state.Home.worksChartData.total);
    // num
    const num = computed<number>(() => store.state.Home.worksChartData.num);
    // chart Data
    // const chartData = computed<ChartDataType>(
    //   () => store.state.Home.worksChartData.chart
    // );

    // echarts 图表
    const pieChart = ref<HTMLDivElement>();
    const echarts = useEcharts(pieChart, worksChartOption);
    // watch([echarts, chartData], () => {
    //   if (echarts.value) {
    //     const option: EChartOption = {
    //       xAxis: {
    //         // data: ["03-01", "03-01", "03-01", "03-01", "03-01", "03-01", "03-01"]
    //         data: chartData.value.day,
    //       },
    //       series: [
    //         {
    //           name: "新增",
    //           // data: [3, 1, 1, 2, 2, 2, 2]
    //           data: chartData.value.num,
    //         },
    //       ],
    //     };
    //     echarts.value.setOption(option);
    //   }
    // });

    // 读取数据 func
    const loading = ref<boolean>(true);
    const getData = async () => {
      loading.value = true;
      await store.dispatch("Home/queryWorksChartData");
      loading.value = false;
    };

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

    return {
      t,
      loading,
      pieChart,
      total,
      num,
    };
  },
});
</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;
  }
  .height200 {
    height: 200px;
  }
}
</style>