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

<script setup lang="ts">
import SmallTitle from '../smallTitle/smallTitle.vue'
import './ConsumptionLevel.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 { onBeforeUnmount, onMounted } from 'vue';
import { handleGetGetBusinessTradeLevel } from '../../service';
import moment from 'moment';

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

let myChart: echarts.ECharts;

onMounted(async () => {
    const res: any = await handleGetData()
    console.log('res', res);

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

    myChart = echarts.init(chartDom);

    const option = {
        legend: {
            right: 0,
            textStyle: {
                color: '#fff',
                fontSize: 12,
                padding: [0, 0, 0, 5]
            },
        },
        grid: {
            left: '0',
            right: '0',
            bottom: '0',
            top: '30',
            containLabel: true
        },
        yAxis: {
            type: 'value',
            name: "%",
            show: true,      // 显式启用 Y 轴（即使默认也建议写上）
            nameTextStyle: {
                color: '#fff', // 确保名称颜色可见
                padding: [0, 0, 0, 0] // 调整名称位置
            },
            splitLine: { show: false },
            axisLabel: {
                color: '#fff',
                interval: 0,
                show: true   // 显式启用刻度标签
            },
            axisLine: {
                show: true,  // 显式启用轴线
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        xAxis: {
            type: 'category',
            data: res.category,
            axisLabel: {
                color: '#fff',
                interval: 0  // 强制显示所有标签
            },
            axisLine: {
                lineStyle: {
                    color: '#fff' // 设置 y 轴线颜色为白色（可选）
                }
            },
        },
        series: res.seriesData,
        tooltip: {
            trigger: 'item',
            formatter: function (params: any) {
                return `
                <div style="font-weight:bold">${params.seriesName}  ${params.value}%</div>
            `;
            }
        },
    };

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

// 拿到数据
const handleGetData = async () => {

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

    const req: any = {
        ProvinceCode: '530000',
        StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
        // ServerpartId: ''
    }

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


    // const data = await handleGetGetBusinessTradeLevel(req)


    category = data.legend
    let list = data.ColumnList


    if (list && list.length > 0) {
        list.forEach((item: any) => {
            seriesData.push({
                name: item.name,
                type: 'bar',
                stack: 'Ad',
                barWidth: 6,
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    color: item.name === '低消费' ? '#A7DAFF' : item.name === '普通消费' ? '#0094FF' : item.name === '高消费' ? '#FF9500' : '' // 直接指定颜色值
                },
                data: item.data
            })
        })
    }


    let res: any = {
        category: category,// x轴的内容
        seriesData: seriesData,
    }

    let ConsumptionLevelAI = sessionStorage.getItem('ConsumptionLevelAI')
    if (ConsumptionLevelAI) { } else {
        let aiObj: any = {}

        for (let i = 0; i < res.category.length; i++) {
            aiObj[res.category[i]] = `低消费占比${list[0].data[i]},普通消费占比${list[1].data[i]},高消费占比${list[2].data[i]},`
        }

        sessionStorage.setItem("ConsumptionLevelAI", JSON.stringify(aiObj))
    }


    return res
}


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

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



</script>

<template>
    <div class="ConsumptionLevelBox">
        <SmallTitle :title="'消费水平'">
            <template #extra>
                <div class="ConsumptionLevelDesc">注：低消费＜30 30≤普通消费≤60 高消费＞60</div>
            </template>

        </SmallTitle>

        <div class="ConsumptionLevel" id="ConsumptionLevel"></div>
    </div>
</template>