ccy_DIB/pages/DigitalIntelligenceDashboard/components/AnalysisOfMember.vue

<template>
    <view class="analysis-of-member">
        <!-- 会员分析图表 -->
        <view class="chart-card">
            <view class="chart-container">
                <!-- 图表加载效果 -->
                <ChartLoading v-if="!hasChartData" text="数据加载中..." />
                <!-- 实际图表 -->
                <QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
                    :inScrollView="true" canvasId="analysisOfMemberChart" :animation="false" :ontap="true"
                    :ontouch="true" tooltipFormat="AnalysisOfMember" />
            </view>
        </view>
    </view>
</template>

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

export default {
    components: {
        QiunDataCharts,
        ChartLoading
    },

    data() {
        return {
            // 图表原始数据
            rawData: {
                category: [],
                weeklyData: [], // 每周优品爆款数据
                otherData: [], // 其他类型数据
                addList: [] // 增长率数据
            }
        }
    },

    computed: {
        // 检查是否有图表数据
        hasChartData() {
            return this.rawData.category.length > 0 &&
                this.rawData.weeklyData.length > 0 &&
                this.rawData.otherData.length > 0
        },

        // 图表数据
        chartData() {
            return {
                categories: this.rawData.category,
                series: [
                    {
                        name: '每周优品爆款',
                        data: this.rawData.weeklyData,
                        type: 'column'
                    },
                    {
                        name: '其他类型',
                        data: this.rawData.otherData,
                        type: 'column'
                    }
                ]
            }
        },

        // 图表配置
        chartOpts() {
            return {
                padding: [15, 15, 0, 15],
                dataLabel: false,
                enableScroll: true,
                dataPointShape: false,
                xAxis: {
                    disableGrid: true,
                    itemCount: 4 // 显示4个分类
                },
                yAxis: {
                    showTitle: true,
                    titleFontSize: 12,
                    titleOffsetY: 10,
                    titleOffsetX: 10,
                    min: 0,
                    data: [{
                        min: 0,
                        max: 100,
                        title: '百分比(%)',
                    }]
                },
                legend: {
                    show: true,
                    position: 'bottom',
                    float: 'center',
                    fontSize: 12,
                    itemGap: 20
                },
                extra: {
                    column: {
                        width: 12, // 柱子宽度
                        seriesGap: 0, // 系列间距
                        colorStop: 0
                    }
                },
            }
        }
    },

    onReady() {
        this.handleGetData()
    },

    methods: {
        // 获取数据
        async handleGetData() {
            await this.getAnalysisOfMemberData()
        },

        // 获取会员分析数据
        async getAnalysisOfMemberData() {
            // 原组件目前使用模拟数据，这里也先使用模拟数据保持一致
            // 如果后续有真实API，可以按照TrendOfTrafficFlow.vue的方式调用

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

        // 处理图表数据
        processChartData() {
            // 根据原组件的数据结构进行处理
            let category = ["购买数量", "交易金额", "订单笔数", "购买人数"]
            let weeklyData = [50.99, 48.89, 82.95, 85.05] // 每周优品爆款数据
            let otherData = [49.01, 51.11, 17.05, 14.95] // 其他类型数据
            let addList = [] // 增长率数据（原组件逻辑）

            // 计算增长率（模拟逻辑，与原组件保持一致）
            for (let i = 0; i < category.length; i++) {
                // 这里可以根据实际业务逻辑计算增长率
                // 目前保持与原组件一致的显示逻辑
                addList.push('+' + (Math.random() * 20).toFixed(2)) // 模拟增长率数据
            }

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

        },

        // 更新图表数据
        async handleUpdateChart() {
            await this.handleGetData()
        }
    }
}
</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);

.analysis-of-member {
    width: 100%;
    margin-top: 24rpx;

    .chart-card {
        background: @bg-white;
        border-radius: @border-radius;
        padding: 24rpx;
        box-shadow: @shadow;
        margin-bottom: 24rpx;

        .chart-container {
            width: 100%;
            height: 400rpx;
        }
    }
}
</style>