标签：百度echarts 全国省市地图 动态数据图形报表 linq jquery
在目前的一个项目中，需要用到报表表现数据，这些数据有多个维度，需要同时表现出来，同时可能会有大量数据呈现的需求，经过几轮挑选，最终选择了百度的echarts作为报表基础类库。echarts功能强大，界面优美。由于客户是淘宝卖家，因此想要实现每个月全国各个省份各自购力如何，大家可以统计其他的，如果GDP 人口 等等。
百度echarts简介请参考
http://echarts.coding.io/doc/example.html
效果图如下：全部是动态数据
JS代码：
<!-- Charts Layout Stylesheet -->
<link href="assets/css/echartsHome.css" rel="stylesheet"/>
<script src="assets/js/esl.js"></script>
<script src="assets/js/codemirror.js"></script>
HTML代码：(放在中间呈现)
<div id="mapPieCharts" class="main" ></div>
<script src="assets/js/jquery-1.8.2.min.js"></script>
EchartsJson JS里面的代码如下：
function needMap() {
var href = location.href;
return href.indexOf('map') != -1
|| href.indexOf('mix3') != -1
|| href.indexOf('mix5') != -1
|| href.indexOf('dataRange') != -1;
}
var fileLocation = needMap() ? 'assets/js/echarts-map' : 'assets/js/echarts';
require.config({
paths: {
echarts: fileLocation,'echarts/assets/js/pie': fileLocation,
'echarts/assets/js/map': fileLocation,
}
});
require(
[
'echarts','echarts/chart/pie',needMap() ? 'echarts/chart/map' : 'echarts'
],
DrawCharts
);
function DrawCharts(ec) {
FunDraw1(ec);
}
function FunDraw1(ec) {
//---地图饼状图 ---
var mapChart = ec.init(document.getElementById('mapPieCharts'));
mapChart.showLoading({text: "加载中...请等待" });
mapChart.hideLoading();
var seriesMapData;
var seriesPieData;
var legendData;
$.ajax({
type: "post",
async: false, //同步执行
url: "SearchHandler.ashx?MapPieType=MapPieChart",
dataType: "json",
success: function (result) {
seriesMapData = eval('(' + result.split('_')[0] + ')');
seriesPieData = eval('(' + result.split('_')[1] + ')');
legendData = eval('(' + result.split('_')[2] + ')');
},
error: function (errorMsg) {
alert("全国各省份订单销售量统计数据请求失败。");
}
});
mapChart.setOption({
title: {
text: new Date().getFullYear() + '全国各省份订单销售量统计（月/单）',
subtext: '数据来自WMS统计'
},
tooltip: {
trigger: 'item'
},
legend: {
x: 'right',
selectedMode: false,
data: legendData
},
dataRange: {
orient: 'horizontal',
min: 0,
max: 200,
text: ['购买力强', '低'],
splitNumber: 0,
color: ['orangered', 'yellow', 'lightskyblue']
},
animation: false,
series: [
{
name: new Date().getFullYear() + '全国各省份订单销售量',
type: 'map',
mapType: 'china',
mapLocation: {x: 'left'},
selectedMode: 'multiple',
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: seriesMapData
},
{
name: new Date().getFullYear() + '全国各省份订单销售量',
type: 'pie',
roseType: 'area',
tooltip: {
trigger: 'item',
formatter: "{a} <br />{b} : {c} ({d}%)"
},
center: [document.getElementById('mapPieCharts').offsetWidth - 250, 225],
radius: [30, 120],
data: seriesPieData
}
]
});
}
#region// 地图和饼状图组合查询
if (!string.IsNullOrEmpty(context.Request["MapPieType"]))
{
//图例名称
var legend = string.Empty;
//饼状图数据 省份及统计的数据
StringBuilder sbPieData = new StringBuilder();
sbPieData.Append("[");
//地图数据 省份及统计的数据
StringBuilder sbMapData = new StringBuilder();
sbMapData.Append("[");
using (PortalSearchDataContext db = new PortalSearchDataContext())
{
List<SeriesMapPieData> getMapPieDataList =
(from province in
(
(from t in db.DOC_Order_Header
where
t.C_Address1 != "" && t.SOStatus == "99" &&
t.OrderTime >= startMonth.Date.Date && t.OrderTime
<= DateTime.Parse(endMonth.Date.ToString("yyyy-MM-dd 23:59"))
group t by new
{
t.C_Address1,
t.OrderTime
} into g
select new
{
ProName = g.Key.C_Address1.Substring(0, 3).Replace("省", "").Replace("壮", "")
.Replace("回", "").Replace("维", ""),
Number = g.Count(),
OrderTime = g.Key.OrderTime
}))
group province by new
{
province.ProName
} into g
orderby
g.Sum(p => p.Number)
select new SeriesMapPieData
{
name = g.Key.ProName,
value = g.Sum(p => p.Number)
}).ToList<SeriesMapPieData>();
for (int i = 0; i < getMapPieDataList.Count; i++)
{
sbMapData.Append("{name:'" + getMapPieDataList[i].name + "',value:" + getMapPieDataList[i].value + "},");
}
//取得排名前十条的legendname数据
List<SeriesMapPieData> legendName =
getMapPieDataList.OrderByDescending(x => x.value).Take(10).ToList<SeriesMapPieData>();
for (int i = 0; i < legendName.Count(); i++)
{
legend += "'" + legendName[i].name + "',";
sbPieData.Append("{name:'" + legendName[i].name + "',value:" + legendName[i].value + "},");
}
}
var getPieData = sbMapData.ToString().TrimEnd(',') +"]_" + sbPieData.ToString().TrimEnd(',') + "]_[" + legend.TrimEnd(',') + "]";
context.Response.Write(getPieData.ToJson());
}
#endregion
context.Response.End();其他参考地址：
http://www.stepday.com/topic/?906
http://www.shaoqun.com/a/93673.aspx
http://suchso.com/catalog.asp?tags=Echarts%E4%BD%BF%E7%94%A8
http://www.it165.net/pro/html/201310/7515.html
http://baigungun.blog.51cto.com/6736785/1312743/
http://www.cnblogs.com/zhangxl/p/chart.html
http://www.aiuxian.com/article/p-282551.html
整理好的Echarts文件地址如下：
http://files.cnblogs.com/kongwei521/Echarts%E8%A6%81%E7%94%A8%E5%88%B0%E7%9A%84js_css_dll.zip
C#+JQuery+.Ashx+百度Echarts 实现全国省市地图和饼状图动态数据图形报表的统计
标签：百度echarts 全国省市地图 动态数据图形报表 linq jquery
原文地址：http://blog.csdn.net/kongwei521/article/details/39151627
