|
|
<extend name="Public/base" />
|
|
|
<block name="css">
|
|
|
<link rel="stylesheet" href="__CSS__/open-egret.css">
|
|
|
<link rel="stylesheet" href="__CSS__/index_new.css"/>
|
|
|
<link rel="stylesheet" href="__CSS__/overview.css">
|
|
|
<style>.tc1{width:50px;} .tc2{width:80px;}
|
|
|
.data-box {width:100%;overflow:hidden;height:100%;overflow-x:auto;}
|
|
|
.data-box .data-wrap {overflow:hidden;height:100%;}
|
|
|
.data-box table {border:none;table-layout:fixed;width:100%;border-collapse:separate;}
|
|
|
.data-box tr th,.data-box tr td {border:none;width:100px;}
|
|
|
.data-box th~th,.data-box td~td {border-left:1px solid #ddd;}
|
|
|
.data-box tr~tr td{border-top:1px solid #ddd;}
|
|
|
.m-channel-data .main_content_main_item {width:16.66666%;}
|
|
|
.main_content_main_item>div {border:none;}
|
|
|
.xg_zhchart {min-height:515px;}
|
|
|
|
|
|
.highchart_area_notice {line-height:32px;font-size:14px;position:absolute;z-index:1;}
|
|
|
.highchart_area_notice a,.highchart_area_notice a:hover {color:#666;border:none;border-bottom:2px solid transparent;}
|
|
|
.highchart_area_notice a.mcurr {color:#18b1ea;border-bottom-color:#18b1ea;}
|
|
|
|
|
|
.highchart_area_notice span~span,.highchart_area_notice a~a{margin-left:20px;}
|
|
|
|
|
|
.highchart_area_subtab {display:none;}
|
|
|
.highchart_area_subtab.show {display:block;}
|
|
|
|
|
|
|
|
|
|
|
|
.main-place .question_list span:first-child {width: 118px;}
|
|
|
.question_content .question_list span {width: 390px;}
|
|
|
|
|
|
.main_content_platform span.s-c-title{line-height:20px;height:20px;display:block;}
|
|
|
|
|
|
.timeandtab,.time_fl {height:34px;line-height:34px;}
|
|
|
.icon_date {vertical-align:middle;margin-top:-5px;}
|
|
|
.htchart_area {margin-top:0;}
|
|
|
|
|
|
.new_users_tb .circle {width:6px;height:6px;}
|
|
|
</style>
|
|
|
</block>
|
|
|
<block name="body">
|
|
|
<div style="padding: 0 20px 20px;">
|
|
|
|
|
|
<div class="cf main-place top_nav_list navtab_list" style="margin-bottom:0;">
|
|
|
<h3 class="page_title">应用概况</h3>
|
|
|
<p class="description_text">说明：统计移动端（SDK）的设备数及机型</p>
|
|
|
<div class="question frq">
|
|
|
<i class="question_mark">?</i>
|
|
|
<ul class="question_content">
|
|
|
<li class="question_title">数据相关说明</li>
|
|
|
<li class="question_list">
|
|
|
<span class="">今日新增设备</span>
|
|
|
<span class="">今日首次安装并且打开游戏的设备数。一台设备，只在首次安装打开应用时计作新增设备数1，安装多款游戏的同一设备不会重复计量</span>
|
|
|
</li>
|
|
|
<li class="question_list">
|
|
|
<span class="">昨日新增设备</span>
|
|
|
<span class="">昨日首次安装并且打开游戏的设备数（去重）。</span>
|
|
|
</li>
|
|
|
<li class="question_list">
|
|
|
<span class="">累计设备</span>
|
|
|
<span class="">首次安装并打开应用的设备总数（去重）。</span>
|
|
|
</li>
|
|
|
<li class="question_list">
|
|
|
<span class="">近7日活跃设备</span>
|
|
|
<span class="">最近7日（截止昨日）至少启动一次应用的设备数。</span>
|
|
|
</li>
|
|
|
<li class="question_list">
|
|
|
<span class="">近7日单设备使用时长</span>
|
|
|
<span class="">最近7日（截止昨日），每日单设备使用应用的时长均值之和的平均值，即近7日单设备使用时长=截止昨日的7日的每日单设备使用应用的时长均值的总和 / 7。（当用户登录后通过系统关闭进程，此时无法统计到应用关闭时间，则给予本次登录使用时长一个默认值2.5h来进行计算）</span>
|
|
|
</li>
|
|
|
<li class="question_list">
|
|
|
<span class="">活跃设备</span>
|
|
|
<span class="">每日至少启动一次应用的设备数（去重），统计时间段内只记录第一次启动的时间点。</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="row blockinfo">
|
|
|
|
|
|
<div class="main_content_main m-channel-data main_content_platform" style="border-bottom:1px solid #ddd;margin-bottom:15px;padding:17px 0;">
|
|
|
<div class="main_content_main_item">
|
|
|
<div class="col-md-2" onclick="gettotal(1,'#today');">
|
|
|
<strong class="s-c-orange" id = "today">加载中...</strong> <span class="s-c-title">今日新增设备</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="main_content_main_item">
|
|
|
<div class="col-md-2" onclick="gettotal(2,'#yesterday')">
|
|
|
<strong class="s-c-orange" id = "yesterday">加载中...</strong> <span class="s-c-title">昨日新增设备</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="main_content_main_item">
|
|
|
<div class="col-md-2" onclick="gettotal(0,'#total')">
|
|
|
<strong class="s-c-orange" id = "total">加载中...</strong> <span class="s-c-title">累计设备</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="main_content_main_item">
|
|
|
<div class="col-md-2" onclick="gettotal(3,'#day7')">
|
|
|
<strong class="s-c-orange" id = "day7">加载中...</strong> <span class="s-c-title">近7日活跃设备</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="main_content_main_item">
|
|
|
<div class="col-md-2" onclick="gettotal(4,'#day30')">
|
|
|
<strong class="s-c-orange"id = "day30">加载中...</strong> <span class="s-c-title">近30日活跃设备</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="main_content_main_item">
|
|
|
<div class="col-md-2" onclick="gettotal(5,'#duration7')">
|
|
|
<strong class="s-c-orange" id = "duration7">加载中...</strong> <span class="s-c-title">近7日单设备日均使用时长</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="xg_zhchart">
|
|
|
<div class="timeandtab">
|
|
|
<div class="time_fl jsctitle">
|
|
|
<div class="pt-datepicker__date js-pt-calendar">
|
|
|
<i class="icon_date"></i>
|
|
|
<time class="pt-datepicker__date-from pt-fl js-pt-calendar-from jsctitle1">{:str_replace('-','/',substr(I('start',date('Y/m/d',strtotime('-1 day'))),5))}</time>
|
|
|
<time class="pt-datepicker__date-to js-pt-calendar-to jsctitle2">{:str_replace('-','/',substr(I('end',date('Y/m/d',strtotime('-1 day'))),5))}</time>
|
|
|
<i class="xg_dropi js-pt-datepicker__date-i"></i>
|
|
|
</div>
|
|
|
<div class="xg_daterangepicker js-show-calendar">
|
|
|
<div class="ranges">
|
|
|
<ul>
|
|
|
<li class="<eq name='num' value='1'>datapick_active</eq>"><a href="{:U('device_survey',array('tb'=>I('tb'),'type'=>I('type'),'category'=>I('category'),'start'=>date('Y-m-d'),'end'=>date('Y-m-d'),'num'=>1))}">今天</a></li>
|
|
|
<li class="<eq name='num' value='2'>datapick_active</eq>"><a href="{:U('device_survey',array('tb'=>I('tb'),'type'=>I('type'),'category'=>I('category'),'start'=>date('Y-m-d',strtotime('-1 day')),'end'=>date('Y-m-d',strtotime('-1 day')),'num'=>2))}">昨天</a></li>
|
|
|
<li class="<eq name='num' value='3'>datapick_active</eq>"><a href="{:U('device_survey',array('tb'=>I('tb'),'type'=>I('type'),'category'=>I('category'),'start'=>date('Y-m-d',mktime(0,0,0,date('m'),date('d')-6-date('w'),date('Y'))),'end'=>date('Y-m-d',mktime(0,0,0,date('m'),date('d')-date('w'),date('Y'))),'num'=>3))}">过去整周</a></li>
|
|
|
<li class="<eq name='num' value='4'>datapick_active</eq>"><a href="{:U('device_survey',array('tb'=>I('tb'),'type'=>I('type'),'category'=>I('category'),'start'=>date('Y-m-d',mktime(0,0,0,date('m')-1,1,date('Y'))),'end'=>date('Y-m-d',mktime(0,0,0,date('m'),1,date('Y'))-1),'num'=>4))}">过去整月</a></li>
|
|
|
<li class="<eq name='num' value='5'>datapick_active</eq>"><a href="{:U('device_survey',array('tb'=>I('tb'),'type'=>I('type'),'category'=>I('category'),'start'=>date('Y-m-d',strtotime('-7 day')),'end'=>date('Y-m-d',strtotime('-1 day')),'num'=>5))}">过去7天</a></li>
|
|
|
<li class="<eq name='num' value='6'>datapick_active</eq>"><a href="{:U('device_survey',array('tb'=>I('tb'),'type'=>I('type'),'category'=>I('category'),'start'=>date('Y-m-d',strtotime('-30 day')),'end'=>date('Y-m-d',strtotime('-1 day')),'num'=>6))}">过去30天</a></li>
|
|
|
<!-- <li class="<eq name='num' value='7'>datapick_active</eq>"><a href="{:U('device_survey',array('tb'=>I('tb'),'type'=>I('type'),'category'=>I('category'),'start'=>date('Y-m-d',strtotime('-365 day')),'end'=>date('Y-m-d',strtotime('-1 day')),'num'=>7))}">过去一年</a></li>-->
|
|
|
</ul>
|
|
|
<div class="range_inputs">
|
|
|
<button class="applyBtn pt-btn btn-success js_determine" type="button">确定</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="xg_zcalendar xg_left">
|
|
|
<div class="calendar-table">
|
|
|
<table class="table-condensed jscalendar1">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th class="prev available jspn" data-range-key="{$calendar.prev}"><i class=" page-Previous "></i></th>
|
|
|
<th colspan="5" class="month">{$calendar.ftitle}</th>
|
|
|
<th></th>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<th>一</th>
|
|
|
<th>二</th>
|
|
|
<th>三</th>
|
|
|
<th>四</th>
|
|
|
<th>五</th>
|
|
|
<th>六</th>
|
|
|
<th>日</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody class="jscalendarcontent">
|
|
|
<volist name="calendar[first]" id="vo">
|
|
|
<tr>
|
|
|
<volist name="vo" id="v" key="j">
|
|
|
<td class="<eq name='v.full' value='$calendar.today'>today</eq> <eq name='j' value='6'>weekend<else /><eq name='j' value='7'>weekend</eq></eq> available <notempty name='v.value'>jsselect</notempty>" data-key="{$v.full}"><span>{$v.value|default=' '}</span></td>
|
|
|
</volist>
|
|
|
</tr>
|
|
|
</volist>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="xg_zcalendar xg_right">
|
|
|
<div class="calendar-table">
|
|
|
<table class="table-condensed jscalendar2">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th></th>
|
|
|
<th colspan="5" class="month">{$calendar.ltitle}</th>
|
|
|
<th class="next <eq name='calendar.iscurrent' value='1'>available jspn</eq>" data-range-key="{$calendar.next}"><i class="page-next"></i></th>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<th>一</th>
|
|
|
<th>二</th>
|
|
|
<th>三</th>
|
|
|
<th>四</th>
|
|
|
<th>五</th>
|
|
|
<th>六</th>
|
|
|
<th>日</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody class="jscalendarcontent">
|
|
|
<volist name="calendar[last]" id="vo">
|
|
|
<tr>
|
|
|
<volist name="vo" id="v" key="j">
|
|
|
<td class="<eq name='v.full' value='$calendar.today'>today</eq> <notempty name='v.value'><eq name='v.no' value='1'>noselect<else />jsselect</eq></notempty> <eq name='j' value='6'>weekend<else /><eq name='j' value='7'>weekend</eq></eq> available" data-key="{$v.full}" ><span>{$v.value|default=' '}</span></td>
|
|
|
</volist>
|
|
|
</tr>
|
|
|
</volist>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 图表数据图切换按钮 begin-->
|
|
|
<div class="tab_fr tab_head">
|
|
|
<a href="#0" data-key="news" class="<empty name='Think.get.tb'>current<else /><eq name='Think.get.tb' value='0'>current</eq></empty>">新增设备</a>
|
|
|
<a href="#1" data-key="active" class="<eq name='Think.get.tb' value='1'>current</eq>">活跃设备</a>
|
|
|
<a href="#2" data-key="model" class="<eq name='Think.get.tb' value='2'>current</eq>">启动机型</a>
|
|
|
</div>
|
|
|
<!--end 图表数据图切换按钮-->
|
|
|
<!-- heightChart! begin -->
|
|
|
<?php $count = count($table['date']);?>
|
|
|
<div class="htchart_area tab_content">
|
|
|
<div class="htchart_area_tab <empty name='Think.get.tb'>show<else /><eq name='Think.get.tb' value='0'>show</eq></empty>">
|
|
|
<div class="highchart_area_notice"><span>合计(去重) {$table.sum.news|default=0}</span><span>日均 {$table.average.news|default=0}</span></div>
|
|
|
<div class="highchart_area">
|
|
|
<div class="highchart_area_tab" id="container1" style="width:100%;height:220px;"></div>
|
|
|
</div>
|
|
|
<div class="new_users">
|
|
|
<table class="new_users_tb">
|
|
|
<tr>
|
|
|
<th class="tc1">显示</th>
|
|
|
<th class="tc2">指标</th>
|
|
|
<th class="tc3" rowspan="3">
|
|
|
<div class="data-box">
|
|
|
<div class="data-wrap" style="width:<eq name='foldline.hours' value='0'><gt name='count' value='14'><eq name='Think.get.num' value='7'>100%<else />{$count*100+100}px</eq><else />100%</gt><else />{13*96}px</eq>">
|
|
|
<table>
|
|
|
<tr>
|
|
|
<eq name="foldline.hours" value="0">
|
|
|
<volist name="table.date" id="vo">
|
|
|
<th>{$vo}</th>
|
|
|
</volist>
|
|
|
<else />
|
|
|
<th>0:00</th>
|
|
|
<th>2:00</th>
|
|
|
<th>4:00</th>
|
|
|
<th>6:00</th>
|
|
|
<th>8:00</th>
|
|
|
<th>10:00</th>
|
|
|
<th>12:00</th>
|
|
|
<th>14:00</th>
|
|
|
<th>16:00</th>
|
|
|
<th>18:00</th>
|
|
|
<th>20:00</th>
|
|
|
<th>22:00</th>
|
|
|
</eq>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<volist name="table.news.ios" id="vo">
|
|
|
<td style="background:#FFF;">{$vo}</td>
|
|
|
</volist>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<volist name="table.news.and" id="vo">
|
|
|
<td style="background:#FFF;">{$vo}</td>
|
|
|
</volist>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</th>
|
|
|
</tr>
|
|
|
<tr class="data-last" style="">
|
|
|
<td class="tc1"><i class="circle"></i></td>
|
|
|
<td class="tc2">iOS设备</td>
|
|
|
</tr>
|
|
|
<tr class="data-last" style="<eq name='foldline.hours' value='0'><gt name='count' value='14'><eq name='Think.get.num' value='7'><else />height:52px;</eq><else /></gt><else /></eq>">
|
|
|
<td class="tc1"><i class="circle"></i></td>
|
|
|
<td class="tc2">Android设备</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td class="tc1">汇总</td>
|
|
|
<td colspan="2"><strong class="txt_blue">{$table.sum.news|default=0}</strong></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="htchart_area_tab <eq name='Think.get.tb' value='1'>show</eq>">
|
|
|
<div class="highchart_area_notice"><span>合计(去重) {$table.duplicate.active|default=0}</span><span>日均 {$table.average.active|default=0}</span></div>
|
|
|
<div class="highchart_area">
|
|
|
<div class="highchart_area_tab" id="container2" style="width:100%;height:220px;"></div>
|
|
|
</div>
|
|
|
<div class="new_users">
|
|
|
<table class="new_users_tb">
|
|
|
<tr>
|
|
|
<th class="tc1">显示</th>
|
|
|
<th class="tc2">指标</th>
|
|
|
<th class="tc3" rowspan="3">
|
|
|
<div class="data-box">
|
|
|
<div class="data-wrap" style="width:<eq name='foldline.hours' value='0'><gt name='count' value='14'><eq name='Think.get.num' value='7'>100%<else />{$count*100+100}px</eq><else />100%</gt><else />{13*96}px</eq>">
|
|
|
<table>
|
|
|
<tr>
|
|
|
<eq name="foldline.hours" value="0">
|
|
|
<volist name="table.date" id="vo">
|
|
|
<th>{$vo}</th>
|
|
|
</volist>
|
|
|
<else />
|
|
|
<th>0:00</th>
|
|
|
<th>2:00</th>
|
|
|
<th>4:00</th>
|
|
|
<th>6:00</th>
|
|
|
<th>8:00</th>
|
|
|
<th>10:00</th>
|
|
|
<th>12:00</th>
|
|
|
<th>14:00</th>
|
|
|
<th>16:00</th>
|
|
|
<th>18:00</th>
|
|
|
<th>20:00</th>
|
|
|
<th>22:00</th>
|
|
|
</eq>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<volist name="table.active.ios" id="vo">
|
|
|
<td style="background:#FFF;">{$vo}</td>
|
|
|
</volist>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<volist name="table.active.and" id="vo">
|
|
|
<td style="background:#FFF;">{$vo}</td>
|
|
|
</volist>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</th>
|
|
|
</tr>
|
|
|
<tr class="data-last" style="">
|
|
|
<td class="tc1"><i class="circle"></i></td>
|
|
|
<td class="tc2">iOS设备</td>
|
|
|
</tr>
|
|
|
<tr class="data-last" style="<eq name='foldline.hours' value='0'><gt name='count' value='14'><eq name='Think.get.num' value='7'><else />height:52px;</eq><else /></gt><else /></eq>">
|
|
|
<td class="tc1"><i class="circle"></i></td>
|
|
|
<td class="tc2">Android设备</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td class="tc1">汇总</td>
|
|
|
<td colspan="2"><strong class="txt_blue">{$table.sum.active|default=0}</strong></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="htchart_area_tab <eq name='Think.get.tb' value='2'>show</eq>">
|
|
|
<div class="highchart_area_notice">
|
|
|
<a href="javascript:;" data-key="modelios" class=" jsmodelchange <empty name='Think.get.ml'>mcurr<else /><eq name='Think.get.ml' value='0'>mcurr</eq></empty>">iOS设备</a>
|
|
|
<a href="javascript:;" data-key="modeland" class=" jsmodelchange <eq name='Think.get.ml' value='1'>mcurr</eq>">Android设备</a>
|
|
|
</div>
|
|
|
<div class="highchart_area_subtab jsmodeltab <empty name='Think.get.ml'>show<else /><eq name='Think.get.ml' value='0'>show</eq></empty>">
|
|
|
<?php $xmodelioscount = count($table['xmodel']['ios']);?>
|
|
|
<div class="highchart_area">
|
|
|
<div class="highchart_area_tab" id="container3" style="width:100%;height:220px;"></div>
|
|
|
</div>
|
|
|
<div class="new_users">
|
|
|
<table class="new_users_tb">
|
|
|
<tr>
|
|
|
<th class="tc1">显示</th>
|
|
|
<th class="tc2">指标</th>
|
|
|
<th class="tc3" rowspan="2">
|
|
|
<div class="data-box">
|
|
|
<div class="data-wrap" style="width:<gt name='xmodelioscount' value='14'><eq name='Think.get.num' value='7'>100%<else />{$xmodelioscount*100+100}px</eq><else />100%</gt>">
|
|
|
<table>
|
|
|
<tr>
|
|
|
|
|
|
<volist name="table.xmodel.ios" id="vo">
|
|
|
<th>{:str_replace("'",'',$vo)}</th>
|
|
|
</volist>
|
|
|
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<volist name="table.model.ios" id="vo">
|
|
|
<td style="background:#FFF;">{$vo}</td>
|
|
|
</volist>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</th>
|
|
|
</tr>
|
|
|
<tr class="data-last" style="<gt name='xmodelioscount' value='14'><eq name='Think.get.num' value='7'><else />height:52px;</eq><else /></gt>">
|
|
|
<td class="tc1"><i class="circle"></i></td>
|
|
|
<td class="tc2">iOS机型</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="highchart_area_subtab jsmodeltab <eq name='Think.get.ml' value='1'>show</eq>">
|
|
|
<?php $xmodelandcount = count($table['xmodel']['and']);?>
|
|
|
<div class="highchart_area">
|
|
|
<div class="highchart_area_tab" id="container4" style="width:100%;height:220px;"></div>
|
|
|
</div>
|
|
|
<div class="new_users">
|
|
|
<table class="new_users_tb">
|
|
|
<tr>
|
|
|
<th class="tc1">显示</th>
|
|
|
<th class="tc2">指标</th>
|
|
|
<th class="tc3" rowspan="2">
|
|
|
<div class="data-box">
|
|
|
<div class="data-wrap" style="width:<gt name='xmodelandcount' value='10'><eq name='Think.get.num' value='7'>100%<else />{$xmodelandcount*100+100}px</eq><else />100%</gt>">
|
|
|
<table>
|
|
|
<tr>
|
|
|
|
|
|
<volist name="table.xmodel.and" id="vo">
|
|
|
<th>{:str_replace("'",'',$vo)}</th>
|
|
|
</volist>
|
|
|
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<volist name="table.model.and" id="vo">
|
|
|
<td style="background:#FFF;">{$vo}</td>
|
|
|
</volist>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</th>
|
|
|
</tr>
|
|
|
<tr class="data-last" style="<gt name='xmodelandcount' value='10'><eq name='Think.get.num' value='7'><else />height:52px;</eq><else /></gt>">
|
|
|
<td class="tc1"><i class="circle"></i></td>
|
|
|
<td class="tc2">Android机型</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
<!--end heightChart!-->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="export_box"><a class="jsexport" url="{:U('Export/device_survey',array(
|
|
|
'start'=>I('start',date('Y-m-d',strtotime('-1 day'))),
|
|
|
'end'=>I('end',date('Y-m-d',strtotime('-1 day'))),
|
|
|
'num'=>I('num'),'hours'=>$foldline['hours'],'xlsname'=>'数据分析_应用概况'
|
|
|
),false)}"><i></i><span>导出</span></a></div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</block>
|
|
|
|
|
|
<block name="script">
|
|
|
<link href="__STATIC__/datetimepicker/css/datetimepicker.css" rel="stylesheet" type="text/css">
|
|
|
<php>if(C('COLOR_STYLE')=='blue_color') echo '
|
|
|
<link href="__STATIC__/datetimepicker/css/datetimepicker_blue.css" rel="stylesheet" type="text/css">';</php>
|
|
|
<link href="__STATIC__/datetimepicker/css/dropdown.css" rel="stylesheet" type="text/css">
|
|
|
<script type="text/javascript" src="__STATIC__/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
|
|
|
<script type="text/javascript" src="__STATIC__/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
|
|
|
<script src="__JS__/zwmjs/highcharts.js"></script>
|
|
|
<script>
|
|
|
var datelist;
|
|
|
|
|
|
function gettotal(types,ids) {
|
|
|
$(ids).text("加载中...");
|
|
|
$(ids).css('color','#FBA10D');
|
|
|
$.ajax({
|
|
|
type:'post',
|
|
|
dataType:'json',
|
|
|
url:'{:U("stat/getDevice")}',
|
|
|
data:{type:types},
|
|
|
success:function(data) {
|
|
|
|
|
|
$(ids).text(data)
|
|
|
},error:function() {
|
|
|
$(ids).text("加载失败");
|
|
|
$(ids).css('color','red');
|
|
|
layer.msg('服务器错误，请稍候再试');that.removeClass('disabled');
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
$(function() {
|
|
|
|
|
|
gettotal(0,'#total');
|
|
|
gettotal(1,'#today');
|
|
|
gettotal(2,'#yesterday');
|
|
|
gettotal(3,'#day7');
|
|
|
gettotal(4,'#day30');
|
|
|
gettotal(5,'#duration7');
|
|
|
|
|
|
|
|
|
|
|
|
$('.data-box').each(function() {
|
|
|
var that = $(this);
|
|
|
if (that.width()>that.find('.data-wrap').width()) {
|
|
|
that.find('.data-wrap').css({'width':'100%'});
|
|
|
that.closest('tr').siblings('tr.data-last').css({'height':'38px'});
|
|
|
}
|
|
|
});
|
|
|
change_export_postion();
|
|
|
//点击时间显示日历 begin
|
|
|
$(".js-pt-calendar").click(function(){
|
|
|
$(".js-show-calendar").toggle();
|
|
|
})
|
|
|
//end 点击时间显示日历
|
|
|
|
|
|
//点击确定关闭日历 begin
|
|
|
$(".js_determine").click(function(){
|
|
|
$(".js-show-calendar").hide();
|
|
|
});
|
|
|
//end 点击确定关闭日历
|
|
|
|
|
|
$('.jsexport').on('click',function() {
|
|
|
var that=$(this),url = $.trim(that.attr('url')).replace(/((\.htm(l?))?)$/g,'');
|
|
|
|
|
|
var but = $('.tab_head a.current');
|
|
|
url += '/name/'+$.trim(but.text())+'/key/'+but.attr('data-key');
|
|
|
window.location.href = url;
|
|
|
});
|
|
|
|
|
|
if({$foldline.hours|default=1}==1) {
|
|
|
Highcharts.setOptions({
|
|
|
chart:{type:'spline',spacingLeft:0,spacingTop:40},
|
|
|
title:{text: null},legend:{align:'right',verticalAlign:'top',floating:true,x:0,y:-38,itemStyle:{'lineHeight':'32px'}},yAxis:{title:{text:null}},
|
|
|
tooltip:{backgroundColor: '#fff',borderColor:'white',borderRadius:10,borderWidth:1,shadow:true,animation:true,style:{color: "#999",fontSize: "12px",fontWeight: "blod",fontFamily: "Microsoft Yahei"},shared: true,useHTML: true,valueDecimals:2,
|
|
|
formatter:function(){
|
|
|
var s = '<table>';
|
|
|
$.each(this.points,function() {
|
|
|
s += '<tr><td style="color:#1bb2eb;"><span style="padding-right:2px;">'+this.series.name+':</span><span>'+this.y+'</span></td></tr>';
|
|
|
});
|
|
|
s += '</table><small>';
|
|
|
s += $('.jsctitle1').text()+'/';s += this.x+'~'+(parseInt(this.x)+1)+':00';s += '</small>';
|
|
|
return s;
|
|
|
},
|
|
|
},
|
|
|
credits:{enabled: false},
|
|
|
xAxis:{tickInterval:2,categories:['0:00','1:00','2:00','3:00','4:00','5:00','6:00','7:00','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'],tickmarkPlacement:'on'},
|
|
|
});
|
|
|
datelist = [{$foldline.date}];
|
|
|
} else {
|
|
|
var tooltip = '';
|
|
|
Highcharts.setOptions({
|
|
|
chart:{type:'spline',spacingLeft:0,spacingTop:40},
|
|
|
title:{text: null},legend:{align:'right',verticalAlign:'top',floating:true,x:0,y:-38,itemStyle:{'lineHeight':'32px'}},yAxis:{title:{text:null}},
|
|
|
tooltip:{backgroundColor: '#fff',borderColor:'white',borderRadius:10,borderWidth:1,shadow:true,animation:true,style:{color: "#999",fontSize: "12px",fontWeight: "blod",fontFamily: "Microsoft Yahei"},shared: true,useHTML: true,
|
|
|
headerFormat:'<table>',
|
|
|
pointFormat:'<tr><td style="color:#1bb2eb;"><span style="padding-right:2px;">{series.name}:</span><span>{point.y}</span></td></tr>',
|
|
|
footerFormat:'</table><small>{point.key}</small>',
|
|
|
},
|
|
|
credits:{enabled: false},
|
|
|
xAxis:{categories:[{$foldline.date}],tickmarkPlacement:'on'},
|
|
|
});
|
|
|
|
|
|
datelist = [{$foldline.date}];
|
|
|
}
|
|
|
|
|
|
selectrange(datelist);
|
|
|
|
|
|
$('#container1').highcharts({legend:{labelFormat:'{name}设备'},
|
|
|
series:[{name:'iOS',data:[{$foldline.news.ios}]},{name:'Android',data:[{$foldline.news.and}]}]
|
|
|
});
|
|
|
|
|
|
$('#container2').highcharts({legend:{labelFormat:'{name}设备'},
|
|
|
series:[{name:'iOS',data:[{$foldline.active.ios}]},{name:'Android',data:[{$foldline.active.and}]}]
|
|
|
});
|
|
|
|
|
|
$('#container3').highcharts({
|
|
|
legend:{enabled:false},chart:{type:'column'},
|
|
|
plotOptions:{column:{fillOpacity:0.5,borderWidth:0,pointWidth:20,}},
|
|
|
tooltip:{valueDecimals:0,formatter:'',headerFormat:'<table>',pointFormat:'<tr><td style="color:#1bb2eb;">{point.y}</td></tr>',footerFormat:'</table><small>{point.key}</small>',},
|
|
|
xAxis:{tickInterval:1,categories:[{$foldline.xmodel.ios}]},
|
|
|
series:[{data:[{$foldline.model.ios}]}]
|
|
|
|
|
|
});
|
|
|
|
|
|
$('#container4').highcharts({
|
|
|
legend:{enabled:false},chart:{type:'column'},
|
|
|
plotOptions:{column:{fillOpacity:0.5,borderWidth:0,pointWidth:20,}},
|
|
|
tooltip:{valueDecimals:0,formatter:'',headerFormat:'<table>',pointFormat:'<tr><td style="color:#1bb2eb;">{point.y}</td></tr>',footerFormat:'</table><small>{point.key}</small>',},
|
|
|
xAxis:{tickInterval:1,categories:[{$foldline.xmodel.and}]},
|
|
|
series:[{data:[{$foldline.model.and}]}]
|
|
|
|
|
|
});
|
|
|
|
|
|
//新增用户和付费用户数据图表切换
|
|
|
$('.tab_head a').click(function() {
|
|
|
var that=$(this),sib = that.closest('.tab_head').siblings('.tab_content');
|
|
|
that.siblings().removeClass('current');
|
|
|
var index= that.addClass('current').index();
|
|
|
|
|
|
sib.find('.htchart_area_tab').removeClass('show').eq(index).addClass('show');
|
|
|
$('.ranges li a').each(function() {
|
|
|
var url = $.trim($(this).attr('href')).replace(/((\.htm(l?))?)$/g,'').replace(/\/tb\/[012]/g,'');
|
|
|
|
|
|
$(this).attr('href',url+'/tb/'+index+'.html');
|
|
|
});
|
|
|
$('.each_box .nav li a').each(function() {
|
|
|
var url = $.trim($(this).attr('href')).replace(/((\.htm(l?))?)$/g,'').replace(/\/tb\/[012]/g,'');
|
|
|
|
|
|
$(this).attr('href',url+'/tb/'+index+'.html');
|
|
|
});
|
|
|
|
|
|
change_export_postion();
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
$('.jsmodelchange').on('click',function() {
|
|
|
var that = $(this);
|
|
|
var index = that.addClass('mcurr').index();
|
|
|
that.siblings().removeClass('mcurr');
|
|
|
$('.jsmodeltab').removeClass('show').eq(index).addClass('show');
|
|
|
|
|
|
return false;
|
|
|
});
|
|
|
|
|
|
$('.jsranges li').on('click',function() {
|
|
|
var that = $(this),range = $.trim(that.attr('data-range-key')).split(',');
|
|
|
if (that.hasClass('datapick_active')) {return false;}
|
|
|
that.addClass('datapick_active').siblings('li').removeClass('datapick_active');
|
|
|
parent = that.closest('.jsctitle');
|
|
|
|
|
|
chartdata(range[0],range[1],parent);
|
|
|
|
|
|
$(".js-show-calendar").toggle();
|
|
|
|
|
|
return false;
|
|
|
});
|
|
|
|
|
|
$('.jspn').on('click',function() {
|
|
|
|
|
|
jspn($(this));
|
|
|
|
|
|
return false;
|
|
|
});
|
|
|
|
|
|
$('.js_determine').on('click',function() {
|
|
|
var that = $(this),parent = that.closest('.jsctitle');
|
|
|
if (parent.find('.in-range').length>0) {
|
|
|
var first = parent.find('.jscalendarcontent .in-range.first').attr('data-key');
|
|
|
var last = parent.find('.jscalendarcontent .in-range.last').attr('data-key');
|
|
|
|
|
|
chartdata(first,last,parent);
|
|
|
|
|
|
} else {
|
|
|
layer.msg('请选择时间范围');
|
|
|
}
|
|
|
return false;
|
|
|
});
|
|
|
|
|
|
jsselect();
|
|
|
|
|
|
});
|
|
|
|
|
|
function selectrange(range) {
|
|
|
if (range) {
|
|
|
$.each(range,function(i,n) {
|
|
|
if (i == 0) {$('.available[data-key="'+n+'"]').addClass('in-range first');}
|
|
|
else if (i == range.length-1) {$('.available[data-key="'+n+'"]').addClass('in-range last');}
|
|
|
else {$('.available[data-key="'+n+'"]').addClass('in-range');}
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function chartdata(start,end,parent) {
|
|
|
|
|
|
var href = '{:U("device_survey",array("type"=>I("type"),"category"=>I("category")))}';
|
|
|
end = end?end:start;
|
|
|
var tb = $.trim($('.tab_head a.current').attr('href')).replace('#','');
|
|
|
|
|
|
|
|
|
window.location.href = href.replace('.html','')+'/start/'+start+'/end/'+end+'/tb/'+tb+'.html';
|
|
|
|
|
|
}
|
|
|
|
|
|
function getdatelist(start,end) {
|
|
|
var i = start,j=0;
|
|
|
var range=[];
|
|
|
while(i<=end) {
|
|
|
var date = new Date(i);
|
|
|
range[j++] = date.getFullYear()+'-'+supplement_zero(date.getMonth()+1)+'-'+supplement_zero(date.getDate());
|
|
|
i+=86400000;
|
|
|
}
|
|
|
return range;
|
|
|
}
|
|
|
|
|
|
function supplement_zero(num) {
|
|
|
return num.toString().length==1?'0'+num:num;
|
|
|
}
|
|
|
|
|
|
function jsselect() {
|
|
|
$('.jsselect').on('click',function(){
|
|
|
var that = $(this),sib = $('.jsselect.active');
|
|
|
if (sib.length<1) {
|
|
|
$('.jsselect').removeClass('in-range first last');
|
|
|
that.addClass('active first');
|
|
|
} else if (sib.length==1) {
|
|
|
that.addClass('active last');
|
|
|
|
|
|
if($('.jsselect.last').length>1) {
|
|
|
$('.jsselect.last').removeClass('last');
|
|
|
}
|
|
|
|
|
|
that.addClass('active last');
|
|
|
|
|
|
var val = (new Date($.trim(that.attr('data-key')).replace(/-/g,'/'))).getTime();
|
|
|
var sibval = (new Date($.trim(sib.attr('data-key')).replace(/-/g,'/'))).getTime();
|
|
|
|
|
|
if (val<sibval) {
|
|
|
that.removeClass('last').addClass('first');
|
|
|
sib.removeClass('first').addClass('last');
|
|
|
var temp = val;val = sibval;sibval=temp;
|
|
|
}
|
|
|
var dl = getdatelist(sibval,val);
|
|
|
|
|
|
$.each(dl,function(i,n) {
|
|
|
$('.jsselect[data-key="'+n+'"]').addClass('in-range');
|
|
|
});
|
|
|
|
|
|
} else {
|
|
|
$('.jsselect').removeClass('in-range active first last');
|
|
|
that.addClass('active first');
|
|
|
}
|
|
|
|
|
|
return false;
|
|
|
});
|
|
|
}
|
|
|
|
|
|
|
|
|
function jspn(that) {
|
|
|
|
|
|
var range = $.trim(that.attr('data-range-key')).split(',');
|
|
|
if (that.hasClass('disabled')) {return false;}
|
|
|
that.addClass('disabled');
|
|
|
$.ajax({
|
|
|
type:'post',
|
|
|
dataType:'json',
|
|
|
url:'{:U("Index/calendar")}',
|
|
|
data:{start:range[0],end:range[1],flag:true},
|
|
|
success:function(data) {
|
|
|
var first = $('.jscalendar1');
|
|
|
var last = $('.jscalendar2');
|
|
|
|
|
|
var dfirst = data.first;
|
|
|
var dlast = data.last;
|
|
|
|
|
|
first.find('.month').text(data.ftitle).siblings('.prev').attr('data-range-key',data.prev);
|
|
|
var next = last.find('.month').text(data.ltitle).siblings('.next').attr('data-range-key',data.next);
|
|
|
if (parseInt(data.iscurrent)==1){next.addClass('available jspn');} else {next.removeClass('available jspn');}
|
|
|
var ftemp = '';var ltemp = '';
|
|
|
$.each(dfirst,function(i,n) {
|
|
|
ftemp += '<tr>';
|
|
|
$.each(n,function(j,m) {
|
|
|
var classname = '';
|
|
|
if (m.full == data.today) {classname += ' today ';}
|
|
|
if (m.no == 1) {classname += ' noselect ';}
|
|
|
if (j == 6 || j == 7) {classname += ' weekend ';}
|
|
|
ftemp += '<td class="available jsselect '+classname+' " data-key="'+m.full+'" ><span>';
|
|
|
if (m.value) {ftemp += m.value;}
|
|
|
else {ftemp += ' ';}
|
|
|
ftemp += '</span></td> ';
|
|
|
});
|
|
|
ftemp += '</tr>';
|
|
|
|
|
|
});
|
|
|
|
|
|
first.find('.jscalendarcontent').html('').html(ftemp);
|
|
|
|
|
|
$.each(dlast,function(i,n) {
|
|
|
ltemp += '<tr>';
|
|
|
$.each(n,function(j,m) {
|
|
|
var classname = '';
|
|
|
if (m.full == data.today) {classname += ' today ';}
|
|
|
if (m.no == 1) {classname += ' noselect ';} else {classname += ' jsselect ';}
|
|
|
if (j == 6 || j == 7) {classname += ' weekend ';}
|
|
|
ltemp += '<td class="available '+classname+' " data-key="'+m.full+'" ><span>';
|
|
|
if (m.value) {ltemp += m.value;}
|
|
|
else {ltemp += ' ';}
|
|
|
ltemp += '</span></td> ';
|
|
|
});
|
|
|
ltemp += '</tr>';
|
|
|
|
|
|
});
|
|
|
|
|
|
last.find('.jscalendarcontent').html('').html(ltemp);
|
|
|
|
|
|
that.removeClass('disabled');
|
|
|
|
|
|
$('.jspn').on('click',function() {jspn($(this)); return false;});
|
|
|
selectrange(datelist);
|
|
|
jsselect();
|
|
|
},error:function() {
|
|
|
layer.msg('服务器错误，请稍候再试');that.removeClass('disabled');
|
|
|
}
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
function change_export_postion() {
|
|
|
$('.tab_head a').each(function(i,n) {
|
|
|
var that = $(n);
|
|
|
if(that.hasClass('current')) {
|
|
|
if(that.attr('data-key') == 'model') {
|
|
|
$('.export_box').css('bottom','80px');
|
|
|
} else {
|
|
|
$('.export_box').css('bottom','10px');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
</script>
|
|
|
<script type="text/javascript">
|
|
|
//导航高亮
|
|
|
highlight_subnav("{:U('Stat/device_survey')}");
|
|
|
$("#main").removeClass('main');
|
|
|
$("#main").addClass('openegretmain');
|
|
|
|
|
|
/*列表和统计图切换*/
|
|
|
$('.tab_btn span').click(function() {
|
|
|
var that = $(this),flag = $.trim(that.attr('data-flag')).split('_');
|
|
|
var sib = that.closest('.tab_btn').siblings('.tab_con');
|
|
|
that.siblings().removeClass('current');
|
|
|
var index = that.addClass('current').index();
|
|
|
sib.find('.content_part').hide().eq(index).show();
|
|
|
var reg = '/'+flag[0]+'/'+(1-flag[1]);
|
|
|
$('.ranges li a').each(function() {
|
|
|
var url = $.trim($(this).attr('href')).replace(/((\.htm(l?))?)$/g,'').replace(reg,'');
|
|
|
|
|
|
$(this).attr('href',url+'/'+flag[0]+'/'+flag[1]+'.html');
|
|
|
});
|
|
|
$('.each_box .nav li a').each(function() {
|
|
|
var href = $.trim($(this).attr('href')).split('#');
|
|
|
var url = href[0].replace(/((\.htm(l?))?)$/g,'').replace(reg,'');
|
|
|
var hash = '';
|
|
|
if (href[1]) {hash = '#'+href[1];}
|
|
|
$(this).attr('href',url+'/'+flag[0]+'/'+flag[1]+'.html'+hash);
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
var myChartLine = "";
|
|
|
|
|
|
//heightChart! begin
|
|
|
$(function () {
|
|
|
chartLine();
|
|
|
|
|
|
//柱子颜色渐变
|
|
|
var colors = ['#3FDBF2', '#F79FC9','#F8D488'];
|
|
|
Highcharts.getOptions().colors = Highcharts.map(colors, function (color) {
|
|
|
return {
|
|
|
radialGradient: {cx: 0, cy: 1.3, r: 2.3},
|
|
|
stops: [[0, color], [2, Highcharts.Color(color).brighten(14).get('rgb')] // darken
|
|
|
]
|
|
|
};
|
|
|
});
|
|
|
|
|
|
/*柱状图1*/
|
|
|
$('#device_surveyChart1').highcharts({
|
|
|
chart: {
|
|
|
type: 'column'
|
|
|
},
|
|
|
title: {
|
|
|
text: null
|
|
|
},
|
|
|
xAxis: {
|
|
|
categories: [{$game_chart.game}],
|
|
|
crosshair: true,
|
|
|
tickInterval:1
|
|
|
},
|
|
|
yAxis: {
|
|
|
min: 0,
|
|
|
title: {
|
|
|
text: null
|
|
|
}
|
|
|
},
|
|
|
tooltip: {
|
|
|
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
|
|
|
pointFormat:'',
|
|
|
footerFormat:'</table>',
|
|
|
pointFormatter:function(){
|
|
|
var s = '';
|
|
|
s += '<tr><td style="color:'+this.series.color+';padding:0">'+this.series.name+': </td>' +
|
|
|
'<td style="padding:0"><b>'+this.y+'</b></td></tr>';
|
|
|
return s;
|
|
|
},
|
|
|
shared: true,
|
|
|
useHTML: true
|
|
|
},
|
|
|
credits: {
|
|
|
enabled: false
|
|
|
},
|
|
|
legend: {
|
|
|
align: 'center',
|
|
|
verticalAlign: 'top',
|
|
|
enabled:true,
|
|
|
y: -30,
|
|
|
symbolRadius: 0,
|
|
|
itemStyle: {
|
|
|
color: '#A2B8C5',
|
|
|
fontWeight: 'bold'
|
|
|
}
|
|
|
},
|
|
|
plotOptions: {
|
|
|
column: {
|
|
|
borderWidth: 0,
|
|
|
pointWidth: 20, //柱子宽度
|
|
|
}
|
|
|
},
|
|
|
series: [{
|
|
|
name: '注册用户（人）',
|
|
|
//color: '#3FDBF2',
|
|
|
data: [{$game_chart.reg}]
|
|
|
}, {
|
|
|
name: '活跃用户（人）',
|
|
|
// color: '#F79FC9',
|
|
|
data: [{$game_chart.active}]
|
|
|
}, {
|
|
|
name: '充值金额（元）',
|
|
|
// color: '#F8D488',
|
|
|
data: [{$game_chart.pay}]
|
|
|
}]
|
|
|
});
|
|
|
});
|
|
|
|
|
|
|
|
|
//heightChart! begin
|
|
|
$(function () {
|
|
|
chartLine();
|
|
|
|
|
|
//柱子颜色渐变
|
|
|
var colors = ['#3FDBF2', '#F79FC9','#F8D488'];
|
|
|
Highcharts.getOptions().colors = Highcharts.map(colors, function (color) {
|
|
|
return {
|
|
|
radialGradient: {cx: 0, cy: 1.3, r: 2.3},
|
|
|
stops: [[0, color], [2, Highcharts.Color(color).brighten(14).get('rgb')] // darken
|
|
|
]
|
|
|
};
|
|
|
});
|
|
|
|
|
|
/*柱状图2*/
|
|
|
$('#device_surveyChart2').highcharts({
|
|
|
chart: {
|
|
|
type: 'column'
|
|
|
},
|
|
|
title: {
|
|
|
text: null
|
|
|
},
|
|
|
xAxis: {
|
|
|
categories: [{$promote_chart.promote}],
|
|
|
crosshair: true,
|
|
|
tickInterval:1
|
|
|
},
|
|
|
yAxis: {
|
|
|
min: 0,
|
|
|
title: {
|
|
|
text: null
|
|
|
}
|
|
|
},
|
|
|
tooltip: {
|
|
|
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
|
|
|
pointFormat:'',
|
|
|
footerFormat:'</table>',
|
|
|
pointFormatter:function(){
|
|
|
var s = '';
|
|
|
s += '<tr><td style="color:'+this.series.color+';padding:0">'+this.series.name+': </td>' +
|
|
|
'<td style="padding:0"><b>'+this.y+'</b></td></tr>';
|
|
|
return s;
|
|
|
},
|
|
|
shared: true,
|
|
|
useHTML: true
|
|
|
},
|
|
|
credits: {
|
|
|
enabled:false
|
|
|
},
|
|
|
legend: {
|
|
|
align: 'center',
|
|
|
verticalAlign: 'top',
|
|
|
enabled:true,
|
|
|
y: -30,
|
|
|
symbolRadius: 0,
|
|
|
itemStyle: {
|
|
|
color: '#A2B8C5',
|
|
|
fontWeight: 'bold'
|
|
|
}
|
|
|
},
|
|
|
plotOptions: {
|
|
|
column: {
|
|
|
borderWidth:0,
|
|
|
pointWidth:20, //柱子宽度
|
|
|
}
|
|
|
},
|
|
|
series: [{
|
|
|
name: '注册用户（人）',
|
|
|
//color: '#3FDBF2',
|
|
|
data: [{$promote_chart.reg}]
|
|
|
},{
|
|
|
name: '活跃用户（人）',
|
|
|
//color: '#F79FC9',
|
|
|
data: [{$promote_chart.active}]
|
|
|
},{
|
|
|
name: '充值金额（元）',
|
|
|
//color: '#F8D488',
|
|
|
data: [{$promote_chart.pay}]
|
|
|
}]
|
|
|
});
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
function chartLine(){
|
|
|
myChartLine = {
|
|
|
chart: {
|
|
|
renderTo: 'container',
|
|
|
type: 'areaspline'
|
|
|
},
|
|
|
title: {
|
|
|
text: null
|
|
|
},
|
|
|
legend: {
|
|
|
layout: 'vertical',
|
|
|
align: 'left',
|
|
|
verticalAlign: 'top',
|
|
|
x: 150,
|
|
|
y: 100,
|
|
|
floating: true,
|
|
|
borderWidth: 1,
|
|
|
symbolRadius: 0,
|
|
|
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
|
|
|
},
|
|
|
xAxis: {
|
|
|
categories: ['1月','2月','3月','5月','6月']
|
|
|
},
|
|
|
yAxis: {
|
|
|
title: {
|
|
|
text: null
|
|
|
}
|
|
|
},
|
|
|
tooltip: {
|
|
|
backgroundColor: '#fff', // 背景颜色
|
|
|
borderColor: 'white', // 边框颜色
|
|
|
borderRadius: 10, // 边框圆角
|
|
|
borderWidth: 1, // 边框宽度
|
|
|
shadow: true, // 是否显示阴影
|
|
|
animation: true, // 是否启用动画效果
|
|
|
style: { // 文字内容相关样式
|
|
|
color: "#999",
|
|
|
fontSize: "12px",
|
|
|
fontWeight: "blod",
|
|
|
fontFamily: "Microsoft Yahei"
|
|
|
},
|
|
|
shared: true,
|
|
|
useHTML: true,
|
|
|
headerFormat: '<small style="color:#1bb2eb;margin-left:18px;">{point.y}</small><br/><small>{point.key}-{point.key}</small><table>',
|
|
|
pointFormat: '',
|
|
|
footerFormat: '</table>',
|
|
|
valueDecimals: 2
|
|
|
},
|
|
|
credits: {
|
|
|
enabled: false
|
|
|
},
|
|
|
plotOptions: {
|
|
|
areaspline: {
|
|
|
fillOpacity: 0.5
|
|
|
}
|
|
|
},
|
|
|
series: [{
|
|
|
data: []
|
|
|
}]
|
|
|
};
|
|
|
//new Highcharts.Chart(myChartLine)
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
|
|
|
<!-- ECharts单文件引入 -->
|
|
|
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
|
|
|
<script type="text/javascript">
|
|
|
$('.jsnav li a').on('click', function() {
|
|
|
var that = $(this),
|
|
|
url = $.trim(that.attr('href')),
|
|
|
li = that.closest('li'),
|
|
|
sib = that.closest('.jsnav').siblings('.mchart');
|
|
|
li.addClass('active').siblings('li').removeClass('active');
|
|
|
sib.html('');
|
|
|
var html = '<iframe src="' + url + '" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" height="100%" ></iframe>';
|
|
|
sib.html(html);
|
|
|
return false;
|
|
|
});
|
|
|
</script>
|
|
|
</block> |