ECharts制作报表模板--.NET

原文出自:http://blog.csdn.net/makang456/article/details/52873121

【效果】




【实例】

    一、html代码

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <span style="font-family:KaiTi_GB2312;font-size:18px;">-  
  2.     <!--整体div-->  
  3.     <div id="zhengti"  style="width:900px;margin: 0 auto;margin-bottom: 10px;margin-top: 40px;">  
  4.            
  5.          <!--图形div visible="false"-->  
  6.          <div  id="main"  style="width:800px;height:450px; float:left; display:inline; margin-bottom:30px;"></div>  
  7.         <br />  
  8.          <!--列表div-->  
  9.          <div id="editor-grid" style=" border-top:none; width:800px;height:300px;"></div>  
  10.   
  11.     </div>   
  12. -</span>  

    二、js代码

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <span style="font-family:KaiTi_GB2312;font-size:18px;">-  
  2.   
  3.          //页面刷新的方法加载  
  4.          $(document).ready(function () {  
  5.              //获取隐藏控件中的值  
  6.              var rejctphenomenontypename = "";  
  7.   
  8.              //准备数据  
  9.              var json;  
  10.              $.ajax({  
  11.                  url: '../ashx/chartashx/reject_belongs_system_charts.ashx?cmd=cmd&rejctphenomenontypename=' + rejctphenomenontypename,  
  12.                  type: 'post',  
  13.                  dataType: 'json',  
  14.                  async: false,  
  15.                  success: function (data) {  
  16.                      json = data;  
  17.                  }, error: function (data) {  
  18.                      alert("加载失败,请联系管理员!");  
  19.                  }  
  20.              });  
  21.              loadcharts(json);  
  22.              loadList(json);  
  23.              document.title = "问题汇总";  
  24.          });  
  25.   
  26.          //展示图标function  
  27.          function loadcharts(json) {  
  28.   
  29.              //图表展示  
  30.              var myChart1 = echarts.init(document.getElementById('main'));  
  31.   
  32.              option = {  
  33.   
  34.                  //图表标题    
  35.                  title: {  
  36.   
  37.                      text: "子系统不合格品问题统计"//正标题    
  38.   
  39.                      x: "center"//标题水平方向位置    
  40.                      //正标题样式    
  41.                      textStyle: {  
  42.                          fontSize: 20  
  43.                      },  
  44.                      //副标题样式    
  45.                      subtextStyle: {  
  46.                          fontSize: 12,  
  47.                          color: "red"  
  48.                      }  
  49.                  },  
  50.                  tooltip: {  
  51.                      trigger: 'axis',  
  52.                      axisPointer: {            // 坐标轴指示器,坐标轴触发有效  
  53.                          type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'  
  54.                      }  
  55.                  },  
  56.   
  57.                  //工具箱配置    
  58.                  toolbox: {  
  59.                      show: true,  
  60.                      feature: {  
  61.                          mark: { show: true }, // 辅助线标志,上图icon左数1/2/3,分别是启用,删除上一条,删除全部    
  62.                          dataView: { show: true, readOnly: false },// 数据视图,上图icon左数8,打开数据视图    
  63.                          magicType: { show: true, type: ['line''bar''stack''tiled'] },// 图表类型切换,当前仅支持直角系下的折线图、柱状图转换,上图icon左数6/7,分别是切换折线图,切换柱形图    
  64.                          restore: { show: true }, // 还原,复位原始图表,上图icon左数9,还原    
  65.                          saveAsImage: { show: true } // 保存为图片,上图icon左数10,保存    
  66.                      }  
  67.                  },  
  68.   
  69.                  //图例内容以及位置  
  70.                  legend: {  
  71.                      //加载图例内容,这里json.a是对应的数组元素  
  72.                      data: json.tuli,  
  73.                      y: "bottom"  
  74.   
  75.                  },  
  76.                  grid: {  
  77.                      left: '0%',  
  78.                      right: '0%',  
  79.                      bottom: '20%',  
  80.                      containLabel: true  
  81.                  },  
  82.                  //x轴的数据  
  83.                  xAxis: [  
  84.                      {  
  85.                          axisLabel: {  
  86.                              rotate: 60,  
  87.                              interval: 0  
  88.                          },  
  89.                          type: 'category',  
  90.                          //加载x轴的数据,这里  
  91.                          //data: ['部门1', '部门2', '部门3', '部门4'],  
  92.                          data: json.xzhou,  
  93.                          name: "部门"  
  94.   
  95.                      }  
  96.                  ],  
  97.                  //y轴的数据  
  98.                  yAxis: [  
  99.                      {  
  100.                          type: 'value',  
  101.                          name: "数值"  
  102.                      }  
  103.                  ],  
  104.                  //图中的数据,这里是通过匹配的来的!  
  105.                  series: json.tushuju  
  106.              };  
  107.   
  108.   
  109.              //将配置好的图加载到div中  
  110.              myChart1.setOption(option);  
  111.   
  112.              //单击穿透  
  113.              myChart1.on('click'function (param) {  
  114.                   
  115.                  var rejectbelongssystemname = param.name;  
  116.                  //window.open("reject_phenomenon_type_charts.aspx?rejectbelongssystemname=" + rejectbelongssystemname);  
  117.                  window.open("reject_phenomenon_type_charts1.aspx?rejectbelongssystemname=" + rejectbelongssystemname, 'newwindow''height=672,width=1182,top=100,left=100,toolbar=no,menubar=no,scrollbars=no,resizable=no, location=no,status=no')  
  118.              });  
  119.   
  120.          }  
  121.   
  122.          //加载列表function  
  123.          function loadList(json) {  
  124.              var columns = [json.listbiaotou];  
  125.   
  126.              //gridData属性  
  127.              InitGrid = {  
  128.                  //nowrap: true,  
  129.                  //autoRowHeight: true,  
  130.                  striped: true,  
  131.                  singleSelect: true,  
  132.                  // url: Init.url + '&cmd=list',  
  133.                  //data: [{ "Id": 1, "region": "8号线", "SR": 100, "ST": 80 }, { "Id": 2, "region": " 北京亦庄线", "SR": 40, "ST": 80 }, { "Id": 3, "region": " 重庆3号线", "SR": 30, "ST": 80 }, { "Id": 4, "region": " 成都3号线", "SR": 10, "ST": 80 }, { "Id": 5, "region": " 大连线", "SR": 10, "ST": 80 }],  
  134.                  data: json.listshuju,  
  135.                  fitColumns: true,  
  136.                  idField: 'Id',  
  137.                  pagination: true,  
  138.                  rownumbers: true,  
  139.                  pageSize: 10,  
  140.                  pageList: [5, 10, 15, 20, 50, 80, 200],  
  141.                  //toolbar: toolbar,  
  142.                  columns: columns,  
  143.                  // fit: true,  
  144.                  //border: true  
  145.              }  
  146.   
  147.              //创建数据表格  
  148.              dataGrid = $("#editor-grid").datagrid(InitGrid);  
  149.   
  150.          }  
  151. -</span>  

    三、一般处理程序代码

[csharp]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <span style="font-family:KaiTi_GB2312;font-size:18px;">-  
  2. #region 3、子系统不合格品问题统计-马康-2016年9月28日17:16:23  
  3.         /// <summary>  
  4.         /// 3、子系统不合格品问题统计-马康-2016年9月28日17:16:23  
  5.         /// </summary>  
  6.         /// <returns></returns>  
  7.         private string queryList(string rejctphenomenontypename)  
  8.         {  
  9.   
  10.             //实例化BLL层  
  11.             ProblemSpotBLL problemspotbll = new ProblemSpotBLL();  
  12.   
  13.             //查询数据  
  14.             DataSet projectProblemList = problemspotbll.queryrejectbelongssystemList(rejctphenomenontypename);  
  15.   
  16.             DataTable tables2 = new DataTable();  
  17.             tables2.Columns.Add("producttype"typeof(String));  
  18.             DataRow row = tables2.NewRow();  
  19.             row["producttype"] = "不合格品";  
  20.             tables2.Rows.Add(row);  
  21.             projectProblemList.Tables.Add(tables2);  
  22.   
  23.             StringBuilder sb = new StringBuilder();  
  24.             String resultStr = "";  
  25.             if (projectProblemList.Tables.Count > 0)  
  26.             {  
  27.                 //总括号  
  28.                 sb.Append("{");  
  29.                 #region 1、图例项对象数组  
  30.                 //第一个图例项对象数组  
  31.                 sb.Append("\"tuli\":[");  
  32.                 for (int i = 0; i < projectProblemList.Tables[2].Rows.Count; i++)  
  33.                 {  
  34.                     sb.Append("\"" + projectProblemList.Tables[2].Rows[i][0] + "\",");  
  35.                 }  
  36.                 sb.Remove(sb.Length - 1, 1);  
  37.                 sb.Append("],");  
  38.                 #endregion  
  39.  
  40.                 #region 2、x轴中的项目  
  41.                 //第一个图例项对象数组  
  42.                 sb.Append("\"xzhou\":[");  
  43.                 for (int i = 0; i < projectProblemList.Tables[1].Rows.Count; i++)  
  44.                 {  
  45.                     sb.Append("\"" + projectProblemList.Tables[1].Rows[i][0] + "\",");  
  46.                 }  
  47.                 sb.Remove(sb.Length - 1, 1);  
  48.                 sb.Append("],");  
  49.                 #endregion  
  50.  
  51.                 #region 3、图中的数据  
  52.                 //第一个图例项对象数组  
  53.                 sb.Append("\"tushuju\":[");  
  54.                 //最外层循环,循环项目  
  55.                 for (int i = 0; i < projectProblemList.Tables[2].Rows.Count; i++)  
  56.                 {  
  57.                     sb.Append("{");  
  58.                     sb.Append("\"name\":\"" + projectProblemList.Tables[2].Rows[i][0] + "\",");  
  59.                     sb.Append("\"type\":\"bar\",");  
  60.                     sb.Append("\"data\":[");  
  61.                     //定义一个临时数组,来存储下面要获得的数据  
  62.                     int[] arraylist = new int[projectProblemList.Tables[1].Rows.Count];  
  63.                     //根据项目匹配总数据中的值  
  64.                     for (int j = 0; j < projectProblemList.Tables[0].Rows.Count; j++)  
  65.                     {  
  66.                         //如果有相等的值,则进入循环部门(这里肯定会至少有一个项目名称与之匹配,因为项目名称是根据这个datatable去重筛选出来的)  
  67.                         string adsf = projectProblemList.Tables[0].Rows[j][1].ToString();  
  68.                         string asdfasdf = projectProblemList.Tables[2].Rows[i][0].ToString();  
  69.                         if (projectProblemList.Tables[0].Rows[j][1].ToString() == projectProblemList.Tables[2].Rows[i][0].ToString())  
  70.                         {  
  71.   
  72.                             //通过循环产品,向数组中加入内容  
  73.                             for (int k = 0; k < projectProblemList.Tables[1].Rows.Count; k++)  
  74.                             {  
  75.                                 if (projectProblemList.Tables[1].Rows[k][0].ToString() == projectProblemList.Tables[0].Rows[j][0].ToString())  
  76.                                 {  
  77.                                     arraylist[k] = (int)projectProblemList.Tables[0].Rows[j][2];  
  78.                                 }  
  79.   
  80.                             }  
  81.                         }  
  82.   
  83.                     }  
  84.                     //循环将数组拼接到字符串中  
  85.                     for (int k = 0; k < arraylist.Length; k++)  
  86.                     {  
  87.                         sb.Append("\"" + arraylist[k] + "\",");  
  88.                     }  
  89.                     sb.Remove(sb.Length - 1, 1);  
  90.                     sb.Append("]");  
  91.                     sb.Append("},");  
  92.                 }  
  93.                 sb.Remove(sb.Length - 1, 1);  
  94.                 sb.Append("],");  
  95.  
  96.                 #endregion  
  97.  
  98.                 #region 4、列表中的表头  
  99.                 double kuandu = (800 - 30) / (projectProblemList.Tables[1].Rows.Count + 1) - 3;  
  100.                 //第一个图例项对象数组  
  101.                 sb.Append("\"listbiaotou\":[");  
  102.                 sb.Append("{");  
  103.                 sb.Append("\"field\":\"id\",");  
  104.                 sb.Append("\"hidden\":\"true\"");  
  105.                 sb.Append("},");  
  106.                 sb.Append("{");  
  107.                 sb.Append("\"field\":\"region\",");  
  108.                 sb.Append("\"title\":\"项目\",");  
  109.                 sb.Append("\"align\":\"center\",");  
  110.                 sb.Append("\"width\":\"" + kuandu + "\"");  
  111.                 sb.Append("},");  
  112.   
  113.                 for (int i = 0; i < projectProblemList.Tables[1].Rows.Count; i++)  
  114.                 {  
  115.                     sb.Append("{");  
  116.                     sb.Append("\"field\":\"" + projectProblemList.Tables[1].Rows[i][0] + "\",");  
  117.                     sb.Append("\"title\":\"" + projectProblemList.Tables[1].Rows[i][0] + "\",");  
  118.                     sb.Append("\"align\":\"center\",");  
  119.                     sb.Append("\"width\":\"" + kuandu + "\"");  
  120.                     sb.Append("},");  
  121.                 }  
  122.                 sb.Remove(sb.Length - 1, 1);  
  123.                 sb.Append("],");  
  124.                 #endregion  
  125.  
  126.                 #region 5、列表中的数据  
  127.                 //第一个图例项对象数组  
  128.                 sb.Append("\"listshuju\":[");  
  129.                 //最外层循环,循环项目  
  130.                 for (int i = 0; i < projectProblemList.Tables[2].Rows.Count; i++)  
  131.                 {  
  132.                     sb.Append("{");  
  133.                     sb.Append("\"id\":\"" + i + "\",");  
  134.                     sb.Append("\"region\":\"" + projectProblemList.Tables[2].Rows[i][0] + "\",");  
  135.                     //定义一个临时数组,来存储下面要获得的数据  
  136.                     int[] arraylist = new int[projectProblemList.Tables[1].Rows.Count];  
  137.                     //根据项目匹配总数据中的值  
  138.                     for (int j = 0; j < projectProblemList.Tables[0].Rows.Count; j++)  
  139.                     {  
  140.                         //如果有相等的值,则进入循环部门(这里肯定会至少有一个项目名称与之匹配,因为项目名称是根据这个datatable去重筛选出来的)  
  141.                         string adsf = projectProblemList.Tables[0].Rows[j][1].ToString();  
  142.                         string asdfasdf = projectProblemList.Tables[2].Rows[i][0].ToString();  
  143.                         if (projectProblemList.Tables[0].Rows[j][1].ToString() == projectProblemList.Tables[2].Rows[i][0].ToString())  
  144.                         {  
  145.   
  146.                             //通过循环部门,向数组中加入内容  
  147.                             for (int k = 0; k < projectProblemList.Tables[1].Rows.Count; k++)  
  148.                             {  
  149.                                 if (projectProblemList.Tables[1].Rows[k][0].ToString() == projectProblemList.Tables[0].Rows[j][0].ToString())  
  150.                                 {  
  151.   
  152.                                     arraylist[k] = (int)projectProblemList.Tables[0].Rows[j][2];  
  153.                                 }  
  154.   
  155.                             }  
  156.                         }  
  157.   
  158.                     }  
  159.                     //循环将数组拼接到字符串中  
  160.                     for (int k = 0; k < projectProblemList.Tables[1].Rows.Count; k++)  
  161.                     {  
  162.                         sb.Append("\"" + projectProblemList.Tables[1].Rows[k][0] + "\":\"" + arraylist[k] + "\",");  
  163.                     }  
  164.                     sb.Remove(sb.Length - 1, 1);  
  165.                     sb.Append("},");  
  166.                 }  
  167.                 sb.Remove(sb.Length - 1, 1);  
  168.                 sb.Append("]");  
  169.  
  170.                 #endregion  
  171.   
  172.                 //最后的括号!  
  173.                 sb.Append("}");  
  174.   
  175.                 resultStr = sb.ToString();  
  176.             }  
  177.           
  178.                         
  179.             return resultStr;  
  180.         }  
  181.         #endregion  
  182. -</span>  

    四、BLL层代码

[csharp]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <span style="font-family:KaiTi_GB2312;font-size:18px;">-  
  2. #region 最终报表3、子系统不合格品问题统计-马康-2016年9月28日17:16:23  
  3.         /// <summary>  
  4.         /// 最终报表3、子系统不合格品问题统计-马康-2016年9月28日17:16:23  
  5.         /// </summary>  
  6.         /// <returns></returns>  
  7.         public DataSet queryrejectbelongssystemList(string rejctphenomenontypename)  
  8.         {  
  9.             return dal.GetrejectbelongssystemList(rejctphenomenontypename);  
  10.         }  
  11.         #endregion   
  12. -</span>  

    五、DAL层代码

[csharp]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <span style="font-family:KaiTi_GB2312;font-size:18px;">-  
  2.  #region 最终报表3、子系统不合格品问题统计-马康-2016年9月28日17:16:23  
  3.         /// <summary>  
  4.         /// 3、子系统不合格品问题统计-马康-2016年9月28日17:16:23  
  5.         /// </summary>  
  6.         /// <returns></returns>  
  7.         public DataSet GetrejectbelongssystemList(string rejctphenomenontypename)  
  8.         {  
  9.             StringBuilder builder = new StringBuilder();  
  10.             if (rejctphenomenontypename =="")  
  11.             {  
  12.                 //总数据  
  13.                 builder.Append(" SELECT sELECT3,replace(IsActive,'1','不合格品'),COUNT(sELECT3) num FROM Pts_Problems WHERE ProjectID IN (197, 29) AND ProblemStateID NOT IN (1870, 250) AND Select3 IN ('VOBC子系统','DCS子系统','ATS子系统','MSS子系统','CI子系统','ZC/DSU子系统')  GROUP BY sELECT3,IsActive ");  
  14.   
  15.                 //所属系统个数  
  16.                 builder.Append("   SELECT DISTINCT(sELECT3) FROM Pts_Problems WHERE ProjectID IN (197, 29) AND ProblemStateID NOT IN (1870, 250) AND Select3 IN ('VOBC子系统','DCS子系统','ATS子系统','MSS子系统','CI子系统','ZC/DSU子系统')  GROUP BY sELECT3  ");  
  17.   
  18.             }  
  19.             else  
  20.             {  
  21.                 //总数据  
  22.                 builder.Append(" SELECT sELECT3,replace(IsActive,'1','不合格品'),COUNT(sELECT3) num FROM Pts_Problems WHERE ProjectID IN (197, 29) AND ProblemStateID NOT IN (1870, 250)  and MultiSelect1 = '" + rejctphenomenontypename + ";' AND Select3 IN ('VOBC子系统','DCS子系统','ATS子系统','MSS子系统','CI子系统','ZC/DSU子系统')  GROUP BY sELECT3,IsActive ");  
  23.   
  24.                 //所属系统个数  
  25.                 builder.Append("   SELECT DISTINCT(sELECT3) FROM Pts_Problems WHERE ProjectID IN (197, 29) AND ProblemStateID NOT IN (1870, 250) AND Select3 IN ('VOBC子系统','DCS子系统','ATS子系统','MSS子系统','CI子系统','ZC/DSU子系统')  GROUP BY sELECT3  ");  
  26.   
  27.             }  
  28.             
  29.             return SqlHelper.ExecuteDataset(sqlConnstring, CommandType.Text, builder.ToString());  
  30.         }  
  31. -</span>  

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值