<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新经资讯后台管理</title>
    <link rel="stylesheet" type="text/css" href="../../static/admin/css/reset.css">
    <link rel="stylesheet" type="text/css" href="../../static/admin/css/main.css">
    <script type="text/javascript" src="../../static/admin/js/echarts.min.js"></script>
</head>
<body>
<div class="breadcrub">
    当前位置：用户管理>用户统计
</div>
<div class="spannels">
    <div class="spannel scolor01">
        <em>{{ data.total_count }}</em><span>人</span>
        <b>用户总数</b>
    </div>
    <div class="spannel scolor02">
        <em>{{ data.mon_count }}</em><span>人</span>
        <b>用户月新增数</b>
    </div>
    <div class="spannel2 scolor03">
        <em>{{ data.day_count }}</em><span>人</span>
        <b>用户日新增数</b>
    </div>
</div>

<div class="pannel">
    <div id="chart_show" class="chart_show"></div>
</div>
<script>
    var oChart = echarts.init(document.getElementById('chart_show'));
    var chartopt = {
        title: {
            text: '用户登录活跃数',
            left: 'center',
            top: '10'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['active'],
            top: '40'
        },
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        xAxis: [
            {
                name: '今天',
                type: 'category',
                boundaryGap: false,
                data: {{ data.active_date | safe }}
            }
        ],
        yAxis: [
            {
                name: '活跃用户数量',
                type: 'value'
            }
        ],
        series: [
            {
                name: 'active',
                type: 'line',
                smooth: true,
                itemStyle: {normal: {areaStyle: {type: 'default'}, color: '#f80'}, lineStyle: {color: '#f80'}},
                data: {{ data.active_count }}
            }],
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(255,136,0,0.39)'
                }, {
                    offset: .34,
                    color: 'rgba(255,180,0,0.25)'
                }, {
                    offset: 1,
                    color: 'rgba(255,222,0,0.00)'
                }])

            }
        }

    };

    oChart.setOption(chartopt);

</script>
</body>
</html>