qy-platform/Application/Admin/View/Statistics/data_profile.html

<extend name="Public/base"/>
<block name="css">
<link rel="stylesheet" href="__CSS__/open-egret.css">
</block>
<block name="body">
<script src="__JS__/common.js"></script>
        
        
        <div class="cf main-place top_nav_list navtab_list">
            <h3 class="page_title">数据概况</h3>
            <p class="description_text">说明：快速查看1天，7天，30天，1年的全站注册人数和充值金额（此处充值金额只包含游戏充值，不包含账户未消费的平台币）</p>
        </div>
        
        
        
        <div class="col-md-10 f-pl-10 main_content_dataoverview">
        <div class="m-box m-chart " style="height: 700px;">
            <ul class="nav nav-pills jsnav" role="tablist">
                <li role="presentation" <if condition="$Think.get.key eq 1 or $Think.get.key eq ''"> class="active"</if>><a href="{:U('Statistics/data_profile',array('key'=>1))}" aria-controls="dayRank" role="tab" data-toggle="tab">1天</a></li>
                <li role="presentation" <if condition="$Think.get.key eq 2"> class="active"</if>><a href="{:U('Statistics/data_profile',array('key'=>2))}" aria-controls="weekRank" role="tab" data-toggle="tab">7天</a></li>
                <li role="presentation" <if condition="$Think.get.key eq 3"> class="active"</if>><a href="{:U('Statistics/data_profile',array('key'=>3))}" aria-controls="monthRank" role="tab" data-toggle="tab">30天</a></li>
                <li role="presentation" <if condition="$Think.get.key eq 4"> class="active"</if>><a href="{:U('Statistics/data_profile',array('key'=>4))}" aria-controls="monthRank" role="tab" data-toggle="tab">1年</a></li>
            </ul> 

            <div class="mchart" style="height: 650px;">
                <div id="maindata_profile" style="height:600px"></div>
            </div>

        </div>

        </div>
				
				<script src="__JS__/zwmjs/highcharts.js"></script> 
				<script>
					$(function() {
						
						Highcharts.setOptions({
						colors: ['#7cb5ec', '#FF9655'],
							chart:{type:'areaspline',spacingLeft:0,},
							title:{text: null},legend:{align: 'center',verticalAlign: 'top',enabled:true,},yAxis:{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="padding:0">'+this.series.name+': </td>' +
									'<td style="padding:0"><b>'+this.y+'</b></td></tr>';
							return s;
						},
				    shared: true,
				    useHTML: true,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
							},
							credits:{enabled: false},
							plotOptions:{
								areaspline:{fillOpacity:0.5}
							},
							xAxis:{categories:[{$data.date}],tickmarkPlacement:'on'},
						});
						
						$('#maindata_profile').highcharts({
							series:[
								{
										name:'注册人数（人）',
										data:[{$data.news}]
								},
								{
										name:'充值金额（元）',
										data:[{$data.money}]
								}
							]
						});						
					
					});
						
				</script>
				
       
     
<script>
//导航高亮
highlight_subnav('{:U('Statistics/data_profile')}');
</script>
</block>