ccy_DIB/pages/DigitalIntelligenceDashboard/components/VehicleModelStay.vue

<template>
    <view class="vehicle-model-stay">
        <!-- 经营效益标题 -->
        <view class="section-header">
            <text class="section-title">经营效益</text>
        </view>

        <!-- 经营效益图表 -->
        <view class="chart-container">
            <QiunDataCharts type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true" :inScrollView="true"
                canvasId="vehicleModelStayChart" :animation="false" :ontap="true" :ontouch="true"
                tooltipFormat="vehicleModelStayChart" />
        </view>
    </view>
</template>

<script>
import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
import request from "@/util/index.js";
import moment from 'moment'

export default {
    components: {
        QiunDataCharts
    },

    data() {
        return {
            // 图表原始数据
            rawData: {
                category: [],
                seriesData: [],
                realData: [],
                seriesDataLastYear: [],
                realDataLastYear: [],
                currentYear: '',
                lastYear: '',
                addList: []
            }
        }
    },

    computed: {
        // 图表数据
        chartData() {
            return {
                categories: this.rawData.category,
                series: [
                    {
                        name: `${this.rawData.currentYear}年营收`,
                        data: this.rawData.seriesData
                    },
                    {
                        name: `${this.rawData.lastYear}年营收`,
                        data: this.rawData.seriesDataLastYear
                    }
                ]
            }
        },

        // 图表配置
        chartOpts() {
            return {
                padding: [15, 15, 0, 5],
                dataLabel: false,
                enableScroll: true, // 开启滚动
                xAxis: {
                    disableGrid: true,
                    itemCount: 6, // 默认显示6个月的数据
                    scrollShow: true, // 显示滚动条
                    scrollAlign: 'left', // 滚动条对齐方式
                    scrollColor: '#46B8F3', // 滚动条颜色
                    scrollWidth: 4, // 滚动条宽度
                    scrollHeight: 8 // 滚动条高度
                },
                yAxis: {
                    data: [{
                        min: 0,
                        title: '万元',
                    }]
                },
                extra: {
                    column: {
                        type: 'group',
                        width: 12, // 柱子宽度调小一点
                        activeBgColor: '#000000',
                        activeBgOpacity: 0.08,
                        seriesGap: 0, // 同一组别的柱子紧贴在一起
                        barBorderRadius: [3, 3, 0, 0]
                    }
                }
            }
        }
    },

    onReady() {
        this.handleGetVehicleModelStayData()
    },

    methods: {
        // 获取经营效益数据
        async handleGetVehicleModelStayData() {
            // 当前年份数据请求
            const currentReq = {
                StatisticsDate: moment().format('YYYY'),
                ProvinceCode: '530000',
                StatisticsType: 4,
            }

            // 去年数据请求
            const lastYearReq = {
                StatisticsDate: moment().subtract(1, 'y').format('YYYY'),
                ProvinceCode: '530000',
                StatisticsType: 4,
            }

            // 并行调用两个API
            const [currentData, lastYearData] = await Promise.all([
                this.getRevenueTrend(currentReq),
                this.getRevenueTrend(lastYearReq)
            ]);

            // 处理数据
            this.processChartData(currentData.Result_Data.List, lastYearData.Result_Data.List)
        },

        // 发起API请求获取营收趋势数据
        async getRevenueTrend(params) {
            const data = await request.$webGet(
                "CommercialApi/Revenue/GetRevenueTrend",
                params
            );
            return data || []
        },

        // 处理图表数据
        processChartData(currentData, lastYearData) {
            let category = []
            let seriesData = []
            let realData = []
            let seriesDataLastYear = []
            let realDataLastYear = []

            // 处理当前年份数据
            if (currentData && currentData.length > 0) {
                currentData.forEach((item) => {
                    category.push(item.name)
                    seriesData.push(Number((Number(item.value) / 10000).toFixed(2)))
                    realData.push(Number(item.value))
                })
            }

            // 处理去年数据
            if (lastYearData && lastYearData.length > 0) {
                lastYearData.forEach((item) => {
                    seriesDataLastYear.push(Number((Number(item.value) / 10000).toFixed(2)))
                    realDataLastYear.push(Number(item.value))
                })
            }

            // 计算增长率
            let addList = []
            if (category && category.length > 0) {
                for (let i = 0; i < category.length; i++) {
                    let current = realData[i] || 0
                    let yes = realDataLastYear[i] || 0
                    let add = ''
                    if (current > 0 && yes > 0) {
                        add = (((current - yes) / yes) * 100).toFixed(2)
                    }
                    addList.push(add)
                }
            }

            // 更新图表数据
            this.rawData = {
                category: category,
                seriesData: seriesData,
                realData: realData,
                seriesDataLastYear: seriesDataLastYear,
                realDataLastYear: realDataLastYear,
                currentYear: moment().format('YYYY'),
                lastYear: moment().subtract(1, 'y').format('YYYY'),
                addList: addList
            }

        },

    }
}
</script>

<style scoped lang="less">
@primary-color: #46B8F3;
@secondary-color: #3CD495;
@danger-color: #FF5E5E;
@success-color: #52C41A;
@text-primary: #333;
@text-secondary: #666;
@text-light: #999;
@bg-white: #ffffff;
@border-radius: 16rpx;
@shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

.vehicle-model-stay {
    margin-top: 24rpx;

    .section-header {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        padding: 0 8rpx;

        .section-title {
            font-size: 30rpx;
            font-weight: 600;
            color: @text-primary;
        }
    }

    .chart-container {
        background: @bg-white;
        border-radius: @border-radius;
        padding: 24rpx;
        box-shadow: @shadow;
        margin-bottom: 24rpx;
        width: 100%;
        box-sizing: border-box;
        height: 400rpx;
    }
}
</style>