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

<script setup lang="ts">
import './FestivalRevenue.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, watch } from 'vue';
import { handleGetHolidayAnalysis, handleGetHolidayDailyAnalysis } from '../../service';
import moment from 'moment';

// 注册组件
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 }
);

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

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

    myChart = echarts.init(chartDom);

    const option = {
        legend: {
            data: ['今年', '去年'],  // 对应 series 中的 name
            top: 0,              // 距离容器底部距离
            right: 0,
            itemWidth: 20,          // 图例标记的图形宽度
            itemHeight: 10,         // 图例标记的图形高度
            textStyle: {
                color: '#fff'       // 图例文字颜色
            }
        },
        xAxis: {
            type: 'category',
            data: res.category,
            boundaryGap: true,
        },
        yAxis: {
            type: 'value',
            name: '万元',
            splitLine: { show: false },
            axisLine: {
                show: true,
            }
        },
        grid: {
            left: '10',    // 增加左侧空间
            right: '10',   // 增加右侧空间
            bottom: '10',
            top: '30',
            containLabel: true
        },
        series: [
            {
                name: '今年',
                data: res.currentYear,
                type: 'line',
                smooth: true,
                lineStyle: {
                    width: 2,
                    color: '#00FFFF'
                },
                itemStyle: {
                    color: '#00FFFF'
                }
            },
            {
                name: '去年',
                data: res.lastYear,
                type: 'line',
                smooth: true,
                lineStyle: {
                    width: 2,
                    color: '#8A2656' // 改为橙色
                },
                itemStyle: {
                    color: '#8A2656' // 改为橙色
                }
            }
        ],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line' // 改为线条指示器
            },
            formatter: function (params: any) {
                let str1: string = `${params[0].seriesName}(${res.currentDateList[params[0].dataIndex]})：${res.currentYearReal[params[0].dataIndex].toLocaleString()}元`
                let str2: string = `${params[1].seriesName}(${res.lastYearDateList[params[0].dataIndex]})：${res.lastYearReal[params[1].dataIndex].toLocaleString()}元`

                return `<div>
                    <div>${str1}</div>
                    <div>${str2}</div>
                </div>`
            }
        }
    };

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

}

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

    let category: any = []
    // "4.29", "4.30", "5.01", "5.2", "5.3", "5.4"
    // let currentYear: any = [50, 40, 36, 85, 46, 77]
    // let lastYear: any = [33, 23, 56, 12, 45, 44]
    let currentYear: any = []
    let currentYearReal: any = []
    let currentDateList: any = []
    let lastYear: any = []
    let lastYearReal: any = []
    let lastYearDateList: any = []

    const req: any = {
        // pushProvinceCode: 530000,
        pushProvinceCode: 340000,
        curYear: moment().format('YYYY'),
        compareYear: moment().subtract(1, 'y').format('YYYY'),
        HolidayType: props?.FestivalValue || 5,
        StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
        ServerpartId: props.currentService?.SERVERPART_ID || "",
    }
    const data = await handleGetHolidayDailyAnalysis(req)
    console.log('dsijdasijdaiosd', data)
    if (data && data.length > 0) {
        data.forEach((item: any) => {
            if (item.name !== '累计') {
                category.push(`第${item.name}天`)
                currentYear.push(Number(item.value) / 10000)
                currentYearReal.push(Number(item.value))
                lastYear.push(Number(item.data) / 10000)
                lastYearReal.push(Number(item.data))
                currentDateList.push(item.date.split(',')[0])
                lastYearDateList.push(item.date.split(',')[1])
            }
        })
    }

    let res: any = {
        category: category,// x轴的内容
        currentYear: currentYear,// y轴的数据
        lastYear: lastYear,
        currentYearReal: currentYearReal,
        lastYearReal: lastYearReal,
        currentDateList: currentDateList,
        lastYearDateList: lastYearDateList,
    }
    return res
}


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

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



</script>

<template>
    <div class="FestivalRevenueBox">
        <div class="FestivalRevenue" id="FestivalRevenue"></div>
    </div>
</template>