ECharts制作报表模板--.NET

原文出自：http://blog.youkuaiyun.com/makang456/article/details/52873121

【效果】

【实例】

    一、html代码

[html]  view plain  copy

 

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

 

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

 

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

 

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

 

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>