123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102 |
- <!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>
|