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个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...
随机推荐
- 自己编写服务启动脚本(一)：functions文件详细分析和说明
本文目录: 1.几个显示函数2.action函数3.is_true和is_false函数4.confirm函数5.pid检测相关函数 5.1 checkpid.__pids_var_run和__pid ...
- ★浅谈Spanking情节
- 团队作业8——Beta 阶段冲刺2rd day
一.今日站立式会议照片 二.每个人的工作 (1) 昨天已完成的工作: 今天是冲刺阶段的第二天,冲刺第一天我们完成了对于前端界面的改进与完善工作. (2) 今天计划完成的工作: 成员 昨天已完成的工作 ...
- 201521123097《Java程序设计》第二周学习总结
1.本周学习总结 (1)学习了java的一些类型和变量. (2)学习了码云的部分功能的使用. 2.书面作业 使用Eclipse关联jdk源代码,并查看String对象的源代码. 为什么要尽量频繁的对字 ...
- 201521123110《Java程序与设计》第13周学习总结
1. 本周学习总结 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? 时间数据不同 ...
- 201521123019 《java程序设计》 第14周学习总结
1. 本章学习总结 2. 书面作业 Q1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) 在自己建立的数据库上执行常见SQL语句(截图) ...
- 数据库系统概论——Chap. 1 Introduction
数据库系统概论--Introduction 一.数据库的4个基本概念 数据(data):数据是数据库中存储的基本单位.我们把描述事物的符号记录称为数据.数据和关于数据的解释是不可分的,数据的含义称为数 ...
- 多线程面试题系列（5）：经典线程同步 关键段CS
上一篇提出了一个经典的多线程同步互斥问题,本篇将用关键段CRITICAL_SECTION来尝试解决这个问题.本文首先介绍下如何使用关键段,然后再深层次的分析下关键段的实现机制与原理.关键段CRITIC ...
- Ring3层 UNICODE_STRING
今天写驱动用到UNICODE_STRING,就在Ring3层抠了一些源代码,学习一下,不多说了上代码了 #pragma once #include <windows.h> #include ...
- Django实现内容缓存
1.缓存的简介 在动态网站中,用户所有的请求,服务器都会去数据库中进行相应的增,删,查,改,渲染模板,执行业务逻辑,最后生成用户看到的页面. 当一个网站的用户访问量很大的时候,每一次的的后台操作,都会 ...