背景:

因为最近项目要生成报表,经过几轮挑选,最终选择了百度的echarts作为报表基础类库。百度echarts简介请参考 http://echarts.baidu.com/ 虽然echarts功能强大,界面优美,

但是使用起来非常繁琐。本文在参考 星星之火116 写的“Echarts使用心得总结”基础上,进一步对JS进行封装。使得其更具有通用性。

(1)解决方案布局

整个解决方案如下图(VS2010+.NET4.0)。

唯一需要说明的是Javascript文件夹下的JS库,其中jquery-1.8.3是juqery库。 echarts是百度echarts库。MyEcharts.js是在“星星之火”代码的基础上修改的自定义类库。

WapCharts.js是自定义的JS库。

(2)建立数据库

报表数据通常都是从数据库里获取,这里我们使用了微软SQLCE一个桌面版数据库。打开lists表,其中数据如下

(3)读写数据

bin文件夹引入System.Data.SqlServerCe.dll。然后完全可以类似读写MSSQL数据库一样,完成对CE数据库的读写。

其中,需要注意CE数据库连接的写法,因为CE数据库是一个本地数据库,所以,直接用Data Source制定sdf的具体地址即可。

 string con = @"Data Source='" + System.Web.HttpContext.Current.Server.MapPath("~/app_data/chartdb.sdf") + "'";

下面代码显示了如何获取饼形数据。

    public void GetPie(HttpContext context)
{
string sql = @" select categoryname as name, count(*) as count from lists group by categoryname";
ds = GetData(sql); lists = new List<object>();
foreach (DataRow dr in ds.Tables[].Rows)
{
var obj = new { name = dr["name"], value = dr["count"] };
lists.Add(obj);
} jsS = new JavaScriptSerializer();
result = jsS.Serialize(lists);
context.Response.Write(result); } public DataSet GetData(string sql)
{
ds = new DataSet();
da = new SqlCeDataAdapter(sql, con);
da.Fill(ds);
return ds; }

在上面代码里,使用了

jsS = new JavaScriptSerializer();

用于把数据序列号为JSON。

这样如果浏览handler.ashx,通过传递cmd不同的参数,就可以返回不同的JSON数据

(4)生成pie报表(饼形图)

echarts需要一个容器来存放数据,通常,会是一个div,所以,我们定义一个div

     <div id="echart" style="width:100%; height:400px;"></div>

我们需要在JQuery的ready事件里,调用数据库数据,并在回调函数里,调用DrawPie生产饼形图。

DrawPie第一个参数是回调值,第二个参数是div的id。

ajax的async设置为false是因为需要同步调用。

         <script type="text/javascript">
$(document).ready(
function () { $.ajax({
url: "ajax/Handler.ashx",
data:{cmd:"pie"},
cache: false,
async: false,
dataType: 'json', success: function (data) {
if (data) {
DrawPie(data,"echart");
}
}, error: function (msg) {
alert("系统发生错误");
} }); }); </script>

这样,就完成了pie报表的生成。

(5)生成bar图形(柱状图)

 要生成bar图像,只要修改2处即可:(1)ajax传递参数cmd为bar。(2)回调返回DrawBar。

     <div id="echart" style="width:100%; height:400px;"></div>

          <script type="text/javascript">
$(document).ready(
function () { $.ajax({
url: "ajax/Handler.ashx",
data: { cmd: "bar" },
cache: false,
async: false,
dataType: 'json', success: function (data) {
if (data) {
DrawBar(data, "echart");
}
}, error: function (msg) {
alert("系统发生错误");
} }); }); </script>

(6)运行效果

你可以下载源代码,运行看到效果(一个是bar.aspx页面,一个是pie.aspx页面)

(7)后续

到此已经完成了图形设计,通过调用DrawBar或者DrawPie方法,就可以生产了报表,你可以进一步对其进行包装为用户控件,方便使用

(8)源代码

单击此处下载本文源代码

http://files.cnblogs.com/files/mqingqing123/echartsDemo.rar

利用c#+jquery+echarts生成统计报表(附源代码)的更多相关文章

  1. C# 根据天、周、月汇总统计生成统计报表

    先看核心代码: public List<DataEntity> SearchShopSalesReport(DateTimeOffset? dateFrom, DateTimeOffset ...

  2. Python_汇总生成统计报表

    import xlrd import xlwt from xlutils.copy import copy objWb = xlrd.open_workbook(r'C:\Users\IBM\Desk ...

  3. echarts 数据统计报表

    官网   http://echarts.baidu.com/index.html 我们下载好开发包后就可以开始了,第一步引入开发包,和需要的主题文件(可定义自己的主体文件),并定义好页面布局.2.0以 ...

  4. jquery ztree的案例,附源代码

    播客:http://itindex.net/detail/46094-jquery-ztree-%E7%A8%8B%E5%BA%8F   源代码: http://download.csdn.net/d ...

  5. statpot:使用mongo+bootstrap+highcharts做统计报表

    最近做了一个统计项目,这个统计项目大致的需求是统计接口的访问速度.客户端会调用一个接口来记录接口的访问情况,我的需求就需要分析这些数据,然后做出个统计报表. 需求实现 最初的时候想着每天把这些接口访问 ...

  6. 利用FusionCharts制作统计报表

    今天在开发中需要用到统计报表,于是就查找了一下FusionCharts的用法,下面来总结一下利用FusionCharts怎么制作统计报表 1.建表 首先要建立所要统计报表的表,表的字段越多,统计的维度 ...

  7. 移动端不利用HTML5和echarts开发一样可以实现大数据展示及炫酷统计系统(产品技术综合)

    一.由于项目需要进行手机看板展示设计及开发展示效果图如下:

  8. python制作简单excel统计报表3之将mysql数据库中的数据导入excel模板并生成统计图

    python制作简单excel统计报表3之将mysql数据库中的数据导入excel模板并生成统计图 # coding=utf-8 from openpyxl import load_workbook ...

  9. Echarts生成饼状图、条形图以及线形图 JS封装

    1.在我们开发程序中,经常会用到生成一些报表,比方说饼状图,条形图,折线图等.不多说了,直接上封装好的代码,如下Echarts.js所示 以下代码是封装在Echarts.js文件中 /** * Cre ...

随机推荐

  1. 【BZOJ】1336: [Balkan2002]Alien最小圆覆盖

    题解 我们先把所有点random_shuffle一下 然后对前i - 1个点计算一个最小圆覆盖,然后第i个点如果不在这个圆里,那么我们把这个点当成一个新的点,作为圆心,半径为0 从头枚举1 - i - ...

  2. 【Codechef】Chef and Bike(二维多项式插值)

    something wrong with my new blog! I can't type matrixs so I come back. qwq 题目:https://www.codechef.c ...

  3. loadrunner运行时设置中清空缓存方法

    用函数web_cache_clearup()或run-time settings---browser emulation 把clear  cache on each iteration打勾 W v\] ...

  4. 004 Numpy

    一:Numpy介绍 1.简介 Numerical Python 就是数值python包,是python进行科学计算的一个基础包,因此要更好的理解与掌握python科学计算包,尤其是pandas,需要先 ...

  5. 创建NuGet包

    创建NuGet包 在创建一个NuGet包之前我们应该先创建一个以.nuspec为后缀的xml清单文件,这个清单文件描述了包的内容,在安装NuGet包的过程中这个清单文件扮演者很重要的角色.实际上它的作 ...

  6. 【工具】获取pojo类属性,并写入表格

    1.添加依赖 <!-- https://mvnrepository.com/artifact/org.apache.poi/poi --> <dependency> <g ...

  7. OpenCV 基础笔记

    本文大部分内容来源于入门者的Python快速教程 - 番外篇之Python-OpenCV 本篇将介绍和深度学习数据处理阶段最相关的基础使用,并完成4个有趣实用的小例子: 延时摄影小程序 视频中截屏采样 ...

  8. Java 中线程安全问题

    不好意思,一个国庆假期给我放的都不知道东西南北了,放松,很放松,差一点就弃更了,感谢那些催更的小伙伴们! 虽然没有更新,但是日常的学习还是有的,以后我尽量给大家分享一些通用知识,非技术. 但是本期还是 ...

  9. 【BZOJ 2318】 2318: Spoj4060 game with probability Problem(概率DP)

    2318: Spoj4060 game with probability Problem Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 371  Sol ...

  10. BZOJ 2333: [SCOI2011]棘手的操作 可并堆 左偏树 set

    https://www.lydsy.com/JudgeOnline/problem.php?id=2333 需要两个结构分别维护每个连通块的最大值和所有连通块最大值中的最大值,可以用两个可并堆实现,也 ...