qimall/backend/modules/mall/views/census/user-data.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('components/my-table', __DIR__);
ComponentHelper::loadComponentView('components/screen-contain', __DIR__);
ComponentHelper::loadComponentView('components/header-time', __DIR__);
ComponentHelper::loadComponentView('components/mini-echarts', __DIR__);
?>
<style>
    .screen-container {
        min-width: 100%;
    }
    
    .bgCom {
        border: 2px solid #0061CC;
        margin-bottom: 16px;
        background: linear-gradient(135deg, #0034E4 0%, #14141A 13%, rgba(7, 7, 9, 0.89) 81%, rgba(20, 101, 255, 0.11) 100%);
        border-radius: 16px;
        padding: 30px;
    }

    .titleCom {
        height: 37px;
        font-size: 30px;
        font-family: DIN;
        font-weight: bold;
        line-height: 37px;
        color: #F8F8F8;
    }

    .subTitle {
        line-height: 37px;
    }

    .user-data-box {
        padding: 30px 60px;
    }

    .user-data-left {
        width: 1184px;
        margin-right: 16px;
    }

    .user-total {
        flex: 1;
        height: 348px;
    }

    .total-num {
        font-size: 30px;
        padding-right: 10px;
    }

    .total-up,
    .total-down {
        font-size: 12px;
    }

    .total-up {
        color: #1BBC26;
    }

    .total-down {
        color: #C12727;
    }

    .user-data-right {
        width: 512px;
        margin-bottom: 16px;
    }

    .user-statistical {
        height: 136px;
    }

    .user-clinch {
        height: 300px;
    }

    .block-items {
        height: 100%;
    }

    .preferences {
        height: 300px;
    }

    .table-goods {
        cursor: pointer;
    }

    .goods-name {
        color: #F8F8F8;
        padding-left: 6px;
    }

    .customer-new,
    .customer-old {
        position: relative;
        margin-left: 40px;
    }

    .customer-new::before,
    .customer-old::before {
        position: absolute;
        content: "";
        top: 50%;
        left: -20px;
        transform: translateY(-50%);
        width: 12px;
        height: 12px;
        border-radius: 50%;

    }

    .customer-new::before {
        background-color: #ED7453;
    }

    .customer-old::before {
        background-color: #0034E4;
    }

    .customer-canvas-left,
    .customer-canvas-right {
        /* width: 41%; */
        padding-top: 10px;
        flex: 1;
    }

    .canvas-lf-content,
    .canvas-rg-content {
        height: 200px;
        padding: 20px 0;
        text-align: right;
    }

    .canvas-rg-content {
        text-align: left;
    }

    .canvas-cont-amount {
        font-size: 28px;
        color: #F8F8F8;
        font-weight: 700;
    }

    .canvas-cont-text {
        font-size: 16px;
        color: #CCCFDA;
        white-space: nowrap;
    }

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

    #echartsNum,
    #echartsFlow {
        width: 100%;
        height: 240px;
    }

    #echartsLevel {
        width: 100%;
        /* height: 150px; */
        height: 80%;
    }

    #echartsMakeMoney,
    #echartsMakePeple {
        /* width: 300px; */
        width: 90%;
        height: 200px;
    }
</style>

<!-- <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script> -->
<script src="/resources/unpkg/echarts@5.2.2/dist/echarts.min.js"></script>
<div id="user-data" v-cloak>
    <screen-contain text-left="会员分析">
        <template v-slot:right>
            <header-time></header-time>
        </template>
        <div class="user-data-box">
            <div class="user-data-top">
                <div flex>
                    <div class="bgCom user-total" style="margin-right: 16px;">
                        <div class="title" flex="main:justify">
                            <div class="titleCom">累计会员数</div>
                            <div flex="cross:center">
                                <div class="total-num">{{echartsData.cumulative_members?echartsData.cumulative_members.total_users:''}}</div>
                                <!-- <div>
                                    <div class="total-up">环比 <i class="el-icon-arrow-up"></i>4.2%</div>
                                    <div class="total-down">同比 <i class="el-icon-arrow-down"></i>0.9%</div>
                                </div> -->
                            </div>
                        </div>
                        <div id="echartsNum"></div>
                    </div>
                    <div class="bgCom user-total">
                        <div class="titleCom">会员活跃数</div>
                        <div id="echartsFlow"></div>
                    </div>
                </div>
            </div>
            <div class="user-data-bottom" flex="main:around">
                <div class="user-data-left">
                    <div class="bgCom user-statistical" style="padding: 0 20px;" 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">{{numSystemVal(echartsData.order[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 class="bgCom user-clinch">
                        <div flex="cross:center main:justify">
                            <div class="titleCom">成交客户</div>
                            <div flex>
                                <div class="customer-new">新客户</div>
                                <div class="customer-old">老客户</div>
                            </div>
                        </div>
                        <div flex="main:justify">
                            <div flex="cross:center main:justify" class="customer-canvas-left">
                                <div class="canvas-lf-content" flex="dir:top main:justify">
                                    <div class="">
                                        <div class="canvas-cont-amount">{{numSystemVal(echartsData.deal_members.new_customers_pay_money)}}</div>
                                        <div class="canvas-cont-text">新客户成交金额（元）</div>
                                    </div>
                                    <div class="">
                                        <div class="canvas-cont-amount">{{numSystemVal(echartsData.deal_members.regular_customers_pay_money)}}</div>
                                        <div class="canvas-cont-text">老客户成交金额（元）</div>
                                    </div>
                                </div>
                                <div id="echartsMakeMoney"></div>
                            </div>
                            <div flex="cross:center main:justify" class="customer-canvas-right">
                                <div id="echartsMakePeple"></div>
                                <div class="canvas-rg-content" flex="dir:top main:justify">
                                    <div>
                                        <div class="canvas-cont-amount">{{numSystemVal(echartsData.deal_members.new_customers_pay_peoples)}}</div>
                                        <div class="canvas-cont-text">新客户成交人数（人）</div>
                                    </div>
                                    <div>
                                        <div class="canvas-cont-amount">{{numSystemVal(echartsData.deal_members.regular_customers_pay_peoples)}}</div>
                                        <div class="canvas-cont-text">老客户成交人数（人）</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="user-data-right" >
                    <div class="bgCom block-items">
                        <div class="titleCom">会员等级分布</div>
                        <div id="echartsLevel"></div>
                    </div>
                </div>
            </div>
        </div>
    </screen-contain>
</div>
<script>
    const app = new Vue({
        el: '#user-data',
        data() {
            return {
                flowList: [{
                    key: 'repurchase_people',
                    text: '复购会员数'
                }, {
                    key: 'total_pay_people',
                    text: '支付人数'
                }, {
                    key: 'order_proportion',
                    text: '访问-下单转化率'
                }, {
                    key: 'pay_order_proportion',
                    text: '访问-支付转化率'
                },],
                echartsData: {
                    deal_members: {},
                    order: {},
                }
            }
        },
        mounted() {
            this.getEchartsData();
        },
        methods: {
            getEchartsData(){
                let that = this;
                request({
                    params: {
                        r: 'mall/statistics/car-user-data',
                    },
                    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);
                    }
                    this.echartsNumInit()
                    this.echartsFlowInit()
                    this.echartsLevelInit()
                    this.echartsMakeMoneyInit()
                    this.echartsMakePepleInit()
                });
            },
            echartsNumInit() {
                var chartDom = document.getElementById('echartsNum');
                var myChart = echarts.init(chartDom);
                // 指定图表的配置项和数据
                var option = {
                    textStyle: {
                        color: "#DCDFEB"
                    },
                    grid: {
                        left: '0px',
                        right: '20px',
                        top: '30px',
                        bottom: '0px',
                        containLabel: true
                    },
                    color: ['#80FFA5'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        data: this.echartsData.cumulative_members.new_user.map((v) => {return v.day})
                    }],
                    yAxis: [{
                        type: 'value',
                        splitLine: {
                            lineStyle: {
                                color: "rgba(250,250,250,0.4)"
                            }
                        }
                    }],
                    series: [{
                        // name: '交易金额',
                        type: 'line',
                        stack: 'Total',
                        smooth: true,
                        lineStyle: {
                            width: '2',
                            color: "#0034E4"
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(0, 52, 228, 0.42)'
                                },
                                {
                                    offset: 0.5,
                                    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.cumulative_members.new_user.map((v) => {return v.num})
                    }]
                };
                myChart.setOption(option);
            },
            echartsFlowInit() {
                var chartDom = document.getElementById('echartsFlow');
                var myChart = echarts.init(chartDom);
                // 指定图表的配置项和数据
                var option = {
                    tooltip: {},
                    grid: {
                        left: '0',
                        right: '20px',
                        top: '30px',
                        bottom: '0px',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: this.echartsData.active_members.map((v) => {return v.day})
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: this.echartsData.active_members.map((v) => {return v.num}),
                            type: 'bar',
                            itemStyle: {
                                color: "#0034E4"
                            }
                        }
                    ]
                };
                myChart.setOption(option);
            },
            echartsLevelInit() {
                var chartDom = document.getElementById('echartsLevel');
                var myChart = echarts.init(chartDom);
                let newData = [];
                this.echartsData.level.forEach(v => {
                    let obj = {
                        name: v.level_name,
                        value: v.proportion,
                        num: v.num,
                    }
                    newData.push(obj);
                })
                let legendData = []
                newData.forEach(it => {
                    legendData.push({
                        name: it.name,
                        icon: 'circle',
                        // 设置文本为红色
                        textStyle: {
                            color: '#fff'
                        }
                    })
                })
                console.info(JSON.stringify(legendData))
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter(params){
                            let data = params.data;
                            return `${data.name}：${data.value}%<br />会员人数：${data.num}人`
                        }
                    },
                   
                    legend: {
                        orient: 'vertical',
                        // left: 'left',
                        bottom : '0',
                        height: 40,
                        width: '60%',
                        itemWidth: 12,
                        // itemHeight: 12,
                        data: legendData
                    },
                    // color: ['#0034E4', '#0187DF', '#A2E157', '#EDA553', '#ED7453', '#F24E4E'],
                    series: [{
                        name: '会员等级分布',
                        type: 'pie',
                        radius: ['60%', '80%'],
                        avoidLabelOverlap: false,
                        top: 30,
                        bottom: 80,
                        left: 0,
                        roundCap: true,
                        label: {
                            show: true,
                            position: 'outside',
                            color: '#fff',
                            formatter: (params) => {
                                return params.value + "%"
                            }
                        },
                        labelLine: {
                            show: true,
                            length: 15,
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        data: newData
                    }]
                };
                option && myChart.setOption(option);
            },
            echartsMakeMoneyInit() {
                var chartDom = document.getElementById('echartsMakeMoney');
                var myChart = echarts.init(chartDom);
                let that = this;
                // new_customers_pay_money
                                    // regular_customers_pay_money
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter(params){
                            let data = params.data;
                            return `${data.name}：${data.value}%<br />交易金额：${JSON.stringify(that.echartsData.deal_members[data.key])}元`
                        }
                    },
                    color: ['#0034E4', '#ED7453'],
                    series: [{
                        name: '成交客户',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            position: 'outside',
                            color: '#fff',
                            formatter: (params) => {
                                return params.value + '%\n' + params.name + '成交金额占比';
                            }
                        },
                        labelLine: {
                            show: true,
                            length: 15,
                            length2: 6,
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        data: [{
                                value: this.echartsData.deal_members.regular_customers_pay_money_proportion,
                                name: '老客户',
                                key: "regular_customers_pay_money",
                            },
                            {
                                value: this.echartsData.deal_members.new_customers_pay_money_proportion,
                                name: '新客户',
                                key: "new_customers_pay_money",
                            }
                        ]
                    }]
                };
                option && myChart.setOption(option);
            },
            echartsMakePepleInit() {
                var chartDom = document.getElementById('echartsMakePeple');
                var myChart = echarts.init(chartDom);
                let that = this;
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter(params){
                            let data = params.data;
                            // 
                            return `${data.name}：${data.value}%<br />成交人数：${JSON.stringify(that.echartsData.deal_members[data.key])}人`
                        }
                    },
                    color: ['#0034E4', '#ED7453'],
                    series: [{
                        name: '成交客户',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        roundCap: true,
                        label: {
                            show: true,
                            position: 'outside',
                            color: '#fff',
                            formatter: (params) => {
                                return params.value + '%\n' + params.name + '数占比';
                            }
                        },
                        labelLine: {
                            show: true,
                            length: 15,
                            length2: 6,
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        data: [{
                                value: this.echartsData.deal_members.regular_customers_proportion,
                                name: '老客户',
                                key: 'regular_customers_pay_peoples',
                            },
                            {
                                value: this.echartsData.deal_members.new_customers_proportion,
                                name: '新客户',
                                key: 'new_customers_pay_peoples',
                            }
                        ]
                    }]
                };
                option && myChart.setOption(option);
            },
            numSystemVal(val) {
                if(isNaN(val)){
                    // val = '-'
                }else if (val * 1 < 10000) {
                    val = val * 1
                } else {
                    if ((val * 1) % 10000 == 0) {
                        val = parseInt((val * 1) / 10000) + 'W'
                    } else {
                        val = parseInt((val * 1) / 10000) + 'W+'
                    }
                }
                return val
            }
        }
    })
</script>

<style>
    #user-data {
        height: 100%;
    }
</style>