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

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

// 季月年的选中
let selectType = ref<number>(1)

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

let myChart: echarts.ECharts;

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

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

    myChart = echarts.init(chartDom);

    const option = handleSetConfig(res)

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

// 修改选择的季月年
const handleChangeType = async (value: number) => {
    selectType.value = value
}

const handleGetData = async () => {

    let category: string[] = []
    let TicketCountData: number[] = [] // 订单笔数
    let SellAmountData: string[] = [] // 交易金额

    const req: any = {
        DataType: 2,// 1 日度  2 月度
        ProvinceCode: '530000',
        StartMonth: moment().startOf('y').format('YYYYMM'),
        EndMonth: moment().subtract(1, 'M').format('YYYYMM'),
    }

    console.log('dkosajdaihfysudafhs', req);

    // const data = await handleGetMallOrderSummary(req)

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



    console.log('gjisayudshfsdafdfdasfasd', data);

    if (data && data.length > 0) {
        data.forEach((item: any) => {
            category.push(`${item.StatisticsMonth}月`)
            TicketCountData.push(item.TicketCount)
            SellAmountData.push(item.SellAmount)
        })
    }


    let res: any = {
        category: category,// x轴的内容
        TicketCountData: TicketCountData,// 订单笔数
        SellAmountData: SellAmountData// 交易金额
    }
    return res
}

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

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

const handleSetConfig = (res: any) => {
    const option = {
        xAxis: {
            type: 'category',
            data: res.category,
            axisLine: {
                lineStyle: {
                    color: '#fff' // X轴线颜色
                }
            },
            axisLabel: {
                color: '#fff', // X轴标签颜色
                interval: 0,
            },

        },
        yAxis: [
            {
                type: 'value',
                name: '交易笔数(笔)',
                position: 'left',
                splitLine: { show: false },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#fff' // 左侧Y轴线颜色（与第一条折线颜色一致）
                    }
                },
                axisLabel: {
                    color: '#fff' // 左侧Y轴标签颜色
                },
                nameTextStyle: {
                    color: '#fff', // 左侧Y轴名称颜色
                    padding: [0, 0, 0, 20]
                }
            },
            {
                type: 'value',
                name: '交易金额(元)',
                position: 'right',
                splitLine: { show: false },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#fff' // 右侧Y轴线颜色（与第二条折线颜色一致）
                    }
                },
                axisLabel: {
                    color: '#fff' // 右侧Y轴标签颜色
                },
                nameTextStyle: {
                    color: '#fff', // 右侧Y轴名称颜色
                    padding: [0, 0, 0, 0]
                }
            }
        ],
        grid: {
            left: '0',    // 增加左侧空间给Y轴标签
            right: '10',   // 增加右侧空间给Y轴标签
            bottom: '0',
            top: '50',
            containLabel: true
        },
        series: [
            {
                name: '交易笔数',
                type: 'line',
                yAxisIndex: 0, // 关联左侧Y轴
                data: res.TicketCountData,
            },
            {
                name: '交易金额',
                type: 'line',
                yAxisIndex: 1, // 关联右侧Y轴
                data: res.SellAmountData,
            }
        ],
        tooltip: {
            trigger: 'axis',
            formatter: function (params: any) {
                return `
                <div style="font-weight:bold">${params[0].name}</div>
                <div >${params[0].seriesName}: ${params[0].value}笔</div>
                <div >${params[1].seriesName}: ${params[1].value}元</div>
            `;
            }
        },
        legend: {
            data: ['交易笔数', '交易金额'],
            top: 0,
            right: 0,
            textStyle: {
                color: '#fff'
            }
        },
        color: ['#FF5E5E', '#FF9500']
    };
    return option
}

const handleUpdatePie = async () => {
    myChart.setOption({
        series: [], // 清空 series
    }, { replaceMerge: 'series' }); // 替换 series 部分

    const res: any = await handleGetData()
    const option = handleSetConfig(res)
    myChart.setOption(option)
}
defineExpose({
    handleUpdatePie
});

</script>


<template>
    <div class="MallOrderStatisticsBox">
        <SmallTitle :title="'商城订单统计'">
            <!-- <template #extra>
                <div class="changeTypeBox">
                    <div :class="selectType === 1 ? 'changeTypeItem selectChangeTypeItem' : 'changeTypeItem'"
                        @click="handleChangeType(1)">月</div>
                    <div :class="selectType === 2 ? 'changeTypeItem selectChangeTypeItem' : 'changeTypeItem'"
                        @click="handleChangeType(2)">年</div>
                </div>
            </template> -->
        </SmallTitle>


        <div class="MallOrderStatistics" id="MallOrderStatistics"></div>

    </div>

</template>