ccy_DIB/pages/DigitalIntelligenceDashboard/components/ConsumptionLevel.vue

<template>
    <view class="consumption-level">
        <!-- 消费水平标题 -->
        <view class="section-header">
            <text class="section-title">消费水平</text>
            <text class="section-desc">注：低消费＜30 30≤普通消费≤60 高消费＞60</text>
        </view>

        <!-- 消费水平图表 -->
        <view class="chart-container">
            <QiunDataCharts type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true" :inScrollView="true"
                canvasId="consumptionLevelChart" :animation="false" :ontap="true" :ontouch="true"
                tooltipFormat="ConsumptionLevel" />
        </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: []
            }
        }
    },

    computed: {
        // 图表数据
        chartData() {
            return {
                categories: this.rawData.category,
                series: this.rawData.seriesData
            }
        },

        // 图表配置
        chartOpts() {
            return {
                padding: [15, 15, 15, 15],
                dataLabel: false,
                enableScroll: true,
                xAxis: {
                    disableGrid: true,
                    itemCount: 4,
                    margin: 15
                },
                yAxis: {
                    data: [{
                        min: 0,
                        title: '%'
                    }]
                },
                legend: {
                    show: true,
                    position: 'bottom',
                    float: 'center',
                    backgroundColor: 'rgba(0,0,0,0)',
                    borderColor: 'rgba(0,0,0,0)',
                    fontSize: 12,
                    fontColor: '#333333',
                    margin: 0,
                    padding: 0,
                    itemGap: 10,
                    textAlign: 'left'
                },
                extra: {
                    column: {
                        type: 'stack',
                        width: 8,
                        activeBgColor: '#000000',
                        activeBgOpacity: 0.08,
                        seriesGap: 0,
                        barBorderRadius: [4, 4, 0, 0]
                    }
                }
            }
        }
    },

    onReady() {
        this.handleGetConsumptionLevelData()
    },

    methods: {
        // 获取消费水平数据
        async handleGetConsumptionLevelData() {
            const req = {
                ProvinceCode: '530000',
                StatisticsDate: moment().subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD'),
                // ServerpartId: ''
            }

            const data = await this.getBusinessTradeLevel(req);

            // 处理数据
            this.processChartData(data.Result_Data)
        },

        // 发起API请求获取消费水平数据
        async getBusinessTradeLevel(params) {
            const data = await request.$webGet(
                "CommercialApi/Revenue/GetBusinessTradeLevel",
                params
            );
            return data || {}
        },

        // 处理图表数据
        processChartData(data) {
            let category = []
            let seriesData = []

            // 处理数据：获取消费水平数据
            if (data.legend && data.legend.length > 0) {
                category = data.legend
            }

            if (data.ColumnList && data.ColumnList.length > 0) {
                let list = data.ColumnList
                list.forEach((item) => {
                    seriesData.push({
                        name: item.name,
                        data: item.data.map(value => Number(value))
                    })
                })
            }

            // 更新图表数据
            this.rawData = {
                category: category,
                seriesData: seriesData
            }

        },

    }
}
</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);

.consumption-level {
    margin-top: 24rpx;

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

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

        .section-desc {
            font-size: 24rpx;
            color: @text-light;
            font-weight: 400;
        }
    }

    .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>