qimall/backend/modules/mall/views/census/driving-window.php

<?php

use common\helpers\ComponentHelper;

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

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

    .president-driving-window {
        position: relative;
        min-width: 1420px;
        min-height: 100%;
        background: url('/resources/img/dirve/dirve_bg.png') no-repeat;
        background-size: 100% 100%;
        color: #fff;
    }

    /* 头部 start */
    .sub-title {
        font-size: 22px;
        color: #F8F8F8;
    }
    .sub-title-text {
        padding: 0 30px;
    }
    /* 头部 end */

    /* 仪表盘部分 start */
    .president-driving-content {
        position: relative;
        margin-top: 20px;
        height: 440px;
    }

    /* 1 中间的样式 */
    .president-digital {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        height: 440px;
        z-index: 2;
    }

    #middle-canvas {
        width: 172px;
        height: 172px;
    }

    .digital-content {
        text-align: center;
        color: #F8F8F8;
    }

    .digital-title {
        font-size: 20px;
        padding-bottom: 10px;
    }

    .digital-up-percent {
        font-size: 40px;
        padding-right: 10px;
        font-weight: 700;
    }

    .digital-all {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -60px;
    }

    .all-items {
        width: 50%;
        color: #F8F8F8;
    }

    .all-items-amount {
        font-size: 30px;
    }

    .all-items-name {
        font-size: 20px;
    }

    /* 2 大的仪表盘样式 */
    .dash-board-big {
        position: absolute;
        width: 1100px;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 440px;
    }

    .dash-board-lf,
    .dash-board-rg {
        position: relative;
        width: 440px;
        height: 440px;
        background: #030319;
        box-shadow: 0px 3px 40px rgba(0, 52, 228, 0.7);
        border-radius: 50%;
    }

    .dash-board-lf::before,
    .dash-board-rg::before {
        position: absolute;
        content: "";
        width: 390px;
        height: 390px;
        background: #030319;
        box-shadow: 0px 3px 40px rgba(0, 52, 228, 0.5);
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #dashBoardLeft,
    #dashBoardRight {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
    }

    .dash-new-today {
        position: absolute;
        bottom: 25px;
        right: 60px;
        width: 140px;
        height: 140px;
        border: 3px solid #00186A;
        background: linear-gradient(320deg, #0D0D10 0%, #2F2F54 100%);
        box-shadow: -10px 10px 10px #050814;
        border-radius: 50%;
        color: #fff;
    }

    .dash-new-today .today-num {
        font-size: 32px;
    }

    .dash-new-today .today-title {
        font-size: 14px;
    }

    .dash-board-rg .dash-new-today {
        left: 60px;
        background: linear-gradient(19deg, #070709 0%, #292947 100%);
        box-shadow: 10px 10px 10px #050814;
    }

    /* 3 小的仪表盘样式 */
    .dash-board-small {
        position: absolute;
        top: 0;
        width: calc(100% - 160px);
        height: 440px;
        margin: 0 80px;
    }

    .dash-board-small-lf,
    .dash-board-small-rg {
        position: relative;
        width: 113px;
        height: 440px;
    }

    #dashSmallBoardLeft,
    #dashSmallBoardRight {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 2;
    }

    .small-content {
        position: absolute;
        color: #fff;
        width: 175px;
        padding: 10px 0px;
        background-size: 100% 100%;
        text-align: right;
        padding-right: 40px;
    }

    .small-lf-bg {
        background: url('/resources/img/dirve/dirve_small_bg.png') no-repeat;
        bottom: 20px;
        left: 80px;
    }

    .small-rg-bg {
        background: url('/resources/img/dirve/dirve_small_bg_back.png') no-repeat;
        bottom: 20px;
        right: 80px;
        z-index: 1;
    }

    .small-cont-num {
        font-size: 30px;
        color: #fff;
    }

    .small-cont-title {
        font-size: 20px;
        color: #F8F8F8;
        padding-top: 5px;
    }

    /* 仪表盘部分 end */

    /* 列表 */
    .drives-list-boxs {
        width: 100%;
        padding: 30px 40px 0;
        height: 400px;
    }

    .drives-list {
        position: relative;
        width: 200px;
        height: 240px;
        /* background: linear-gradient(137deg, #1947E4 0%, #14141A 25%, rgba(7, 7, 9, 0.89) 68%, rgba(20, 101, 255, 0.32) 100%);
        border-radius: 16px;
        border: 2px solid #001C7C; */
        background: url('/resources/img/dirve/data_bg.png') no-repeat;
        background-size: 100% 100%;
        overflow: hidden;
        cursor: pointer;
    }
    .drives-item {
        background: linear-gradient(137deg, #1947E4 0%, #14141A 25%, rgba(7, 7, 9, 0.89) 68%, rgba(20, 101, 255, 0.32) 100%);
        width: 196px;
        height: 236px;
        border-radius: 16px;
    }
    .drives-list-img {
        width: 60px;
        height: 60px;
    }

    .drives-list-text {
        font-size: 20px;
        color: #fff;
    }
</style>

<div id="app" v-cloak>
    <screen-contain text-left="总裁驾驶窗" >
        <template v-slot:right>
            <!-- <div class="sub-title" flex>
                <div class="sub-title-text">总线下门店：562310</div>
                <div class="sub-title-text">总线上门店：31235</div>
            </div> -->
            <header-time :is-display="isDisplay"></header-time>
        </template>
        <div class="president-driving-window" flex="dir:top">
            <!-- 仪表盘部分 -->
            <div class="president-driving-content">
                <!-- 中间 -->
                <div class="president-digital">
                    <div id="middle-canvas"></div>
                    <div class="digital-content">
                        <div class="digital-title">总订单量(单)</div>
                        <div class="digital-up" flex="main:center cross:center">
                            <div class="digital-up-percent">{{echartsData.total_orders || 0}}</div>
                            <img class="digital-up-img" src="/resources/img/dirve/up.png" alt="">
                        </div>
                    </div>
                    <div class="digital-all">
                        <div flex style="padding: 0 50px;">
                            <div class="all-items" flex="dir:top main:center cross:center">
                                <div class="all-items-amount">{{echartsData.today_new_users || 0}}</div>
                                <div class="all-items-name">今日新增会员</div>
                            </div>
                            <div class="all-items" flex="dir:top main:center cross:center">
                                <div class="all-items-amount">{{echartsData.today_total_pay_money || 0}}</div>
                                <div class="all-items-name">今日交易额</div>
                            </div>
                        </div>
                        <img src="/resources/img/dirve/dirve-bottom.png" alt="">
                    </div>
                </div>
                <!-- 大的仪表盘 -->
                <div class="dash-board-big" flex="main:justify">
                    <div class="dash-board-lf">
                        <div id="dashBoardLeft"></div>
                        <div class="dash-new-today" flex="dir:top main:center cross:center">
                            <div class="today-num">{{numSystemVal(echartsData.total_users) || 0}}</div>
                            <div class="today-title">总会员数</div>
                        </div>
                    </div>
                    <div class="dash-board-rg">
                        <div id="dashBoardRight"></div>
                        <div class="dash-new-today" flex="dir:top main:center cross:center">
                            <div class="today-num">{{numSystemVal(echartsData.total_pay_money) || 0}}</div>
                            <div class="today-title">总交易额(元)</div>
                        </div>
                    </div>
                </div>
                <!-- 小的仪表盘 -->
                <div class="dash-board-small" flex="main:justify">
                    <div class="dash-board-small-lf">
                        <div id="dashSmallBoardLeft"></div>
                        <div class="small-content small-lf-bg">
                            <div class="small-cont-num">{{echartsData.total_views || 0}}</div>
                            <div class="small-cont-title">今日浏览量</div>
                        </div>
                    </div>
                    <div class="dash-board-small-rg">
                        <div id="dashSmallBoardRight"></div>
                        <div class="small-content small-rg-bg">
                            <div class="small-cont-num">{{echartsData.today_total_visitors || 0}}</div>
                            <div class="small-cont-title">今日访客量</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 列表 -->
            <div class="drives-list-boxs" flex="main:around cross:center">
                <div class="drives-list" v-for="(item, index) in list" :key="index" flex="dir:top main:center cross:center" @click="item.router">
                    <div class="drives-item" flex="dir:top main:center cross:center">
                        <img class="drives-list-img" :src="item.img" alt="">
                        <div class="drives-list-text">{{ item.name }}</div>
                    </div>
                </div>
            </div>
        </div>
    </screen-contain>

</div>
<!-- <script src="/resources/js/echarts.min.js"></script> -->
<!-- <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: '#app',
        data() {
            return {
                isDisplay: 1,
                list: [{
                        // name: '用户数据',
                        name: '流量分析',
                        img: '/resources/img/dirve/user_data.png',
                        router:() => {
                            this.$navigate({r: 'mall/data-census/flowan-alyse'})
                        }
                    },
                    {
                        // name: '交易数据',
                        name: '商品数据',
                        img: '/resources/img/dirve/transaction_data.png',
                        router:() => {
                            this.$navigate({r: 'mall/data-census/goods-statistics'})
                        }
                    },
                    {
                        // name: '数字平台',
                        name: '会员分析',
                        img: '/resources/img/dirve/digital_platform.png',
                        router:() => {
                            this.$navigate({r: 'mall/statistics/car-user-data'})
                        }
                    },
                    /* {
                        name: '直播平台',
                        img: '/resources/img/dirve/live_data.png',
                        router:() => {
                            this.$navigate({r: 'mall/overview/sales-data'})
                        }
                    }, */
                    {
                        // name: '商家数据',
                        name: '交易数据',
                        img: '/resources/img/dirve/business_data.png',
                        router:() => {
                            this.$navigate({r: 'mall/statistics/car-user-trad-data'})
                        }
                    },
                    {
                        name: '价值分析',
                        img: '/resources/img/dirve/conversion_analysis.png',
                        router:() => {
                            this.$navigate({r: 'mall/statistics/car-analysis'})
                        }
                    },
                ],
                echartsData: {}
            }
        },
        created() {
            this.isDisplay = "<?php echo $is_display?>"
        },
        mounted() {
            this.getEhartsData();
            // this.startHeight()
        },
        methods: {
            getEhartsData(){
                let that = this;
                request({
                    params: {
                        r: 'mall/data-census/driving-window',
                    },
                    method: 'get'
                }).then(e => {
                    if (e.data.code === 0) {
                        console.info(e.data.data);
                        // navigateTo({r: 'mall/user/index', page: getQuery('page')});
                        this.echartsData = e.data.data;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                    that.getEharts()
                });
            },
            startHeight() {
                const clientWidth = this.$refs.clientHeight.clientWidth;
                const vNode = this.$refs.clientHeight
                vNode.style.height = this.getHeight(clientWidth) + "px"
            },
            getHeight(width) {
                return width / (448 / 108)
            },
            handleChartData(data) {
                let obj = {
                    type: data.type || 'pie',
                    radius: data.radius || '20%',
                    center: data.center || ['50%', '50%'],
                    z: data.center || -1,
                    itemStyle: {
                        normal: {
                            borderColor: data.itemStyle.borderColor || '',
                            width: data.itemStyle.width || '',
                            color: data.itemStyle.color || 'transparent',
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        },
                    },
                    hoverAnimation: false,
                    label: {
                        show: false,
                    },
                    tooltip: {
                        show: false
                    },
                    data: [100],
                    animationType: "scale",
                }
                return obj
            },
            getEharts() {
                
                // 中间左右部分
                this.echartCenter();
                // 外层部分
                this.echartOuter();

                var middleCanvas = echarts.init(document.getElementById('middle-canvas'))
                middleCanvas.setOption({
                    series: [{
                            name: '下一层',
                            type: 'gauge',
                            startAngle: 90,
                            endAngle: -270,
                            min: 0,
                            max: this.getNumMax(this.echartsData.total_orders,100),
                            splitNumber: 12,
                            z: 0,
                            zlevel: 0,
                            progress: {
                                show: true,
                                width: 18,
                                itemStyle: {
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 1,
                                            color: '#45ECFA' // 0% 处的颜色
                                        }, {
                                            offset: 0.49,
                                            color: '#003DE8' // 100% 处的颜色
                                        }, {
                                            offset: 0,
                                            color: '#000735' // 100% 处的颜色
                                        }],
                                        global: false // 缺省为 false
                                    }
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    width: 18,
                                    color: [
                                        [1, '#001A72']
                                    ]
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: false
                            },
                            axisLabel: {
                                show: false
                            },
                            pointer: {
                                width: 10,
                                icon: 'triangle',
                                itemStyle: {
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 1,
                                            color: '#070709' // 0% 处的颜色
                                        }, {
                                            offset: 0.45,
                                            color: '#0034E4' // 100% 处的颜色
                                        }, {
                                            offset: 0.07,
                                            color: '#09F7FA' // 100% 处的颜色
                                        }, {
                                            offset: 0,
                                            color: '#BCFEFF' // 100% 处的颜色
                                        }],
                                        global: false // 缺省为 false
                                    }
                                }
                            },
                            anchor: {
                                show: false
                            },
                            title: {
                                show: false
                            },
                            detail: {
                                show: false
                            },
                            data: [{
                                value: this.echartsData.total_orders
                            }]
                        },
                        {
                            name: '上一层',
                            type: 'gauge',
                            startAngle: 90,
                            endAngle: -270,
                            min: 0,
                            max: this.getNumMax(this.echartsData.total_orders,100),
                            splitNumber: 12,
                            zLevel: 2,
                            z: 2,
                            progress: {
                                show: false
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    width: 18,
                                    color: [
                                        [1, '#001A72']
                                    ]
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                length: 10,
                                distance: -17,
                                lineStyle: {
                                    width: 2,
                                    color: '#002091'
                                }
                            },
                            axisLabel: {
                                show: false
                            },
                            pointer: {
                                show: false,
                            },
                            anchor: {
                                show: false
                            },
                            title: {
                                show: false
                            },
                            detail: {
                                show: false
                            },
                            data: [{
                                value: this.echartsData.total_orders
                            }]
                        },
                        { // 圆环
                            type: 'pie',
                            radius: '30%',
                            center: ['50%', '50%'],
                            z: -1,
                            itemStyle: {
                                normal: {
                                    borderColor: '#1F223B',
                                    color: '#020529'
                                    // color: new echarts.graphic.RadialGradient(.5, .5, .8, [{
                                    //         offset: 0,
                                    //         color: '#4978EC'
                                    //     },
                                    //     {
                                    //         offset: .5,
                                    //         color: '#1E2B57'
                                    //     },
                                    //     {
                                    //         offset: 1,
                                    //         color: '#141F3D'
                                    //     }
                                    // ], false),
                                    // label: {
                                    //     show: false
                                    // },
                                    // labelLine: {
                                    //     show: false
                                    // }
                                },
                            },
                            hoverAnimation: false,
                            label: {
                                show: false,
                            },
                            tooltip: {
                                show: false
                            },
                            data: [100],
                            animationType: "scale"
                        }
                    ]
                })
            },
            echartOuter(){
                var dashSmallBoardLeft = echarts.init(document.getElementById('dashSmallBoardLeft'));
                let defConfig = {
                    
                    type: 'gauge',
                    min: 0,
                    // max: this.getNumMax(this.echartsData.total_views),
                    startAngle: -110,
                    endAngle: -250,
                    splitNumber: 2,
                    radius: 113,
                    center: ['100%', '70%'],
                    progress: {
                        show: true,
                        width: 25,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 1,
                                    color: '#0234E5' // 0% 处的颜色
                                }, {
                                    offset: 0.75,
                                    color: '#1465FF' // 100% 处的颜色
                                }, {
                                    offset: 0.61,
                                    color: '#1465FF' // 100% 处的颜色
                                }, {
                                    offset: 0.42,
                                    color: '#2069E4' // 100% 处的颜色
                                }, {
                                    offset: 0,
                                    color: '#55F7FB' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            },
                            borderWidth: 1,
                            borderColor: '#FFFFFF'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            width: 25,
                            color: [
                                [1, '#031D79']
                            ]
                        },
                    },
                    splitLine: {
                        show: true,
                        distance: -15,
                        length: 15,
                        lineStyle: {
                            color: '#FFFFFF',
                            width: 2
                        }

                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        distance: 30,
                        color: '#F8F8F8',
                        formatter: function(value) {
                            if (value < 1000) {
                                return value
                            } else if (value >= 1000 && value < 10000) {
                                return `${value / 1000}K`
                            } else {
                                return `${value / 10000}W`
                            }
                        }
                    },
                    anchor: {},
                    pointer: {
                        width: 20,
                        icon: 'triangle',
                        length: '50%',
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 1,
                                    color: '#070709' // 0% 处的颜色
                                }, {
                                    offset: 0.45,
                                    color: '#0034E4' // 100% 处的颜色
                                }, {
                                    offset: 0.07,
                                    color: '#09F7FA' // 100% 处的颜色
                                }, {
                                    offset: 0,
                                    color: '#BCFEFF' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }
                    },
                    detail: {
                        show: false
                    },
                    title: {
                        show: false
                    },
                    /* data: [{
                        value: this.echartsData.total_views
                    }] */
                }
                dashSmallBoardLeft.setOption({
                    series: [
                        {
                            ...defConfig,
                            name: 'dash-small-board-left',
                            max: this.getNumMax(this.echartsData.total_views),
                            data: [{
                                value: this.echartsData.total_views
                            }],
                        }
                    ]

                })

                var dashSmallBoardRight = echarts.init(document.getElementById('dashSmallBoardRight'));
                dashSmallBoardRight.setOption({
                    series: [
                        {
                            ...defConfig,
                            clockwise: false,
                            name: 'dash-small-board-right1',
                            max: this.getNumMax(this.echartsData.today_total_visitors),
                            data: [{
                                value: this.echartsData.today_total_visitors
                            }],
                            center: ['0', '70%'],
                            startAngle: 80,
                            endAngle: -80,
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    width: 5,
                                    color: [
                                        [1, '#031D79']
                                    ]
                                },
                            },
                            splitLine: {
                                show: false
                            },
                            
                        },
                        {
                            ...defConfig,
                            name: 'dash-small-board-right2',
                            type: 'gauge',
                            min: 0,
                            max: this.getNumMax(this.echartsData.today_total_visitors),
                            startAngle: 80,
                            endAngle: -80,
                            splitNumber: 2,
                            radius: 113,
                            center: ['0', '70%'],
                            progress: {
                                show: false
                            },
                            axisLine: {
                                lineStyle: {
                                    width: 25,
                                    color: [
                                        [1, '#031D79']
                                    ]
                                },
                            },
                            splitLine: {
                                show: true,
                                distance: -15,
                                length: 15,
                                lineStyle: {
                                    color: '#FFFFFF',
                                    width: 2
                                }

                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                show: false
                            },
                            anchor: {},
                            pointer: {
                                show: false
                            },
                            detail: {
                                show: false
                            },
                            title: {
                                show: false
                            },
                        }
                    ]
                })
            },
            echartCenter(){
                var myChartObj = {
                    type: 'gauge',
                    progress: {
                        show: true,
                        width: 35,
                        roundCap: true,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 1,
                                    color: '#0234E5' // 0% 处的颜色
                                }, {
                                    offset: 0.75,
                                    color: '#1465FF' // 100% 处的颜色
                                }, {
                                    offset: 0.61,
                                    color: '#1465FF' // 100% 处的颜色
                                }, {
                                    offset: 0.42,
                                    color: '#2069E4' // 100% 处的颜色
                                }, {
                                    offset: 0,
                                    color: '#55F7FB' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            width: 35,
                            color: [
                                [1, '#031D79']
                            ]
                        },
                        roundCap: true
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        distance: 25,
                        color: '#999',
                        fontSize: 16,
                        formatter: function(value) {
                            if (value < 1000) {
                                return value
                            } else if (value >= 1000 && value < 10000) {
                                return `${(value / 1000).toFixed()}K`
                            } else {
                                return `${(value / 10000).toFixed()}W`
                            }
                        }
                    },
                    anchor: {
                        show: false,
                    },
                    pointer: {
                        width: 10,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 1,
                                    color: '#070709' // 0% 处的颜色
                                }, {
                                    offset: 0.45,
                                    color: '#0034E4' // 100% 处的颜色
                                }, {
                                    offset: 0.07,
                                    color: '#09F7FA' // 100% 处的颜色
                                }, {
                                    offset: 0,
                                    color: '#BCFEFF' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    min: 0,
                    // max: 100000,
                    splitNumber: 10,
                }

                var myChartCircleComm1 = {
                    type: 'pie',
                    radius: '20%',
                    center: ['50%', '50%'],
                    z: -1,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.RadialGradient(.5, .5, .8, [{
                                    offset: 0,
                                    color: '#4978EC'
                                },
                                {
                                    offset: .5,
                                    color: '#1E2B57'
                                },
                                {
                                    offset: 1,
                                    color: '#141F3D'
                                }
                            ], false),
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        },
                    },
                    hoverAnimation: false,
                    label: {
                        show: false,
                    },
                    tooltip: {
                        show: false
                    },
                    data: [100],
                    animationType: "scale"
                }
                var myChartCircleComm2 = {
                    type: 'pie',
                    radius: '30%',
                    center: ['50%', '50%'],
                    z: -2,
                    itemStyle: {
                        normal: {
                            width: '4',
                            borderColor: '#212131',
                            color: 'transparent'
                        },
                    },
                    hoverAnimation: false,
                    label: {
                        show: false,
                    },
                    tooltip: {
                        show: false
                    },
                    data: [100],
                    animationType: "scale"
                }
                var myChart1 = echarts.init(document.getElementById('dashBoardLeft'));
                myChart1.setOption({
                    series: [{
                            name: 'dash-board-left',
                            ...myChartObj,
                            data: [{
                                value: this.echartsData.total_users
                            }],
                            max: this.getNumMax(this.echartsData.total_users)
                        },
                        myChartCircleComm1,
                        myChartCircleComm2
                    ]
                })

                var myChart2 = echarts.init(document.getElementById('dashBoardRight'));
                myChart2.setOption({
                    series: [
                        {
                            name: 'gauge-midle-big1',
                            clockwise: false,
                            ...myChartObj,
                            axisLine: {
                                show: false,
                            },
                            axisLabel: {
                                show: false,
                            },
                            data: [{
                                value: this.echartsData.total_pay_money
                            }],
                            max: this.getNumMax(this.echartsData.total_pay_money),
                            
                        },
                        {
                            name: 'gauge-midle-big1',
                            type: 'gauge',
                            progress: {
                                show: false,
                            },
                            axisLine: {
                                lineStyle: {
                                    width: 35,
                                    color: [
                                        [1, '#031D79']
                                    ]
                                },
                                roundCap: true
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: false
                            },
                            axisLabel: {
                                show: true,
                                distance: 25,
                                color: '#999',
                                fontSize: 16,
                                formatter: function(value) {
                                    // value = Number(value)
                                    if (value < 1000) {
                                        return value
                                    } else if (value >= 1000 && value < 10000) {
                                        return `${value / 1000}K`
                                    } else {
                                        return `${value / 10000}W`
                                    }
                                }
                            },
                            anchor: {
                                show: false,
                            },
                            pointer: {
                                show: false
                            },
                            title: {
                                show: false
                            },
                            detail: {
                                show: false
                            },
                            min: this.getNumMax(this.echartsData.total_pay_money),
                            max: 0,
                            splitNumber: 10,
                        },
                        myChartCircleComm1,
                        myChartCircleComm2
                    ]
                })
            },
            getNumMax(num=0,max=10000){
                let length = (num/max).toFixed();
                if(length > 1){
                    let addMax = Math.pow(10, String(length).length);
                    max *= Number(addMax);
                }
                return Number(max);
            },
            numSystemVal(val) {
                if(isNaN(val)){
                    val = '-'
                }else if (val * 1 < 10000) {
                    val = val * 1
                } else {
                    if ((val * 1) % 1000000 == 0) {
                        val = parseInt((val * 1) / 10000) + 'W'
                    } else {
                        val = parseInt((val * 1) / 10000) + 'W+'
                    }
                }
                return val
            }
        }
    })
</script>