@{
Layout = null;
}
@if ( false)
{
< script src= "~/Js/jquery-easyui-1.5/jquery.min.js" > < /script>
< script src= "~/Js/JqueryExt.js" > < /script>
< script src= "~/Js/jquery-easyui-1.5/jquery.easyui.min.js" > < /script>
< script src= "~/Js/Common.js" > < /script>
}
< ! DOCTYPE html>
< html>
< head>
< meta name= "viewport" content= "width=device-width" />
< title> 訪問統計< /title>
< link type= "text/css" rel= "stylesheet" href= "@Url.Content(" /css/default.css")" />
< ! --easyui-->
< link rel= "stylesheet" type= "text/css" href= "@Url.Content(" /JS/jquery-easyui-1.5/themes/default/easyui.css")" />
< link rel= "stylesheet" type= "text/css" href= "@Url.Content(" /JS/jquery-easyui-1.5/themes/default/tree.css")" />
< link rel= "stylesheet" type= "text/css" href= "@Url.Content(" /JS/jquery-easyui-1.5/themes/icon.css")" />
< script type= "text/javascript" src= "@Url.Content(" /JS/jquery-easyui-1.5/jquery.min.js")" > < /script>
< script type= "text/javascript" src= "@Url.Content(" /JS/jquery-easyui-1.5/jquery.easyui.min.js")" > < /script>
< link type= "text/css" rel= "stylesheet" href= "@Url.Content(" /css/jquery_dialog.css")" />
< script type= "text/javascript" src= "@Url.Content(" /JS/jquery_dialog.js")" > < /script>
< script type= "text/javascript" src= "@Url.Content(" /js/common.js")" > < /script>
< script type= "text/javascript" src= "@Url.Content(" /JS/JqueryExt.js")" > < /script>
< script src= "~/Js/jquery-easyui-1.5/locale/easyui-lang-zh_CN.js" > < /script>
< script src= "~/Js/chart/js/echarts.min.js" > < /script>
< script src= "~/Js/chart/js/china.js" > < /script>
< script type= "text/javascript" >
$( function ( ) {
ReloadData( ) ;
$( "#btnQuery" ) ( function ( ) {
var beginTime = $( "#txtBeginTime" ) ( "getValue" ) ;
var endTime = $( "#txtEndTime" ) ( "getValue" ) ;
if ( beginTime == "" || endTime == "" ) {
$.messager.alert( "提示" , "請選擇開始時間和結束時間後,再操作!" , "info" ) ;
return ;
}
var para = { "beginTime" : beginTime, "endTime" : endTime } ;
ReloadData( para) ;
} ) ;
function ReloadData( para) {
GetAjaxData1( para) ;
GetAjaxData2( para) ;
GetAjaxData3( para)
}
//區域餅圖
function GetAjaxData1( paras) {
$.ajax( {
type: "post" ,
url: "@Url.Action(" GetViewData", " Count")" ,
dataType: "json" , //返回數據形式爲json
data: paras,
success: function ( result) {
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init( document.getElementById( 'mainPie' )) ;
var option = {
title: {
text: '訪問省份比例圖' ,
//subtext: '實時更新' ,
x: 'center'
} ,
tooltip: {
trigger: 'item' ,
formatter: "{a} <br/>{b} : {c} ({d}%)"
} ,
series: [
{
name: '地區訪問統計' ,
type: 'pie' ,
radius: '55%' ,
center: [ '40%' , '50%' ] ,
data: result,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
} ,
itemStyle: {
normal: {
label: {
show: true,
//position:'inside' ,
formatter: '{b} : {c} ({d}%)'
}
} ,
labelLine: { show: true }
}
}
]
} ;
myChart.setOption( option) ;
} ,
error: function ( errorMsg) {
alert( "數據加載失敗，請稍後重試!" ) ;
}
} )
}
//全國地圖
function GetAjaxData2( paras) {
$.ajax( {
type: "post" ,
url: "@Url.Action(" GetViewData1", " Count")" ,
dataType: "json" , //返回數據形式爲json
data: paras,
success: function ( result) {
//顯示全國地圖
// 基於準備好的dom，初始化echarts實例
var myChartMap = echarts.init( document.getElementById( 'mainMap' )) ;
function randomData( ) {
return Math.round( Math.random( ) * 1000) ;
}
optionMap = {
title: {
text: '訪問地域分佈圖' ,
left: 'center'
} ,
tooltip: {
trigger: 'item'
} ,
visualMap: {
min: 0,
max: 2500,
left: 'left' ,
top: 'bottom' ,
text: [ '高' , '低' ] , // 文本，默認爲數值文本
calculable: true
} ,
toolbox: {
show: true,
orient: 'vertical' ,
left: 'right' ,
top: 'center'
//feature: {
// dataView: { readOnly: false } ,
// restore: { } ,
// saveAsImage: { }
//}
} ,
series: [
{
name: '瀏覽量' ,
type: 'map' ,
mapType: 'china' ,
label: {
normal: {
show: true
} ,
emphasis: {
show: true
}
} ,
data: result
}
]
} ;
// 使用剛指定的配置項和數據顯示圖表。
myChartMap.setOption( optionMap) ;
} ,
error: function ( errorMsg) {
alert( "數據加載失敗，請稍後重試!" ) ;
}
} ) ;
}
function GetAjaxData3( paras) {
//折線圖
$.ajax( {
type: "post" ,
url: "@Url.Action(" GetViewDataLine", " Count")" ,
data: paras,
dataType: "json" , //返回數據形式爲json
success: function ( result) {
// 基於準備好的dom，初始化echarts實例
var myChart1 = echarts.init( document.getElementById( 'mainLine' )) ;
// 指定圖表的配置項和數據
var option1 = {
title: {
text: '瀏覽量數據統計' ,
//subtext: '實時更新' ,
x: 'center'
} ,
tooltip: {
trigger: 'axis'
} ,
xAxis: {
name: "日期（日）" ,
data: result.x
} ,
yAxis: {
name: "瀏覽量（次）" ,
type: 'value'
} ,
series: {
name: '瀏覽量' ,
type: 'line' ,
data: result.y
}
} ;
// 使用剛指定的配置項和數據顯示圖表。
myChart1.setOption( option1) ;
} ,
error: function ( errorMsg) {
alert( "數據加載失敗，請稍後重試!" ) ;
}
} )
}
} ) ;
< /script>
< style type= "text/css" >
.divbanner {
width: 95%;
border-radius: 5px;
border: 1px solid
text-align: center;
clear: both;
margin: 5px;
font-family: 'Microsoft YaHei' ;
font-size: 16px;
font-weight: 200;
padding: 5px;
}
.spanbold {
font-size: 18px;
color:
font-weight: 600;
}
.divsum {
width: 95%;
border-radius: 5px;
background-color:
text-align: center;
clear: both;
margin: 5px;
font-family: 'Microsoft YaHei' ;
font-size: 18px;
font-weight: 600;
color:
padding: 5px;
}
< /style>
< /head>
< body>
< ! -- 爲ECharts準備一個具備大小（寬高）的Dom -->
< table border= "0" cellspacing= "0" class= "tableCss" cellpadding= "0" width= "100%" >
< tr>
< td class= "tdHead" style= "width: 120px" > 選擇時間:< /td>
< td align= "left" >
< input id= "txtBeginTime" class= "easyui-datebox" data-options= "prompt:'開始時間'" editable= "false" style= "width: 260px;" >
< input id= "txtEndTime" class= "easyui-datebox" data-options= "prompt:'結束時間'" editable= "false" style= "width: 260px;" >
< input id= "btnQuery" type= "button" value= "查 詢" class= "inputBtn2" />
< /td>
< /tr>
< /table>
< div class= "divsum" > 網站訪問概況< /div>
< div class= "divbanner" >
總瀏覽量 < span class= "spanbold" > @ViewBag.AllTotal< /span>
今日瀏覽量 < span class= "spanbold" > @ViewBag.TodayTotal< /span>
昨日瀏覽量 < span class= "spanbold" > @ViewBag.YestodayTotal< /span>
< /div>
< div id= "mainLine" style= "width: 100%;height:400px;" > < /div>
< div style= "margin:6px 0 6px 180px" >
< div id= "mainMap" style= "width: 800px;height:600px;float:left;" > < /div>
< div id= "mainPie" style= "width: 600px;height:600px;float:left;" > < /div>
< /div>
< div class= "divsum" > 用戶IP概況< /div>
< div class= "divbanner" >
總IP數 < span class= "spanbold" > @ViewBag.IpTotal< /span>
今日IP數 < span class= "spanbold" > @ViewBag.TodayIpTotal< /span>
昨日IP數 < span class= "spanbold" > @ViewBag.YestodayIpTotal< /span>
< /div>
< div class= "divsum" > 轉發量概況< /div>
< div class= "divbanner" >
總轉發量 < span class= "spanbold" > @ViewBag.TransTotal< /span>
今日轉發量 < span class= "spanbold" > @ViewBag.TodayTransTotal< /span>
昨日轉發量 < span class= "spanbold" > @ViewBag.YestodayTransTotal< /span>
< /div>
< /body>
< /html>
[ ActionAuthorize]
[ HttpGet]
public ActionResult ViewCount( )
{
//執行存儲過程
var result = Core.Dal.DataRootBase.QueryStoreProc( "pro_GetViewTotal" ) ;
ViewBag.AllTotal = result[ 0] .Total;
ViewBag.TodayTotal = result[ 1] .Total;
ViewBag.YestodayTotal = result[ 2] .Total;
ViewBag.IpTotal = result[ 3] .Total;
ViewBag.TodayIpTotal = result[ 4] .Total;
ViewBag.YestodayIpTotal = result[ 5] .Total;
ViewBag.TransTotal = result[ 6] .Total;
ViewBag.TodayTransTotal = result[ 7] .Total;
ViewBag.YestodayTransTotal = result[ 8] .Total;
return View( ) ;
}
[ HttpPost]
public ActionResult GetViewData( )
{
//執行存儲過程
DynamicParameters dp = new DynamicParameters( ) ;
dp.Add( "@startDate" , MSCL.RequestHelper.GetString( "beginTime" )) ;
dp.Add( "@endDate" , MSCL.RequestHelper.GetString( "endTime" )) ;
var a = Core.Dal.DataRootBase.QueryStoreProc( "pro_GetViewCountByProvince" , dp) ;
var result = a.Select( p = > new { name = p.ViewProvince , value = p.CountPercent } ) .ToList( ) ;
return Json( result) ;
}
[ HttpPost]
public ActionResult GetViewData1( )
{
//執行存儲過程
DynamicParameters dp = new DynamicParameters( ) ;
dp.Add( "@startDate" , MSCL.RequestHelper.GetString( "beginTime" )) ;
dp.Add( "@endDate" , MSCL.RequestHelper.GetString( "endTime" )) ;
var a = Core.Dal.DataRootBase.QueryStoreProc( "pro_GetViewCountByProvince" , dp) ;
var result = a.Select( p = > new { name = p.ViewProvince, value = p.ViewCount } ) .ToList( ) ;
return Json( result) ;
}
[ HttpPost]
public ActionResult GetViewDataLine( )
{
//執行存儲過程
DynamicParameters dp = new DynamicParameters( ) ;
dp.Add( "@startDate" , MSCL.RequestHelper.GetString( "beginTime" )) ;
dp.Add( "@endDate" , MSCL.RequestHelper.GetString( "endTime" )) ;
var result = Core.Dal.DataRootBase.QueryStoreProc( "pro_GetViewCountByDate" , dp) .Select( p = > new { name = p.ViewDate, value = p.ViewCount } ) .ToList( ) ;
ViewDataFormat model = new ViewDataFormat( ) ;
model.x = result.Select( p = > Convert.ToDateTime( p.name) .ToString( "MM/dd" )) .ToList( ) ;
model.y = result.Select( p = > p.value) .ToList( ) ;
return Json( model) ;
}
public class ViewDataFormat
{
public List< dynamic> x;
public List< dynamic> y;
}
< ! DOCTYPE html>
< html xmlns= "http://www.w3.org/1999/xhtml" >
< head>
< meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" />
< title> 單擊雙擊,鼠標滑過等事件< /title>
< ! -- 引入 echarts.js -->
< script src= "js/echarts.min.js" > < /script>
< /head>
< body>
< ! -- 爲ECharts準備一個具備大小（寬高）的Dom -->
< div id= "main" style= "width: 600px;height:400px;" > < /div>
< span id= "hover-console" > < /span>
< span id= "console" > < /span>
< script type= "text/javascript" >
// 基於準備好的dom，初始化ECharts實例
var myChart = echarts.init( document.getElementById( 'main' )) ;
// 指定圖表的配置項和數據
option = {
tooltip: {
trigger: 'axis'
} ,
legend: {
data: [ '最高' , '最低' ]
} ,
toolbox: {
show: true,
feature: {
mark: { show: true } ,
dataView: { readOnly: false } ,
magicType: { show: true, type: [ 'line' , 'bar' , 'stack' , 'tiled' ] } ,
restore: { show: true } ,
saveAsImage: { show: true }
}
} ,
calculable: true,
dataZoom: {
show: true,
realtime: true,
start: 40,
end: 60
} ,
xAxis: [
{
type: 'category' ,
boundaryGap: true,
data: function ( ) {
var list = [ ] ;
for ( var i = 1; i <= 30; i++) {
list.push( '2013-03-' + i) ;
}
return list;
} ( )
}
] ,
yAxis: [
{
type: 'value'
}
] ,
series: [
{
name: '最高' ,
type: 'line' ,
data: function ( ) {
var list = [ ] ;
for ( var i = 1; i <= 30; i++) {
list.push( Math.round( Math.random( ) * 30) + 30) ;
}
return list;
} ( )
} ,
{
name: '最低' ,
type: 'bar' ,
data: function ( ) {
var list = [ ] ;
for ( var i = 1; i <= 30; i++) {
list.push( Math.round( Math.random( ) * 10)) ;
}
return list;
} ( )
}
]
} ;
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption( option) ;
/* 處理點擊事件
ECharts 支持常規的鼠標事件類型，
包括 'click' 、'dblclick' 、'mousedown' 、'mousemove' 、
'mouseup' 、'mouseover' 、'mouseout'
*/
myChart.on( 'click' , function ( params) {
eConsole( params) ;
} ) ;
myChart.on( 'dblclick' , function ( params) {
eConsole( params) ;
} ) ;
function eConsole( param) {
var mes = '【' + param.type + '】' ;
if ( typeof param.seriesIndex != 'undefined' ) {
mes += ' seriesIndex : ' + param.seriesIndex;
mes += ' dataIndex : ' + param.dataIndex;
mes += ' name : ' + param.name;
mes += ' value : ' + param.value;
}
if ( param.type == 'hover' ) {
document.getElementById( 'hover-console' ) .innerHTML = 'Event Console : ' + mes;
}
else {
document.getElementById( 'console' ) .innerHTML = mes;
}
console.log( param) ;
}
< /script>
< /body>
< /html>
