ThinkAdmin/app/data/view/total/portal/index.html

{extend name="../../admin/view/main"}

{block name='content'}
<div class="think-box-shadow portal-block-container notselect">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6 layui-col-md3">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-125deg,#57bdbf,#2f9de2)">
                <div>商品总量</div>
                <div>{$goodsTotal|default='0'}</div>
                <div>当前商品总数量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-app"></i>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-125deg,#ff7d7d,#fb2c95)">
                <div>用户总量</div>
                <div>{$usersTotal|default='0'}</div>
                <div>当前用户总数量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-user"></i>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-113deg,#c543d8,#925cc3)">
                <div>订单总量</div>
                <div>{$orderTotal|default='0'}</div>
                <div>已付款订单总数</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-form"></i>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-141deg,#ecca1b,#f39526)">
                <div>交易金额</div>
                <div>{$amountTotal|default='0'}</div>
                <div>已成交金额总数</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-rmb"></i>
        </div>
    </div>
</div>

<div class="layui-row layui-col-space15 margin-top-10">

    <div class="layui-col-xs12 layui-col-md6">
        <div class="think-box-shadow">
            <div id="main2" style="width:100%;height:350px"></div>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-md6">
        <div class="think-box-shadow">
            <div id="main4" style="width:100%;height:350px"></div>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-md6">
        <div class="think-box-shadow">
            <div id="main5" style="width:100%;height:350px"></div>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-md6">
        <div class="think-box-shadow">
            <div id="main6" style="width:100%;height:350px"></div>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-md6">
        <div class="think-box-shadow">
            <div id="main3" style="width:100%;height:350px"></div>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-md6">
        <div class="think-box-shadow">
            <div id="main7" style="width:100%;height:350px"></div>
        </div>
    </div>
</div>

<label class="layui-hide">
    <textarea id="jsondata1">{$days|json_encode}</textarea>
    <textarea id="jsondata2">{$levels|json_encode}</textarea>
</label>

<script>

    require(['echarts'], function (echarts) {
        var data1 = JSON.parse($('#jsondata1').html());
        var days = data1.map(function (item) {
            return item['当天日期'];
        });

        var data2 = JSON.parse($('#jsondata2').html());
        var chart2 = echarts.init(document.getElementById('main2'));
        window.addEventListener("resize", function () {
            chart2.resize()
        });
        chart2.setOption({
            title: {text: '用户等级分布统计', left: 'center'},
            legend: {orient: 'vertical', left: 'left'},
            tooltip: {trigger: 'item', formatter: '{a} <br/>{b} : {c} 人 ( {d}% )'},
            series: [
                {
                    name: '用户等级',
                    type: 'pie',
                    radius: '60%',
                    center: ['50%', '55%'],
                    data: data2.map(function (item) {
                        return {name: item.name, value: item.count}
                    }),
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        });

        (function (charts) {
            window.addEventListener("resize", function () {
                charts.resize()
            });
            charts.setOption({
                title: [{left: 'center', text: '近十天代理收益统计'}],
                tooltip: {trigger: 'axis', show: true, axisPointer: {type: 'cross', label: {}}},
                xAxis: [{data: days, gridIndex: 0}],
                yAxis: [
                    {
                        splitLine: {show: true}, gridIndex: 0, type: 'value', axisLabel: {
                            formatter: '{value} 元'
                        }
                    }
                ],
                grid: [{left: '10%', right: '3%', top: '25%'}],
                series: [
                    {
                        type: 'line', showSymbol: true, xAxisIndex: 0, yAxisIndex: 0,
                        label: {normal: {position: 'top', formatter: '{c} 元', show: true}},
                        data: data1.map(function (item) {
                            return item['返利金额'];
                        }),
                    }
                ]
            });
        })(echarts.init(document.getElementById('main3')));

        (function (charts) {
            window.addEventListener("resize", function () {
                charts.resize()
            });
            charts.setOption({
                title: [{left: 'center', text: '近十天用户增涨趋势'}],
                tooltip: {trigger: 'axis', show: true, axisPointer: {type: 'cross', label: {}}},
                xAxis: [{data: days, gridIndex: 0}],
                yAxis: [
                    {
                        splitLine: {show: true}, gridIndex: 0, type: 'value', axisLabel: {
                            formatter: '{value} 人'
                        }
                    }
                ],
                grid: [{left: '10%', right: '3%', top: '25%'}],
                series: [
                    {
                        type: 'line', showSymbol: true, xAxisIndex: 0, yAxisIndex: 0,
                        label: {normal: {position: 'top', formatter: '{c} 人', show: true}},
                        data: data1.map(function (item) {
                            return item['增加用户'];
                        }),
                    }
                ]
            });
        })(echarts.init(document.getElementById('main4')));

        (function (charts) {
            window.addEventListener("resize", function () {
                charts.resize()
            });
            charts.setOption({
                title: [{left: 'center', text: '近十天订单数量趋势'}],
                tooltip: {trigger: 'axis', show: true, axisPointer: {type: 'cross', label: {}}},
                xAxis: [{data: days, gridIndex: 0}],
                yAxis: [
                    {
                        splitLine: {show: true}, gridIndex: 0, type: 'value', axisLabel: {
                            formatter: '{value} 单'
                        }
                    }
                ],
                grid: [{left: '10%', right: '3%', top: '25%'}],
                series: [
                    {
                        type: 'line', showSymbol: true, xAxisIndex: 0, yAxisIndex: 0,
                        label: {normal: {position: 'top', formatter: '{c} 单', show: true}},
                        data: data1.map(function (item) {
                            return item['订单数量'];
                        }),
                    }
                ]
            });
        })(echarts.init(document.getElementById('main5')));

        (function (charts) {
            window.addEventListener("resize", function () {
                charts.resize()
            });
            charts.setOption({
                title: [{left: 'center', text: '近十天交易金额趋势'}],
                grid: [{left: '10%', right: '3%', top: '25%'}],
                tooltip: {
                    trigger: 'axis',
                },
                xAxis: [{data: days, gridIndex: 0}],
                yAxis: [{type: 'value', splitLine: {show: true}, gridIndex: 0, axisLabel: {formatter: '{value} 元'}}],
                series: [
                    {
                        type: 'line', showSymbol: true, xAxisIndex: 0, yAxisIndex: 0,
                        label: {position: 'top', formatter: '{c} 元', show: true},
                        data: data1.map(function (item) {
                            return item['订单金额'];
                        }),
                    }
                ]
            });
        })(echarts.init(document.getElementById('main6')));

        (function (charts) {
            window.addEventListener("resize", function () {
                charts.resize()
            });
            charts.setOption({
                title: [{text: '近十天账户余额趋势'}],
                legend: {data: ['充值余额', '消费余额']},
                tooltip: {trigger: 'axis'},
                xAxis: [{data: days, gridIndex: 0}],
                yAxis: [{type: 'value', splitLine: {show: true}, gridIndex: 0, axisLabel: {formatter: '{value} 元'}}],
                series: [
                    {
                        name: '充值余额',
                        type: 'line',
                        label: {position: 'top', formatter: '{c} 元', show: true},
                        data: data1.map(function (item) {
                            return item['充值余额'];
                        }),
                    },
                    {
                        name: '消费余额',
                        type: 'line',
                        label: {formatter: '{c} 元', show: true},
                        data: data1.map(function (item) {
                            return item['消费余额'];
                        }),
                    },
                ]
            });
        })(echarts.init(document.getElementById('main7')));
    });
</script>

{/block}