MVC中使用Echart后台加载数据 实现饼图、折线图、全国地图数据,单击双击事件等
@{
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").click(function () {
var beginTime = $("#txtBeginTime").datebox("getValue");
var endTime = $("#txtEndTime").datebox("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 #e7e1e1;
text-align: center;
clear: both;
margin: 5px;
font-family: 'Microsoft YaHei';
font-size: 16px;
font-weight: 200;
padding: 5px;
}
.spanbold {
font-size: 18px;
color: #DE7F7F;
font-weight: 600;
}
.divsum {
width: 95%;
border-radius: 5px;
background-color: #F1C992;
text-align: center;
clear: both;
margin: 5px;
font-family: 'Microsoft YaHei';
font-size: 18px;
font-weight: 600;
color: #ffffff;
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>
#region 浏览访问统计
[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;
}
#endregion
<!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>
MVC中使用Echart后台加载数据 实现饼图、折线图、全国地图数据,单击双击事件等的更多相关文章
- WinForm中使用BackgroundWorker异步加载数据并使用进度条
在WinForm程序中,有时会因为加载大量数据导致UI界面假死,这种情况对于用户来说是非常不友好的.因此,在加载大量数据的情况下,首先应该将数据加载放在另一线程中进行,这样保证了UI界面的响应:其次可 ...
- arcgis中的load data加载数据
该工具通过设定字段的对应关系将一个要素类(feature class)的数据加载到另一个要素类里面.通过选择应加载到每个目标字段中的源字段,将匹配源字段中的数据加载到目标数据中. 还可以设置查询,仅加 ...
- WP8.1开发中ListView控件加载图列表的简单使用（1）
我也是刚接触WP编程没几个月,就是在这段时间一直闲着没事,然后又比较喜欢WP这款系统,就学习了WP这方面的开发言语,自学是很困难的,掌握这方面的资料不多,很初级,就是自己在网上找资料学习过程中,看到别 ...
- 移动设备的HTML页面中图片实现滚动加载
如今移动互联网风靡全球,移动页面的元素也是丰富多彩,一个移动页面的图片超过10张已经是再正常不过的事情了.但是相对,很多移动用户还停留在2G,3G这样的网络中.那么这样带宽的用户,在浏览这样的页面时, ...
- (转)在Unity3D的网络游戏中实现资源动态加载
原文:http://zijan.iteye.com/blog/911102 用Unity3D制作基于web的网络游戏,不可避免的会用到一个技术-资源动态加载.比如想加载一个大场景的资源,不应该在游戏的 ...
- 在Unity3D的网络游戏中实现资源动态加载
用Unity3D制作基于web的网络游戏,不可避免的会用到一个技术-资源动态加载.比如想加载一个大场景的资源,不应该在游戏的开始让用户长时间等待全部资源的加载完毕.应该优先加载用户附近的场景资源,在游 ...
- 高效使用Bitmaps（二） 后台加载Bitmap
转载:http://my.oschina.net/rengwuxian/blog/183802 为什么要在后台加载Bitmap? 有没有过这种体验:你在Android手机上打开了一个带有含图片的Lis ...
- 动态加载JS过程中如何判断JS加载完成
在正常的加载过程中,js文件的加载是同步的,也就是说在js加载的过程中,浏览器会阻塞接下来的内容的解析.这时候,动态加载便显得尤为重要了,由于它是异步加载,因此,它可以在后台自动下载,并不会妨碍其它内 ...
- Expo大作战(十三)--expo如何自定义状态了statusBar以及expo中如何处理脱机缓存加载 offline support
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...
随机推荐
- [2017BUAA软工助教]第0次个人作业
学习别人的经验和体会 零.前言 我认为人生就是一次次地从<存在>到<光明>. 一.软件工程师的成长 0.这是一个博客索引 同学们在上这门课的时候基本都是大三,觉得在大学里,到教 ...
- [2017BUAA软工助教]博客格式的详细说明
一.为什么要强调博客格式 可以对比粗读一下这几篇博客然后自己感受一下博客格式对博客阅读体验的影响: MarkDown流: [schaepher]2017春季 JMU 1414软工助教 链接汇总 ...
- java继承中的初始化顺序
初始化顺序:父类的静态变量-->父类的静态代码块-->子类的静态变量-->子类的静态代码快-->父类的非静态变量(父类的非静态代码块)-->父类的构造函数-->子类 ...
- 201521123103 《Java学习笔记》 第八周学习总结
一.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 集合部分:TreeMap实现类:对键值进行排序. Map的entrySet Set<Map.Entry&l ...
- 201521123010 《Java程序设计》第5周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 作业参考文件下载 ① 代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java ...
- 201521123042 《Java程序设计》第3周学习总结
1. 本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来.请使用纸笔或者下面的工具画出本周学习到的知识点.截图或者拍照上传. 2. 书面作 ...
- 201521123090《JAVA程序设计》第二周学习总结
1. 本章学习总结 java基本数据类型 String类对象使用 枚举类型及switch分支 容器的概念 2. 书面作业 Q1.使用Eclipse关联jdk源代码(截图),并查看String对象的源代 ...
- 201521123076 《Java程序设计》第13周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...
- 201521123007《Java程序设计》第10周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 补充上周异常 异常堆栈追踪:获得异常发生的根源 创建自己的异常 自定义异常类不是由Java系统监测到的异常, ...
- Java课程设计博客（个人）
Java课程设计博客(个人) 1. 团队课程设计博客链接 http://www.cnblogs.com/wkfg/p/7063081.html 2. 个人负责模块或任务说明 负责模块/任务:编写doG ...