Home Verkennen Help
Registreren Inloggen
zhengbingbing
/
XYUpgrade_UI
Volgen 1
Ster 0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Commits 60 Publicaties 0 Wiki
Bladeren bron

增加饼图

zhangshuangnan 7 jaren geleden
bovenliggende
33a40f1027
commit
6622697f48
2 gewijzigde bestanden met toevoegingen van 114 en 71 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 2 2
      CallCenterWeb.UI/WebChart/huaWuLiang.html
  2. 112 69
      CallCenterWeb.UI/WebChart/js/huawu.js

+ 2 - 2
CallCenterWeb.UI/WebChart/huaWuLiang.html
Bestand weergeven 

@@ -69,7 +69,6 @@
69 69 
     </style>
70 70 
 </head>
71 71 
 <body>
72 
-
73 72 
 	<div class="huaWuBox">
74 73
75 74 
 	    <div class="navcon ">
 
@@ -98,7 +97,8 @@
98 97 
 	                        <div class="box_title">
99 98 
 	                           	 当日话务量总体统计
100 99 
 	                        </div>
101 
-	                        <div id="phone_num" style="height: 400px;"></div>
100 
+	                        <div id="phone_num" style="width:50%;height: 400px;" class="col-md-6 col-sm-6"></div>
101 
+	                        <div id="phone_num2" style="width:50%;height: 400px;" class="col-md-6 col-sm-6"></div>
102 102 
 	                    </div>
103 103
104 104 
 	                </div>

+ 112 - 69
CallCenterWeb.UI/WebChart/js/huawu.js
Bestand weergeven 

@@ -112,76 +112,112 @@ $(document).ready(function() {
112 112 
 	//part 2
113 113 
 	var phone_num = echarts.init(document.getElementById('phone_num'));
114 114 
 	phone_num.setOption({
115 
-		title: {
116 
-			//		text: '投诉/举报汇总',
117 
-			x: 'center',
118 
-			textStyle: {
119 
-				color: '#fff',
120 
-				fontSize: 16
121 
-			},
122 
-		},
123 
-		tooltip: {
124 
-			trigger: 'axis',
125 
-			axisPointer: { // 坐标轴指示器，坐标轴触发有效
126 
-				type: 'line' // 默认为直线，可选为：'line' | 'shadow'
127 
-			}
128 
-		},
129 
-		toolbox: {
130 
-			show: true,
131 
-		},
132 
-		calculable: true,
133 
-		xAxis: [{
134 
-			type: 'category',
135 
-			//		name: '月份',
136 
-			splitLine: {
137 
-				show: false
138 
-			}, //去除网格线
139 
-			data: ["来话量(通)", "接通量(通)", "接通率", "平均通话时长(秒)"],
140 
-			//		axisTick: {
141 
-			//			alignWithLabel: true
142 
-			//		},
143 
-			axisLine: {
144 
-				show: false,
145 
-				lineStyle: {
146 
-					color: '#fff'
147 
-				}
148 
-			},
149 
-			//		axisLine: {},
150 
-			axisTick: {
151 
-				show: false
152 
-			}
153 
-
154 
-		}],
155 
-		yAxis: [{
156 
-			show: false
157 
-		}],
158 
-		series: [{
159 
-				name: '数量',
160 
-				type: 'bar',
161 
-				barWidth: '30%', //图形宽度
162 
-				data: [],
163 
-				itemStyle: {
164 
-					normal: {
165 
-						label: {
166 
-							show: true,
115 
+//				color: ['#6ce7ac', '#6a91e0', '#ceba5f', '#cb5f79', '#ae765a', '#569d4e'],
116 
+				color: [ '#6a91e0', '#ceba5f', '#cb5f79', '#ae765a', '#569d4e'],
117 
+				tooltip: {
118 
+					trigger: 'item',
119 
+					formatter: "{a} <br/>{b} : {c} ({d}%)",
120 
+					axisPointer: {
121 
+						crossStyle: {
122 
+							color: '#fff'
123 
+						}
124 
+					}
125 
+				},
126 
+							legend: {
127 
+								//      orient: 'vertical',
128 
+								bottom: 'bottom',
129 
+								data: ['来电量','呼出量'],
130 
+								textStyle: {
131 
+									color: '#fff'
132 
+								}
133 
+							},
134 
+				series: [{
135 
+					name: '数据',
136 
+					type: 'pie',
137 
+					radius: '50%',
138 
+//					radius: ['30%', '60%'],
139 
+					center: ['50%', '50%'],
140 
+					data: [],
141 
+					itemStyle: {
142 
+						emphasis: {
143 
+							shadowBlur: 10,
144 
+							shadowOffsetX: 0,
145 
+							shadowColor: 'rgba(0, 0, 0, 0.5)'
146 
+						},
147 
+						normal: {
148 
+							label: {
149 
+								show: true,
150 
+//								formatter: '{b} : {c} ({d}%)'
151 
+								formatter: '{c} ({d}%)'
152 
+//								formatter: '{d}%'
153 
+							},
154 
+							labelLine: {
155 
+								show: true
156 
+							}
157 
+						}
158 
+					},
159 
+					label: {
160 
+						normal: {
167 161 
 							textStyle: {
168 
-								color: '#fff' //顶部数据颜色
162 
+								color: '#fff'
169 163 
 							}
170 164 
 						}
171 165 
 					}
166 
+				}]
167 
+			});
168 
+
169 
+	var phone_num2 = echarts.init(document.getElementById('phone_num2'));
170 
+	phone_num2.setOption({
171 
+				color: [ '#ae765a', '#569d4e'],
172 
+				tooltip: {
173 
+					trigger: 'item',
174 
+					formatter: "{a} <br/>{b} : {c} ({d}%)",
175 
+					axisPointer: {
176 
+						crossStyle: {
177 
+							color: '#fff'
178 
+						}
179 
+					}
172 180 
 				},
173 
-				label: {
174 
-					normal: {
175 
-						show: true,
176 
-						position: 'top' //顶部数据显示位置
181 
+							legend: {
182 
+								//      orient: 'vertical',
183 
+								bottom: 'bottom',
184 
+								data: ['接通量','未接通量'],
185 
+								textStyle: {
186 
+									color: '#fff'
187 
+								}
188 
+							},
189 
+				series: [{
190 
+					name: '数据',
191 
+					type: 'pie',
192 
+					radius: '50%',
193 
+					center: ['50%', '50%'],
194 
+					data: [],
195 
+					itemStyle: {
196 
+						emphasis: {
197 
+							shadowBlur: 10,
198 
+							shadowOffsetX: 0,
199 
+							shadowColor: 'rgba(0, 0, 0, 0.5)'
200 
+						},
201 
+						normal: {
202 
+							label: {
203 
+								show: true,
204 
+//								formatter: '{b} : {c} ({d}%)'
205 
+								formatter: '{c} ({d}%)'
206 
+							},
207 
+							labelLine: {
208 
+								show: true
209 
+							}
210 
+						}
211 
+					},
212 
+					label: {
213 
+						normal: {
214 
+							textStyle: {
215 
+								color: '#fff'
216 
+							}
217 
+						}
177 218 
 					}
178 
-
179 
-				}
180 
-			}
181 
-
182 
-		]
183 
-		//  color: ['#ff9800','#61a0a8','#1ab394']
184 
-	});
219 
+				}]
220 
+			});
185 221
186 222 
 	function partTwo() {
187 223 
 		var index = layer.load(1, {
 
@@ -199,12 +235,19 @@ $(document).ready(function() {
199 235 
 				if(data.state.toLowerCase() == "success") {
200 236 
 					layer.close(index);
201 237 
 					var con = data.data;
238 
+					var part_2_ser = [{'value':con.daycallin ,'name':'来电量'},{'value':con.daycallout ,'name':'呼出量'}];
239 
+
202 240 
 					phone_num.setOption({
203 
-						series: [{
204 
-							data: [con.daycallin, con.daycallconn, con.daycallrate, con.avgtime]
205 
-							//						data: [20, 100, 5, 80]
206 
-						}]
207 
-
241 
+								series: [{
242 
+									data: part_2_ser
243 
+								}]
244 
+					})
245 
+					var part_2_ser2 = [{'value':con.daycallconnect ,'name':'接通量'},{'value':con.daycallwconnect ,'name':'未接通量'}];
246 
+
247 
+					phone_num2.setOption({
248 
+								series: [{
249 
+									data: part_2_ser2
250 
+								}]
208 251 
 					})
209 252
210 253 
 				}