qimall/backend/modules/mall/views/overview/sales-data.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('components/count-to', __DIR__);
ComponentHelper::loadComponentView('components/list', __DIR__);
ComponentHelper::loadComponentView('components/my-table', __DIR__);
ComponentHelper::loadComponentView('components/screen-contain', __DIR__);
?>
<div id="sales-data" v-cloak>
    <screen-contain text-left="直播间带货销售数据" text-right="直播间带货销售数据">
        <div class="sales-data-cont">
            <div class="echarts-item flex-y-end one">
                <div>
                    <div class="title">今日互动数据</div>
                    <div class="func-list">
                        <div v-for="(item,index) in list" :key="index" style="margin-bottom: 12px;">
                            <div class="circ" :style="{background: item.color}"></div>
                            <div class="number">{{item.number}}</div>
                            <div class="text">{{item.text}}</div>
                        </div>
                    </div>
                </div>
                <div id="echarts1" style="width: 220px;height: 220px;"></div>
            </div>
            <div class="live live-bg">
                <div class="live-title" style="width:100%;height: 80px;">
                    <div>直播累计销售额</div>
                    <img style="position: relative; top: -18px" src="/resources/img/dirve/live-title-bg.png">
                </div>
                <div flex='cross:center' style="justify-content: center;">
                    <div flex style="align-items: flex-end;" class="live-bg-money">
                        <div style="font-size:30px">￥</div>
                        <count-to class="count-to"></count-to>
                    </div>
                </div>
                <div class="live-text">
                    <div>总销售量 <span>602</span> 件</div>
                    <div>累计观看 <span>1165</span> 人</div>
                </div>
            </div>
            <div class="echarts-item flex-y-end" style="padding-bottom:0;flex-wrap: wrap;">
                <div class="echarts3-title">
                    <div style="font-size:30px;">观看人数趋势</div>
                    <div>单位：人</div>
                </div>
                <div id="echarts3" style="width: 467px;height: 316px;"></div>
            </div>
            <div class="echarts-item anchor">
                <div class="anchor-title">主播排行榜TOP10</div>
                <div style="height:200px;">
                    <my-table :data="tableData" :options="options">
                        <!-- 没有做单独的标签 -->
                        <template v-slot:sort="{ item,index }">
                            <div>{{index+1}}</div>
                        </template>
                    </my-table>
                </div>
            </div>
            <div class="echarts-item commodity">
                <div class="commodity-header">
                    <div class="commodity-title">商品排行</div>
                    <div>
                        <el-radio-group v-model="radio">
                            <el-radio-button label="访问数据"></el-radio-button>
                            <el-radio-button label="销售数据"></el-radio-button>
                        </el-radio-group>
                    </div>
                </div>
                <div style="text-align: end;margin: 10px 0">
                    商品总数：<span style="font-size: 23px;">6530件</span>
                </div>
                <div style="height:200px;">
                    <my-table :data="tableData" :options="options1">
                        <!-- 没有做单独的标签 -->
                        <template v-slot:sort="{ item,index }">
                            <div>得实DL - 528 条码...</div>
                        </template>
                    </my-table>
                </div>
            </div>
            <div class="echarts-item flex-y-end" style="padding-bottom:0;flex-wrap: wrap;">
                <div class="echarts6-title">
                    <div style="font-size:30px;">直播交易趋势</div>
                    <div>单位：元</div>
                </div>
                <div id="echarts6" style="width: 467px;height: 316px;"></div>
            </div>
        </div>
        <template v-slot:right>
            <div flex style="padding: 0 30px;">
                <div flex>
                    <div style="font-size: 38px;">9:34</div>
                    <div style="font-size: 16px;flex-direction: column;margin:0 30px 0 45px " flex="main:center">
                        <div style="width: 100%;">星期五 上午</div>
                        <div>2021年7月23日</div>
                    </div>
                </div>
                <div class="full-screen">全屏</div>
            </div>
        </template>
    </screen-contain>
</div>
<!-- <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>
<script>
    const app = new Vue({
        el: '#sales-data',
        data() {
            return {
                radio: '上海',
                options: [{
                    props: "sort",
                    label: '排行',
                    width: '40',
                    slot: true,
                }, {
                    props: "name",
                    label: '姓名',
                }, {
                    props: "salesVolume",
                    label: '销量',
                }, {
                    props: "saleMoeny",
                    label: '销售额',
                }, ],
                options1: [{
                    props: "sort",
                    label: '商品名称',
                    width: '200',
                    slot: true,
                    textAlign: 'left'
                }, {
                    props: "saleMoeny",
                    label: '直播价',
                }, {
                    props: "salesVolume",
                    label: '点击人数',
                }, {
                    props: "saleMoeny",
                    label: '点击次数',
                }, ],
                tableData: [{
                    sort: "0",
                    name: '王小虎',
                    salesVolume: '50',
                    saleMoeny: '100'
                }, {
                    sort: "0",
                    salesVolume: '50',
                    name: '王小虎',
                    saleMoeny: '100'
                }, {
                    sort: "0",
                    salesVolume: '50',
                    name: '王小虎',
                    saleMoeny: '100'
                }, {
                    sort: "0",
                    salesVolume: '50',
                    name: '王小虎',
                    saleMoeny: '100'
                }, {
                    sort: "0",
                    salesVolume: '50',
                    name: '王小虎',
                    saleMoeny: '100'
                }, {
                    sort: "0",
                    salesVolume: '50',
                    name: '王小虎',
                    saleMoeny: '100'
                }, {
                    sort: "0",
                    salesVolume: '50',
                    name: '王小虎',
                    saleMoeny: '100'
                }, {
                    sort: "0",
                    salesVolume: '50',
                    name: '王小虎',
                    saleMoeny: '100'
                }, {
                    sort: "0",
                    salesVolume: '50',
                    name: '王小虎',
                    saleMoeny: '100'
                }, ],
                list: [{
                    text: '观看人数',
                    number: 65,
                    color: '#0034E4'
                }, {
                    text: '观看次数',
                    number: 156,
                    color: '#0187E1'
                }, {
                    text: '分享人数',
                    number: 10,
                    color: '#18D275'
                }, {
                    text: '分享次数',
                    number: 86,
                    color: '#A2E157'
                }, {
                    text: '点赞人数',
                    number: 615,
                    color: '#EDA553'
                }, {
                    text: '点赞次数',
                    number: 65,
                    color: '#ED7453'
                }]
            }
        },
        methods: {
            handleList(list) {
                return list.map(item => {
                    return {
                        value: item.number,
                        name: item.text
                    }
                })
            },
            echarts1Init() {
                const data = this.handleList(this.list)
                const colorList = this.list.map(item => {
                    return item.color
                })
                var chartDom = document.getElementById('echarts1');
                var myChart = echarts.init(chartDom);
                var option = {
                    color: colorList,
                    title: {
                        text: '6分10秒\n平均观看时长',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            fontSize: 16,
                            color: '#fff'
                        }
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    series: [{
                        name: 'Access From',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        labelLine: {
                            show: false
                        },
                        data
                    }]
                };

                myChart.setOption(option);
            },
            echarts3Init() {
                var chartDom = document.getElementById('echarts3');
                var myChart = echarts.init(chartDom);
                // 指定图表的配置项和数据
                var option = {
                    textStyle: {
                        color: "#DCDFEB"
                    },
                    color: ['#80FFA5'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        data: ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00']
                    }],
                    yAxis: [{
                        type: 'value',
                        max: 10000,
                        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: [0, 6000, 4000, 6000, 2000, 8000]
                    }]
                };
                myChart.setOption(option);
            },
            echarts6Init() {
                var chartDom = document.getElementById('echarts6');
                var myChart = echarts.init(chartDom);
                // 指定图表的配置项和数据
                var option = {
                    textStyle: {
                        color: "#DCDFEB"
                    },
                    color: ['#80FFA5'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        data: ['10-09', '10-10', '10-11', '10-12', '10-13', '10-14']
                    }],
                    yAxis: [{
                        type: 'value',
                        max: 10000,
                        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: [0, 6000, 4000, 6000, 2000, 8000]
                    }]
                };
                myChart.setOption(option);
            },
        },
        mounted() {
            this.echarts6Init()
            this.echarts3Init()
            this.echarts1Init()
        }
    })
</script>

<style>
    .commodity-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

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

    .anchor-title {
        margin-bottom: 30px;
    }

    .live {
        flex-direction: column;
        justify-content: space-between;
    }


    .live .count-to {
        font-size: 60px;
        text-align: center;
    }

    .live-text {
        width: 100%;
        height: 80px;
        display: flex;
        padding: 0 30px;
        align-items: flex-end;
        justify-content: space-between;
    }

    .live-bg {
        display: flex;
        width: 527px;
        height: 376px;
        padding: 20px 0;
        margin-bottom: 40px;
        background: url('/resources/img/dirve/live-bg.png') no-repeat;
        background-size: 100% 100%;
    }

    .live-bg-money {
        width: 100%;
        padding: 40px 0;
        justify-content: center;
        background: url('/resources/img/dirve/live-bg-money.png') no-repeat;
        background-size: 100% 100%;
    }

    .live-text>div {
        height: 37px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        line-height: 32px;
        font-size: 19px;
        color: #ddd;
    }

    .live-text>div span {
        font-size: 30px;
        color: #F8F8F8;
    }

    .live-title {
        height: 45px;
        font-size: 45px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        text-align: center;
        color: #F8F8F8;
    }

    .sales-data-cont {
        display: flex;
        padding: 40px 40px 0 40px;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .flex-y-end {
        align-items: flex-end;
    }

    .echarts3-title,
    .echarts6-title {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        width: 100%;
    }

    .anchor,
    .commodity {
        flex-direction: column;
    }

    .echarts-item {
        display: flex;
        width: 527px;
        height: 376px;
        padding: 30px;
        margin-bottom: 40px;
        background: linear-gradient(137deg, #0034E4 0%, #14141A 20%, rgba(7, 7, 9, 0.89) 80%, #0034E4 100%);
        border: 2px solid #0034E4;
    }

    .one .title {
        margin-bottom: 42px;
        font-size: 30px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        line-height: 51px;
        color: #F8F8F8;
    }

    .one .func-list {
        display: flex;
        flex-wrap: wrap;
    }

    .one .func-list>div {
        width: 50%;
    }

    .one .func-list .circ {
        width: 11px;
        height: 11px;
        background: #0034E4;
        border-radius: 50%;
    }

    .one .func-list .number {
        height: 37px;
        font-size: 30px;
        font-weight: bold;
        line-height: 37px;
        color: #F8F8F8;
    }

    .one .func-list .text {
        font-size: 15px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 25px;
        color: #F8F8F8;
        opacity: 0.72;
    }

    .echarts-one {
        width: 200px;
        height: 200px;
        background-color: #ddd;
    }

    .el-radio-button:first-child .el-radio-button__inner {
        border-left: 1px solid #0034E4;
    }

    .el-radio-button__orig-radio:checked+.el-radio-button__inner {
        color: #FFF;
        background-color: #0034E4;
        border-color: #0034E4;
    }

    .el-radio-button:first-child .el-radio-button__inner {
        border-radius: 50px 0 0 50px;
    }

    .el-radio-button:last-child .el-radio-button__inner {
        border-radius: 0 50px 50px 0;
    }

    .el-radio-button__inner {
        padding: 8px 12px;
        color: #fff;
        background: transparent;
        border: 1px solid #0034E4;
    }

    .full-screen {
        width: 90px;
        height: 45px;
        border: 2px solid #0034E4;
        font-size: 23px;
        border-radius: 11px;
        line-height: 39px;
        color: #3865FC;
        text-align: center;
    }
</style>