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

<script setup lang="ts">
import SmallTitle from '../smallTitle/smallTitle.vue'
import './DetailedPayment.less'
import { onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts/core';
import { RadarChart } from 'echarts/charts';
import {
    GridComponent,
    TitleComponent,
    TooltipComponent,
    LegendComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import moment from 'moment';
import { handleGetBusinessTradeRevenue, handleGetProjectYearlyArrearageList, handleGetSPBayonetList } from '../../service';

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

let myChart: echarts.ECharts;

onMounted(async () => {

    const res: any = await handleGetSectionFlowCount()

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


    myChart = echarts.init(chartDom);

    const option = {
        // tooltip: { // 新增 tooltip 配置
        //     trigger: 'item',
        //     formatter: function (params: any) {
        //         return `
        //         <div style="font-weight:bold">${params.name}</div>
        //     `;
        //     }
        // },
        radar: {
            indicator: res.category,
            shape: 'circle',
            splitNumber: 5,
            radius: '60%', // 调整雷达图大小，留出空间给文字
            center: ['50%', '60%'], // 2. 确保居中
            axisName: {
                color: 'rgb(255, 255, 255)',
                padding: 10
            },
            splitLine: {
                lineStyle: {
                    color: [
                        'rgba(25, 46, 76, 1)',
                        'rgba(25, 46, 76, 1)',
                        'rgba(25, 46, 76, 1)',
                        'rgba(25, 46, 76, 1)',
                        'rgba(25, 46, 76, 1)',
                        'rgba(25, 46, 76, 1)',
                    ]
                }
            },
            splitArea: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(25, 46, 76, 1)',
                }
            }
        },
        series: [
            {
                type: 'radar',
                lineStyle: {
                    width: 1,
                    opacity: 0.5
                },
                data: [{ value: res.seriesData }],
                symbol: 'none',
                itemStyle: {
                    color: '#0289ED'
                }
            }
        ]
    };

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

// 拿到业态偏好数据
const handleGetSectionFlowCount = async () => {

    const req: any = {

    }
    const data = await handleGetProjectYearlyArrearageList(req)
    console.log('handleGetProjectYearlyArrearageListhandleGetProjectYearlyArrearageListhandleGetProjectYearlyArrearageList', data);

    let category: any = []
    let seriesData: any = []
    let realData: any = []

    let list: any = data.ProjectCompleteDetailList

    let max: number = 0

    if (list && list.length > 0) {
        list.forEach((item: any) => {
            let prent: number = Number(((item.Account_Amount > 0 ? item.Payment_Amount / item.Account_Amount : 0) * 100).toFixed(2))
            if (prent > max) {
                max = prent
            }
        })

        list.forEach((item: any) => {
            let prent: number = Number(((item.Account_Amount > 0 ? item.Payment_Amount / item.Account_Amount : 0) * 100).toFixed(2))

            category.push({ name: `${item.Account_Name}(${prent}%)`, max: max })
            seriesData.push(prent)
            // realData.push(item.data)
        })
    }

    console.log('dsadjashdudftgsagsdfs', seriesData);
    console.log('dsadjashdudftgsagsdfs', category);

    let res: any = {
        category: category,// x轴的内容
        seriesData: seriesData,// y轴的数据
        realData: realData,// 真实数据
        max: max
    }
    return res
}


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

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

</script>




<template>
    <div class="DetailedPaymentBox">
        <SmallTitle :title="`年详细款项完成进度`"></SmallTitle>

        <div class="DetailedPaymentCharts">
            <!-- <div class="DetailedPaymentUnit">万元</div> -->
            <div class="DetailedPaymentChartsContent">
                <div class="DetailedPayment" id="DetailedPayment"></div>
            </div>
        </div>
    </div>
</template>