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="think-box-shadow margin-top-15">
    <div id="main1" style="width:100%;height:400px"></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="main3" 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 list1 = data1.map(function (item) {
            return item[0];
        });
        var chart1 = echarts.init(document.getElementById('main1'));
        window.addEventListener("resize", function () {
            chart1.resize()
        });

        chart1.setOption({
            title: [
                {left: '12%', text: '近十天用户数量趋势'},
                {left: '45%', text: '近十天订单数量趋势'},
                {left: '78%', text: '近十天交易金额趋势'}
            ],
            tooltip: {trigger: 'axis', show: true, axisPointer: {type: 'cross', label: {}}},
            xAxis: [
                {data: list1, gridIndex: 0},
                {data: list1, gridIndex: 1},
                {data: list1, gridIndex: 2}
            ],
            yAxis: [
                {
                    splitLine: {show: false}, gridIndex: 0, type: 'value', axisLabel: {
                        formatter: '{value} 人'
                    }
                },
                {
                    splitLine: {show: false}, gridIndex: 1, type: 'value', axisLabel: {
                        formatter: '{value} 单'
                    }
                },
                {
                    splitLine: {show: false}, gridIndex: 2, type: 'value', axisLabel: {
                        formatter: '{value} 元'
                    }
                }
            ],
            grid: [
                {left: '04%', right: '67%', top: '25%'},
                {left: '37%', right: '34%', top: '25%'},
                {left: '70%', right: '01%', 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[1];
                    }),
                },
                {
                    type: 'line', showSymbol: true, xAxisIndex: 1, yAxisIndex: 1,
                    label: {normal: {position: 'top', formatter: '{c} 单', show: true}},
                    data: data1.map(function (item) {
                        return item[2];
                    }),
                },
                {
                    type: 'line', showSymbol: true, xAxisIndex: 2, yAxisIndex: 2,
                    label: {normal: {position: 'top', formatter: '{c} 元', show: true}},
                    data: data1.map(function (item) {
                        return item[3];
                    }),
                }
            ]
        });

        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)'
                        }
                    }
                }
            ]
        });

        var chart3 = echarts.init(document.getElementById('main3'));
        window.addEventListener("resize", function () {
            chart3.resize()
        });

        chart3.setOption({
            title: [{left: 'center', text: '近十天代理收益统计'}],
            tooltip: {trigger: 'axis', show: true, axisPointer: {type: 'cross', label: {}}},
            xAxis: [{data: list1, gridIndex: 0}],
            yAxis: [
                {
                    splitLine: {show: false}, 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[4];
                    }),
                }
            ]
        });
    });
</script>

{/block}