ccy_DIB/pages/DigitalIntelligenceDashboard/components/HotProductList.vue

<template>
    <view class="hot-product-list">
        <!-- 标题 -->
        <view class="section-header">
            <text class="section-title">热门商品榜单</text>
        </view>

        <!-- 图表容器 -->
        <view class="chart-container" :style="{ height: chartHeight }">
            <!-- 图表加载效果 -->
            <ChartLoading v-if="isLoading" text="数据加载中..." />
            <!-- 实际图表 -->
            <QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="barChartData" :canvas2d="true"
                :inScrollView="true" canvasId="hotProductListChart" :animation="false" :ontap="true" :ontouch="true"
                tooltipFormat="SalesRankingOfProducts" />
        </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 {
            isLoading: false,
            // 销量排行榜数据
            salesRankingData: [],
            productList: []
        }
    },

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

        // 图表数据
        barChartData() {
            return {
                categories: this.salesRankingData.map(item =>
                    this.formatXAxisLabel(item.name)
                ),
                series: [{
                    name: '销量',
                    data: this.salesRankingData.map(item => item.sales)
                }]
            }
        },

        // 图表配置
        chartOpts() {
            // 计算最大值并生成6个刻度，每个刻度都是100的倍数
            const maxSales = Math.max(...this.salesRankingData.map(item => item.sales));
            const roundedMax = Math.ceil(maxSales / 100) * 100; // 向上取整到100的倍数
            const yAxisInterval = Math.ceil(roundedMax / 5); // 分成5个间隔，总共6个刻度
            const finalInterval = Math.ceil(yAxisInterval / 100) * 100; // 确保间隔是100的倍数
            const finalMax = finalInterval * 5; // 最终最大值

            // 生成Y轴刻度数据
            const yAxisData = [];
            for (let i = 0; i <= 5; i++) {
                yAxisData.push(i * finalInterval);
            }

            return {
                legend: {
                    show: true,
                },
                padding: [15, 15, 0, 15], // 增加底部padding给X轴标签留空间
                dataLabel: false,
                enableScroll: false,
                xAxis: {
                    itemCount: 5, // 减少显示的标签数量
                    fontSize: 10, // 适当减小字体
                },
                yAxis: {
                    showTitle: true,
                    titleFontSize: 12,

                    gridType: 'dash',
                    dashLength: 2,
                    data: [{
                        title: '商品件数(件)',
                        min: 0,
                        max: finalMax,
                        data: yAxisData,
                        titleOffsetY: -5,
                        titleOffsetX: -10,
                    }]
                },
                categoriesReal: this.salesRankingData.map(item =>
                    item.name
                ),
                extra: {
                    column: {
                        type: 'group',
                        width: 12,
                        activeBgColor: '#000000',
                        activeBgOpacity: 0.08,
                        barBorderCircle: true,
                        linearType: 'none',
                        linearOpacity: 0,
                    }
                }
            }
        }
    },

    onReady() {
        this.handleGetHotProductListData()
    },

    methods: {
        // 格式化X轴标签文字
        formatXAxisLabel(name) {
            if (!name) return '';
            // 如果名称超过4个字符，截取并添加省略号
            return name.length > 4 ? name.substring(0, 4) + '...' : name;
        },
        // 获取热门商品榜单数据
        async handleGetHotProductListData() {
            const req = {
                action_type: "getCommoditySaleSort",
                province_code: 5564,
                rowNum: 5
            }
            this.isLoading = true
            const data = await request.$cloudUrlGet(req);
            console.log('datadatadatadatadata', data);
            let list = data.COMMODITYSALE_DESC
            let res = []
            if (list && list.length > 0) {
                list.forEach((item) => {
                    res.push({
                        name: item.COMMODITY_NAME,
                        sales: item.SELLCOUNT,
                    })
                })
            }
            this.salesRankingData = res
            this.productList = list
            this.isLoading = false
        },

        // 发起API请求获取热门商品榜单数据
        async getCommoditySaleSort(params) {
            // 这里使用模拟数据，实际应该调用真实的API
            const data = await request.$cloudUrlGet(params);

            return data || {}
        },

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

            // 处理数据：获取热门商品榜单数据
            if (data.COMMODITYSALE_DESC && data.COMMODITYSALE_DESC.length > 0) {
                // 反转数组，让最高的在最上面
                let list = [...data.COMMODITYSALE_DESC].reverse()

                list.forEach((item) => {
                    // 限制商品名称长度，超过50px显示省略号（约8-10个字符）
                    let productName = this.truncateText(item.COMMODITY_NAME, 4)
                    category.push(productName)
                    seriesData.push(item.SELLCOUNT)
                })
            }

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

        // 文本截断函数
        truncateText(text, maxLength) {
            if (!text || text.length <= maxLength) {
                return text
            }
            return text.substring(0, maxLength) + '...'
        },

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

.hot-product-list {
    width: 100%;
    margin-top: 24rpx;

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

        .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;
    }
}
</style>