YNMap/src/page/index/components/DailyInspection/DailyInspection.vue

<script setup lang="ts">
import * as echarts from 'echarts/core';
import { PieChart } from 'echarts/charts';
import {
    GridComponent,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GraphicComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
import returnRateBg from '../../../../assets/image/returnRateBg.png'
import { handleGetPatrolAnalysis } from '../../service';
import moment from 'moment';
import SmallTitle from '../smallTitle/smallTitle.vue';
import './DailyInspection.less'


// 注册组件
echarts.use([
    PieChart,
    GridComponent,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GraphicComponent,
    CanvasRenderer
]);

let myChart: echarts.ECharts;
// 自定义颜色列表
const colorList = ['#7D4CD2', '#2E2C5D'];
// 日常巡检数据
let dailyDetailObj = ref<any>()

onMounted(async () => {
    await handleGoMounted()
})

const handleGoMounted = async () => {
    const res: any = await handleGetData()

    const chartDom = document.getElementById('DailyInspectionCharts');
    if (!chartDom) return;

    myChart = echarts.init(chartDom);

    const option = {
        tooltip: {  // 新增 tooltip 配置
            trigger: 'item',  // 触发类型：坐标轴触发
            axisPointer: {    // 坐标轴指示器配置
                type: 'shadow' // 阴影指示器（适合柱状图）
            },
            formatter: function (params: any) {  // 自定义提示框内容
                return `
                    <div style="font-weight:bold">${params.data.name} ${params?.percent}%  ${res.realData[params.dataIndex]}</div>
                `;
            }
        },
        graphic: {  // 关键配置：在图表中心添加图片
            elements: [
                {
                    type: 'image',
                    style: {
                        image: returnRateBg,
                        width: 83,
                        height: 83
                    },
                    left: 'center',
                    top: 'center',
                    z: 10
                },
                {
                    // 中心文字（叠加在图片上）
                    type: 'text',
                    style: {
                        text: `${dailyDetailObj.value.CompleteRate || '-'}`, // 要显示的文字内容
                        font: 'bold 20px Arial', // 字体样式
                        fill: '#FFFFFF', // 文字颜色
                        textAlign: 'center',
                        textVerticalAlign: 'middle'
                    },
                    left: 'center',
                    top: 'center',
                    z: 20 // 层级高于图片
                }
            ]
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['85%', '100%'],
                center: ['50%', '50%'],  // 关键修改：强制居中 [水平位置, 垂直位置]
                avoidLabelOverlap: false,

                itemStyle: {
                    color: function (params: any) {
                        return colorList[params.dataIndex];
                    }
                },
                label: {
                    show: false
                },
                emphasis: false,
                labelLine: {
                    show: false
                },
                data: res.seriesData
            }
        ]
    };

    myChart.setOption(option);
    myChart.resize();
    window.addEventListener('resize', resizeChart);
}

// 拿到传入的数据
const props = defineProps<{
    currentService?: any;
}>();

// 监听传入的选中服务区
watch(
    () => props.currentService,
    (newVal, oldVal) => {
        handleGoMounted()
    },
    { deep: true }
);

// 业态结构占比
const handleGetData = async () => {

    const req: any = {
        StartDate: '2025-01-01',
        EndDate: '2025-01-01',
        provinceCode: "340000"
    }

    const data = await handleGetPatrolAnalysis(req)

    console.log('业态结构占比', data)


    dailyDetailObj.value = data


    let res: any = {
        // category: category,// x轴的内容
        seriesData: [data.CompleteRate, 100 - data.CompleteRate],// y轴的数据
        // realData: realData// 真实数据
    }
    return res
}


const resizeChart = () => {
    myChart?.resize();
};

onBeforeUnmount(() => {
    window.removeEventListener('resize', resizeChart);
    myChart?.dispose();
});
</script>




<template>
    <div class="DailyInspectionBox">
        <SmallTitle title="日常巡检" />

        <div class="DailyInspectionContent">
            <div class="DailyInspectionCharts" id="DailyInspectionCharts"></div>

            <div class="DailyInspectionRightBox">
                <div class="DailyInspectionRightBoxTop">达标率/全省(%)</div>
                <div class="DailyInspectionRightBoxBottom">
                    <div class="DailyInspectionRightBoxBottomItem">
                        <div class="DailyInspectionRightBoxBottomItemValue">{{ dailyDetailObj?.RectifyCount || '-' }}
                        </div>
                        <div class="DailyInspectionRightBoxBottomItemLabel">已整改（个）</div>
                    </div>

                    <div class="DailyInspectionRightBoxBottomItem">
                        <div class="DailyInspectionRightBoxBottomItemValue">{{ dailyDetailObj?.UnRectifyCount || '-' }}
                        </div>
                        <div class="DailyInspectionRightBoxBottomItemLabel">未整改(个)</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>