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

<script setup lang="ts">
import { onBeforeUnmount, onMounted, watch } from 'vue';
import './FestivalRevenueSumInfo.less'

import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import {
    GridComponent,
    TitleComponent,
    TooltipComponent,
    LegendComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { handleGetHolidayRevenueRatio } from '../../service';


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

let myChart: echarts.ECharts;


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

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


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

// 初始运行的方法
const handleGoMounted = async () => {
    const res = await handleGetRealData()

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

    myChart = echarts.init(chartDom);

    const option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: [  // 使用两个legend对象分别控制
            // 第一行：外圈圆环图例
            {
                data: res.bigType.map((name: string) => ({
                    name,
                    icon: 'circle'
                })),
                orient: 'horizontal',
                top: 'bottom',
                left: 'center',
                padding: [0, 0, 60, 0],  // 下边距为内圈图例留空间
                textStyle: { color: '#fff' }
            },
            // 第二行：内圈饼图图例
            {
                data: res.smallType.map((name: string) => ({
                    name,
                    icon: 'rect'
                })),
                orient: 'horizontal',
                top: 'bottom',
                left: 'center',
                textStyle: { color: '#fff' }
            }
        ],
        series: [
            // 外圈环形图
            {
                name: '外圈数据',
                type: 'pie',
                radius: ['50%', '65%'],
                center: ['50%', '35%'],  // 稍微上移给图例留空间
                data: res.bigData,
                // data: [
                //     { value: 335, name: 'A类' },
                //     { value: 310, name: 'B类' },
                //     { value: 234, name: 'C类' },
                //     { value: 135, name: 'D类' }
                // ],
                label: { show: false }
            },
            // 内圈饼图
            {
                name: '内圈数据',
                type: 'pie',
                radius: ['0%', '30%'],
                center: ['50%', '35%'],  // 与外圈同中心
                data: res.smallData,
                // data: [
                //     { value: 100, name: '子类1' },
                //     { value: 200, name: '子类2' },
                //     { value: 300, name: '子类3' }
                // ],
                label: { show: false }
            }
        ]
    };


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

}

// 拿到数据
const handleGetRealData = async () => {
    const req: any = {
        ProvinceCode: '530000'
    }

    let FestivalRevenueSumInfo = sessionStorage.getItem('FestivalRevenueSumInfo')
    let data: any = []
    if (FestivalRevenueSumInfo) {
        data = JSON.parse(FestivalRevenueSumInfo)
    } else {
        data = await handleGetHolidayRevenueRatio(req)
        sessionStorage.setItem("FestivalRevenueSumInfo", JSON.stringify(data))
    }


    // const data = await handleGetHolidayRevenueRatio(req)
    console.log('datadatadatadatadata', data)

    let bigAiObj: any = {}
    let smallAiObj: any = {}
    // 圆环图数据
    let bigData: any = []
    let bigType: any = []
    // 里面的扇形数据
    let smallData: any = []
    let smallType: any = []
    if (data && data.length > 0) {
        data.forEach((item: any) => {
            bigData.push({ name: `${item.name} ${item.value}%`, value: Number(item.value) })
            bigType.push(`${item.name} ${item.value}%`)
            if (item.name === "节假日") {
                if (item.children && item.children.length > 0) {
                    item.children.forEach((subItem: any) => {
                        smallType.push(`${subItem.name} ${subItem.value}%`)
                        smallData.push({ name: `${subItem.name} ${subItem.value}%`, value: Number(subItem.value) })
                        smallAiObj[subItem.name] = subItem.value + '%'
                    })
                }
            }
            bigAiObj[item.name] = item.value + '%'
        })
    }


    let FestivalRevenueSumInfoAI = sessionStorage.getItem('FestivalRevenueSumInfoAI')
    if (FestivalRevenueSumInfoAI) { } else {
        let aiObj: any = {
            "节假日普通日": bigAiObj,
            "具体节假日": smallAiObj
        }
        sessionStorage.setItem("FestivalRevenueSumInfoAI", JSON.stringify(aiObj))
    }




    return {
        bigData: bigData,
        smallData: smallData,
        bigType: bigType,
        smallType: smallType,
    }

}

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

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



<template>
    <div class="FestivalRevenueSumInfoBox">
        <div class="FestivalRevenueSumInfo" id="FestivalRevenueSumInfo"></div>
    </div>
</template>