qimall/backend/modules/mall/views/census/goods-statistics.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('components/screen-contain', __DIR__);
ComponentHelper::loadComponentView('components/header-time', __DIR__);
ComponentHelper::loadComponentView('components/my-table', __DIR__);
ComponentHelper::loadComponentView('components/mini-echarts', __DIR__);
?>

<style>
    .screen-container {
        min-width: 100%;
    }
    
    .el-main {
        padding: 0;
    }

    .echrats-cols-item {
        width: 482px;
        height: 282px;
    }

    .echrats-cols-item1 {
        /* width: 1114px; */
        width: 100%;
        height: 282px;
        margin-bottom: 15px;
    }

    .echrats-cols-item3 {
        height: 328px;
    }

    .echrats-item-bg {
        background: linear-gradient(137deg, #0034E4 0%, #14141A 20%, rgba(7, 7, 9, 0.89) 80%, #0034E4 100%);
        border: 1px solid #0034E4;
        border-radius: 16px;
    }

    .echrats-cols-item2 {
        padding: 30px;
        margin: 15px 0;
        background: linear-gradient(135deg, #0034E4 0%, #14141A 4%, rgba(7, 7, 9, 0.89) 91%, rgba(20, 101, 255, 0.11) 100%);
        border: 1px solid #0034E4;
    }

    .echrats-cols-item .title,
    .echrats-cols-item1 .bold-font,
    .echrats-cols-item1 .title,
    .echrats-cols-item3 .title {
        height: 30px;
        line-height: 30px;
        font-size: 30px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #F8F8F8;
    }

    .echrats-cols-item .title {
        margin-bottom: 20px;
    }

    #echarts3 {
        width: 100%;
        height: 100%;
    }

    .item {
        width: 203px;
        height: 92px;
        background: linear-gradient(90deg, rgba(0, 52, 228, 0.4) 0%, rgba(0, 0, 3, 0) 100%);
        border-radius: 8px;
        padding-left: 11px;
    }

    .item-number {
        font-size: 26px;
        font-family: DIN;
        font-weight: bold;
        line-height: 32px;
        color: #F8F8F8;
    }

    .item-label {
        font-size: 15px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 25px;
        color: #CCCFDA;
        opacity: 1;
    }

    .item-img {
        width: 60px;
        height: 45px;
        margin-bottom: 6px;
    }

    .echrats-cols-item3 {
        padding: 30px;
    }

    .visitor,
    .payment-amount,
    .sale {
        width: 30%;
    }

    .visitor .title,
    .payment-amount .title,
    .sale .title {
        height: 23px;
        font-size: 23px;
        line-height: 23px;
        color: #F8F8F8;
        margin: 30px 0 20px;
    }
</style>

<div id="commodity-data" v-cloak>
    <screen-contain text-left="商品数据">
        <template v-slot:right>
            <header-time></header-time>
        </template>
        <div style="padding:40px 88px;">
            <div class="echrats-item-bg echrats-cols-item2" flex="wrap:wrap main:justify cross:center">
                <div class="item" flex="cross:center main:justify" v-for="(item,index) in flowList" :key="index" :style=" index >= flowList.length - 2 ? 'margin-bottom:0': ''  ">
                    <div>
                        <div class="item-number" v-if="echartsData.goods_data">{{echartsData.goods_data[item.key]}}</div>
                        <div class="item-label">{{item.text}}</div>
                    </div>
                    <div flex="wrap:wrap main:right">
                        <div class="item-img">
                            <mini-echarts></mini-echarts>
                        </div>
                        <!-- <div>
                            <span style="color: #1BBC26;"><i class="el-icon-arrow-down"></i>1.2%</span>
                            <span style="color: #C12727;"><i class="el-icon-arrow-up"></i>1.2%</span>
                        </div> -->
                    </div>
                </div>
            </div>
            <div flex="main:justify">
                <!-- <div class="echrats-cols-item echrats-item-bg" flex="dir:top" style="padding: 30px;">
                    <div class="title">商品偏好排行</div>
                    <div style="flex:1;height:0">
                        <my-table :data="tableData" :options="options">
                            <template v-slot:sort="{ item,index }">
                                <div>{{index+1}}</div>
                            </template>
                        </my-table>
                    </div>
                </div> -->
                <div class="echrats-cols-item1 echrats-item-bg" flex="dir:top">
                    <div flex="main:justify" style="padding: 30px 30px 0;">
                        <div class="title">GMV</div>
                        <!-- <div class="bold-font">41.00</div> -->
                    </div>
                    <div style="flex:1;height:0">
                        <div id="echarts3"></div>
                    </div>
                </div>
            </div>
            <div class="echrats-cols-item3 echrats-item-bg" flex="dir:top">
                <!-- <div class="title">商品排行</div> -->
                <div flex="main:justify" style="height:0;flex: 1;">
                    <div class="visitor" flex="dir:top" style="height: 100%">
                        <div class="title">访客排行</div>
                        <div style="flex:1;height:0">
                            <my-table :data="echartsData.access_rankings" :options="visitorOptions">
                                <template v-slot:sort="{ item,index }">
                                    <div>{{index+1}}</div>
                                </template>
                            </my-table>
                        </div>
                    </div>
                    <div class="sale" flex="dir:top" style="height: 100%">
                        <div class="title">支付排行</div>
                        <div style="flex:1;height:0">
                            <my-table :data="echartsData.paymoney_rankings" :options="payOptions">
                                <template v-slot:sort="{ item,index }">
                                    <div>{{index+1}}</div>
                                </template>
                            </my-table>
                        </div>
                    </div>
                    <div class="payment-amount" flex="dir:top" style="height: 100%">
                        <div class="title">销量排行</div>
                        <div style="flex:1;height:0">
                            <my-table :data="echartsData.sales_rankings" :options="salesOptions">
                                <template v-slot:sort="{ item,index }">
                                    <div>{{index+1}}</div>
                                </template>
                            </my-table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </screen-contain>

</div>
<script src="/resources/unpkg/echarts@5.2.2/dist/echarts.min.js"></script>
<script>
    let tabOptions = [
        {
            props: "sort",
            label: '排行',
            slot: true,
            width: 50,
            textAlign: 'left'
        }, {
            props: "goods_name",
            label: '商品名称',
            textAlign: 'left'
        }, 
    ]
    const app = new Vue({
        el: '#commodity-data',
        data() {
            return {
                flowList: [{
                    text: '商品浏览量',
                    key: "goods_total_views",
                }, {
                    text: '支付人数',
                    key: "total_pay_people",
                }, {
                    number: 0,
                    text: '客单价',
                    key: "customer_unit_price",
                }, {
                    text: '上架商品数',
                    key: "goods_listings",
                }, {
                    text: '复购人数',
                    key: "repurchase_people",
                }, {
                    text: '复购金额',
                    key: "repurchase_money",
                }],
                visitorOptions: [
                    ...tabOptions,
                    {
                        props: "access_times",
                        label: '访客数',
                    },
                ],
                payOptions: [
                    ...tabOptions,
                    {
                        props: "pay_amounts",
                        label: '支付金额',
                    },
                ],
                salesOptions: [
                    ...tabOptions,
                    {
                        props: "sales_volumes",
                        label: '销量(件)',
                    },
                ],
                echartsData: {},
            }
        },
        mounted() {
            this.getEchartsData();
        },
        methods: {
            getEchartsData(){
                let that = this;
                request({
                    params: {
                        r: 'mall/data-census/goods-statistics',
                    },
                    method: 'get'
                }).then(e => {
                    if (e.data.code === 0) {
                        console.info(e.data.data);
                        this.echartsData = e.data.data;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                    that.echarts3Init()
                });
            },
            echarts3Init() {
                var chartDom = document.getElementById('echarts3');
                var myChart = echarts.init(chartDom);
                // 指定图表的配置项和数据
                var option = {
                    grid: {
                        left: '30px',
                        right: '30px',
                        top: '30px',
                        bottom: '30px',
                        containLabel: true
                    },
                    textStyle: {
                        color: "#DCDFEB"
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    symbolOffset: [0, '-50%'],
                    color: ['#0034E4', '#ED7453'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        data: this.echartsData.gmvs.keys
                    }],
                    yAxis: [{
                        type: 'value',
                        splitLine: {
                            lineStyle: {
                                color: "rgba(250,250,250,0.4)"
                            }
                        }
                    }, ],
                    series: [{
                        name: 'GMV',
                        type: 'line',
                        smooth: true,
                        lineStyle: {
                            width: '2',
                            color: "#0034E4"
                        },
                        showSymbol: false,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(0, 52, 228, 0.56)'
                                },
                                {
                                    offset: 0.42,
                                    color: 'rgba(0, 52, 228, 0.28)'
                                },
                                {
                                    offset: 0.82,
                                    color: 'rgba(0, 52, 228, 0.08)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(0, 52, 228, 0)'
                                }
                            ])
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: this.echartsData.gmvs.values,
                    }, ]
                };
                myChart.setOption(option);
            },
        }
    })
</script>