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

<script setup lang="ts">
import SmallTitle from '../smallTitle/smallTitle.vue'
import './ConsumptionConversion.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 { handleGetTransactionConvert } 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()

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

    myChart = echarts.init(chartDom);

    const option = {
        legend: {
            top: 0,              // 距离容器底部距离
            right: 0,
            itemWidth: 30,          // 图例标记的图形宽度
            itemHeight: 10,         // 图例标记的图形高度
            textStyle: {
                color: '#fff'       // 图例文字颜色
            }
        },
        xAxis: {
            type: 'category',
            data: res.category,
            boundaryGap: true,
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#ffffff'
                }
            },
            axisTick: {
                alignWithLabel: true // 保证刻度线与标签对齐
            }
        },
        yAxis: [
            {
                type: 'value',
                name: '车流量(辆)',
                nameTextStyle: {
                    color: '#ffffff', // Y轴名称颜色
                    padding: [0, 0, 0, 20]
                },
                splitLine: { show: false },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#ffffff'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    formatter: '{value}' // 添加单位
                },
                offset: 0, // 确保Y轴紧贴图表
                splitNumber: 4,
            },
            {
                type: 'value',
                name: '客单量(笔)',
                nameTextStyle: {
                    color: '#ffffff', // Y轴名称颜色
                    padding: [0, 0, 0, 0]
                },
                splitLine: { show: false },
                position: 'right',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#ffffff'
                    }
                },
                axisLabel: {
                    color: '#ffffff',
                },
                offset: 0, // 确保Y轴紧贴图表
                splitNumber: 4,
            }
        ],
        grid: {
            left: '20',    // 增加左侧空间
            right: '10',   // 增加右侧空间
            bottom: '0',
            top: '50',
            containLabel: true
        },
        series: [
            {
                name: '车流量',
                data: res.carResList.map((value: any, index: any) => ({
                    value: value,
                    symbol: index % 2 === 0 ? 'circle' : 'none',
                    symbolSize: 6
                })),
                type: 'line',
                smooth: true,
                lineStyle: {
                    width: 2,
                    color: '#00F6FF'
                },
                itemStyle: {
                    color: '#00F6FF'
                },
                yAxisIndex: 0 // 绑定左侧Y轴
            },
            {
                name: '客单量',
                data: res.orderResList.map((value: any, index: any) => ({
                    value: value,
                    symbol: index % 2 === 0 ? 'circle' : 'none',
                    symbolSize: 6
                })),
                type: 'line',
                smooth: true,
                lineStyle: {
                    width: 2,
                    color: '#008CFF' // 改为橙色
                },
                itemStyle: {
                    color: '#008CFF' // 改为橙色
                },
                yAxisIndex: 1 // 绑定右侧Y轴
            }
        ],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line' // 改为线条指示器
            },
            formatter: function (params: any) {
                console.log('paramsparamsparamsparams', params);

                return `<div>
                    <div>${params[0].name}时：</div>
                    <div>车流量：${params[0]?.value}辆</div>
                    <div>客单量：${params[1]?.value}笔</div>
                </div>`

                // let toolStr: string[] = []
                // if (params && params.length > 0) {
                //     params.forEach((item: any) => {
                //         toolStr.push(
                //             `${item.seriesName}：${item.value}元`
                //         )
                //     })
                // }

                // return `
                //     <div>
                //         <div>${res.category[params[0].dataIndex]}时</div>
                //         ${toolStr.map((item: string) => {
                //     return `<div>${item}</div>`
                // })}
                //     </div>
                // `
            }
        }
    };

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

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

    let category: any = []
    let carResList: any = []
    let carRealResList: any = []
    let orderResList: any = []
    let orderRealResList: any = []

    const req: any = {
        Province_Code: '530000',
        // Province_Code: '340000',
        Statistics_Date: moment().subtract(1, 'd').format('YYYY-MM-DD'),
        Serverpart_ID: ''
    }
    const data = await handleGetTransactionConvert(req)
    console.log('jfidsafuidsopfjsdflksjdfds', data);


    let carList = data.BayonetList.data

    let orderList = data.TransactionList.data

    if (carList && carList.length > 0) {
        carList.forEach((item: any) => {
            carResList.push((item[1]))
            carRealResList.push(item[1])
        })
    }

    if (orderList && orderList.length > 0) {
        orderList.forEach((item: any) => {
            category.push(item[0])
            orderResList.push((item[1]))
            orderRealResList.push(item[1])
        })
    }



    let res: any = {
        category: category,// x轴的内容
        carResList: carResList,
        carRealResList: carRealResList,
        orderResList: orderResList,
        orderRealResList: orderRealResList
    }
    console.log('resresresresres', res);


    return res
}


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

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



</script>

<template>
    <div class="ConsumptionConversionBox">
        <SmallTitle :title="'消费转化对比图'"></SmallTitle>

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