大屏

WebChart/css/index.css

@@ -1,4 +1,4 @@
-/*
+/*
  公共初始化样式
  * */
 
@@ -1699,6 +1699,19 @@ a {
 	vertical-align: middle;
 	margin-left: 16px;
 }
+#times3 {
+	z-index: 9999;
+	position: relative;
+	background: #114a97;
+	height: 16px;
+	color: #00e9ff;
+	border: 2px solid #00e9ff;
+	border-radius: 2px;
+	outline: none;
+	padding: 2px 35px;
+	vertical-align: middle;
+	margin-left: 16px;
+}
 
 .time_box {
 	color: #00e9ff;

WebChart/index.html

@@ -87,6 +87,25 @@
 				background: #F05964;
 				margin: 30px 10% 0px 3%;
 			}
+			.threefour{
+				width: 90%;
+				margin-left:10%;
+				overflow: hidden;
+			}
+			.threefour .partL{
+				float: left;
+				width: 100%;
+				height: 300px;
+				background: #F05964;
+				margin: 30px 3% 0px 5%;
+			}
+			/* .threefour .partR{
+				float: left;
+				width: 37%;
+				height: 300px;
+				background: #F05964;
+				margin: 30px 10% 0px 3%;
+			} */
 			.fourSel{
 				position: absolute;
 				right: 180px;
@@ -281,6 +300,40 @@
 							</div>
 						</div>
 					</div>
+				<!--第四屏  五个饼图-->
+				<div class="swiper-slide">
+					<div class="orderSource slideCon_bg clearfix" style="position: relative;">
+						<div class="timeWrap twotimeWarp firstPos">
+							<div class="time_box pull-right form-inline">
+								日期<input type="text" id="time3" class="times" style="width:200px;" />
+							</div>
+						</div>
+						<p class="slide_title slide_title2" style="left: 44%;"></p>
+						<!-- <div class="fourSel">
+							渠道来源
+							<select class="channelSel selects">
+								<option value="总经销">总经销</option>
+								<option value="二级商">二级商</option>
+								<option value="种田大户">种田大户</option>
+								<option value="公司员工">公司员工</option>
+								<option value="其他公众">其他公众</option>
+							</select>		
+						</div> -->
+						<div class="threefour">
+							<div class="partL" id="patt1" style="width: 500px;height:300px; margin-top: 50px;" ></div>
+							<div class="partL" id="patt2" style="width: 500px;height:300px; margin-top: 50px;"></div>
+							<div class="partL" id="patt3" style="width: 500px;height:300px;"></div>
+							<div class="partL" id="patt4" style="width: 500px;height:300px;"></div>
+							<!-- <div class="partL" id="patt5" style="width: 400px;height:300px;"></div> -->
+						</div>
+					</div>
+				</div>
+				
+				
+				
+				
+				
+				
 				</div>
 				<div class="swiper-button-prev"></div>
 				<div class="swiper-pagination"></div>

WebChart/js/index.js

@@ -341,7 +341,7 @@ function turn(aa) {
 		partThaace();
 		partTccea();
 		partTaipa();
-		parthtmc();
+		// parthtmc();
 	}
 	$(".channelSel").change(function() {
 	    partFour();

WebChart/js/pieChat.js

@@ -1,6 +1,11 @@
 var container1 = echarts.init(document.getElementById('part1'));
 var container2 = echarts.init(document.getElementById('part2'));
 var container3 = echarts.init(document.getElementById('part3'));
+var container4 = echarts.init(document.getElementById('patt1'));
+var container5 = echarts.init(document.getElementById('patt2'));
+var container6 = echarts.init(document.getElementById('patt3'));
+var container7 = echarts.init(document.getElementById('patt4'));
+var container8 = echarts.init(document.getElementById('patt5'));
 function partOne() {
 	$.ajax({
 		type: "get",
@@ -322,4 +327,528 @@ function partFour() {
 			}
 		}
 	});
-}
+}
+
+
+// 第四屏
+var typeSelc;
+var oneType;
+
+
+function partThaa(sd,ed) {
+	if (oneType) {
+		typeSelc=oneType;
+	}else{
+		typeSelc=5;	
+	}
+	$.ajax({
+		type: "get",
+		url: huayi.config.callcenter_url + "WOReport/GetFeedbacklList",
+		async: true,
+		dataType: "json",
+		data: {
+//			date:
+                start: sd,
+				end: ed,
+				type: typeSelc
+		},
+		success: function(data) {
+			if(data.state.toLowerCase() == "success") {
+				var con = data.rows;
+				container4.setOption({
+					title: {
+						text: '区域',
+						textStyle: {
+							//文字颜色
+							color: '#00e9ff',
+							//字体大小
+							　　　　fontSize: 18
+						},
+						x: 'left'
+					},
+					tooltip: {
+						trigger: 'item',
+						formatter: "{a} <br/>{b} : {c} ({d}%)"
+					},
+					legend: {
+						orient: 'vertical',
+						left: 'left'
+					},
+
+					series: [{
+						name: '区域',
+						type: 'pie',
+						radius: '70%',
+						center: ['50%', '50%'],
+						data: [{
+								value: con[0].number,
+								name: con[0].name
+							},
+							{
+								value: con[1].number,
+								name: con[1].name
+							},
+							{
+								value:con[2].number,
+								name: con[2].name
+							},
+							{
+								value:con[3].number,
+								name: con[3].name
+							},
+							
+						],
+						itemStyle: {
+							// normal: {
+							// 	color: '#2973E4',
+							// 	opacity: 0.8,
+							// },
+							emphasis: {
+								shadowBlur: 10,
+								shadowOffsetX: 0,
+								shadowColor: 'rgba(255, 198, 0, 0.5)'
+							}
+						}
+					}]
+				});
+			}
+		}
+	});
+}
+
+function partThaace() {
+	$.ajax({
+		type: "get",
+		url: huayi.config.callcenter_url + "WOReport/GetChanelList",
+		async: true,
+		dataType: "json",
+		data: {
+//			date:
+		},
+		success: function(data) {
+			if(data.state.toLowerCase() == "success") {
+				var con = data.rows;
+				container5.setOption({
+					title: {
+						text: '渠道类别',
+						textStyle: {
+							//文字颜色
+							color: '#00e9ff',
+							//字体大小
+							　　　　fontSize: 18
+						},
+						x: 'left'
+					},
+					tooltip: {
+						trigger: 'item',
+						formatter: "{a} <br/>{b} : {c} ({d}%)"
+					},
+					legend: {
+						orient: 'vertical',
+						left: 'left'
+					},
+
+					series: [{
+						name: '渠道类别',
+						type: 'pie',
+						radius: '70%',
+						center: ['52%', '50%'],
+						data: [{
+								value: con.Distribution,
+								name: '总经销',
+							    itemStyle:{normal: {
+							    	color: '#113388',
+							      }
+							    }
+							},
+							{
+								value: con.Quotient,
+								name: '二级商',
+								itemStyle:{normal: {
+									color: '#532478',
+								  }
+								}
+							},
+							{
+								value: con.Bigfarmer,
+								name: '种田大户',
+								itemStyle:{normal: {
+									color: '#487565',	
+								  }
+								}
+							},
+							{
+								value: con.Peasant,
+								name: '农户',
+								itemStyle:{normal: {
+									color: '#336699',
+								  }
+								}
+							},
+							{
+								value: con.Customers,
+								name: '化工客户',
+								itemStyle:{normal: {
+									color: '#FFFEEE',
+									
+								  }
+								}
+							},
+							{
+								value:con.Companystaf,
+								name: '公司员工',
+								itemStyle:{normal: {
+									color: '#256EEE',
+									
+								  }
+								}
+							},
+							{
+								value: con.Other,
+								name: '其他',
+								itemStyle:{normal: {
+									color: '#369FFE',
+									
+								  }
+								}
+							}
+						],
+						// itemStyle: {
+						// 	normal: {
+						// 		color: '#159FE9',
+						// 		opacity: 0.5,
+						// 	},
+						// 	emphasis: {
+						// 		shadowBlur: 10,
+						// 		shadowOffsetX: 0,
+						// 		shadowColor: 'rgba(0, 0, 0, 0.5)'
+						// 	}
+						// }
+					}]
+				});
+			}
+		}
+	});
+}
+
+function partTccea() {
+	$.ajax({
+		type: "get",
+		url: huayi.config.callcenter_url + "WOReport/GetbrandList",
+		async: true,
+		dataType: "json",
+		data: {
+//			date:
+		},
+		success: function(data) {
+			if(data.state.toLowerCase() == "success") {
+				var con = data.rows;
+				container6.setOption({
+					title: {
+						text: '品牌',
+						textStyle: {
+							//文字颜色
+							color: '#00e9ff',
+							//字体大小
+							　　　　fontSize: 18
+						},
+						x: 'left'
+					},
+					tooltip: {
+						trigger: 'item',
+						formatter: "{a} <br/>{b} : {c} ({d}%)"
+					},
+					legend: {
+						orient: 'vertical',
+						left: 'left'
+					},
+
+					series: [{
+						name: '品牌',
+						type: 'pie',
+						radius: '60%',
+						center: ['50%', '50%'],
+						data: [{
+								value: con[0].number,
+								name:  con[0].name
+							},
+							{
+								value: con[1].number,
+								name:  con[1].name
+							},
+							{
+								value: con[2].number,
+								name:  con[2].name
+							},
+							{
+								value: con[3].number,
+								name:  con[3].name
+							},
+							{
+								value: con[4].number,
+								name:  con[4].name
+							},
+							{
+								value: con[5].number,
+								name:  con[5].name
+							},
+							{
+								value: con[6].number,
+								name:  con[6].name
+							},
+							{
+								value: con[7].number,
+								name:  con[7].name
+							},
+							{
+								value: con[8].number,
+								name:  con[8].name
+							},
+							{
+								value: con[9].number,
+								name:  con[9].name
+							},
+							{
+								value: con[10].number,
+								name:  con[10].name
+							},
+							{
+								value: con[11].number,
+								name:  con[11].name
+							},
+						],
+						// itemStyle: {
+						// 	normal: {
+						// 		color: '#159FE9',
+						// 		opacity: 0.5,
+						// 	},
+						// 	emphasis: {
+						// 		shadowBlur: 10,
+						// 		shadowOffsetX: 0,
+						// 		shadowColor: 'rgba(0, 0, 0, 0.5)'
+						// 	}
+						// }
+					}]
+				});
+			}
+		}
+	});
+}
+
+function partTaipa() {
+	$.ajax({
+		type: "get",
+		url: huayi.config.callcenter_url + "WOReport/GetFeedbacklList",
+		async: true,
+		dataType: "json",
+		data: {
+//			date:
+		},
+		success: function(data) {
+			if(data.state.toLowerCase() == "success") {
+				var con = data.rows;
+				container7.setOption({
+					title: {
+						text: '反馈类型',
+						textStyle: {
+							//文字颜色
+							color: '#00e9ff',
+							//字体大小
+							fontSize: 18
+						},
+						x: 'center'
+					},
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'cross',
+							label: {
+								show: true,
+								backgroundColor: '#030917'
+							}
+						}
+					},
+					legend: {
+						show: false
+					},
+					xAxis: {
+						name: '产品',
+						data: [
+							con[0].name, 
+							con[1].name, 
+							con[2].name, 
+							con[3].name, 
+							con[4].name
+							// {
+							// 	value: '尿素',
+							// },
+							// {
+							// 	value: '复合肥',
+							// },
+							// {
+							// 	value: '水溶肥',		
+					  //       },
+							// {
+							// 	value: '车用尿素',								
+							// },
+							// {
+							// 	value: '三聚氰胺',								
+							// },
+							// {
+							// 	value: '甲醇',					
+							// },
+							// {
+							// 	value: '糖醇',						
+							// },
+							// {
+							// 	value: '腐植酸',					
+							// },
+							// {
+							// 	value: '二甲醚',	
+							// },
+							// {
+							// 	value: '糖醛',
+							// },
+							// {
+							// 	value: '液氨',
+							// },
+							
+						],
+						axisLine: {
+							lineStyle: {
+								color: '#ccc'
+							}
+						}
+					},
+					yAxis: {
+						name: '数量',
+						splitLine: {
+							show: false
+						},
+						axisLine: {
+							lineStyle: {
+								color: '#fff'
+							}
+						}
+					},
+					series: [
+						// {
+						// 	// name: '电话',
+						// 	type: 'line',
+						// 	data: [
+						// 		con[0].name, 
+						// 		con[1].name, 
+						// 		con[2].name, 
+						// 		con[3].name, 
+						// 		con[4].name 
+						// 	]
+						// },
+						{
+							name: '数量',
+							type: 'line',
+							data: [
+								con[0].number, 
+								con[1].number, 
+								con[2].number, 
+								con[3].number, 
+								con[4].number 
+							]
+						}
+					],
+				});
+			}
+		}
+	});
+}
+// function parthtmc() {
+// 	$.ajax({
+// 		type: "get",
+// 		url: huayi.config.callcenter_url + "WOReport/GetFeedbacklList",
+// 		async: true,
+// 		dataType: "json",
+// 		data: {
+// //			date:
+// 		},
+// 		success: function(data) {
+// 			if(data.state.toLowerCase() == "success") {
+// 				var con = data.rows;
+// 				container8.setOption({
+// 										title: {
+// 						text: '反馈类型',
+// 						textStyle: {
+// 							//文字颜色
+// 							color: '#00e9ff',
+// 							//字体大小
+// 							fontSize: 18
+// 						},
+// 						x: 'center'
+// 					},
+// 					color: ['#3398DB'],
+// 					tooltip: {
+// 						trigger: 'axis',
+// 						axisPointer: { // 坐标轴指示器，坐标轴触发有效
+// 							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+// 						}
+// 					},
+// 					grid: {
+// 						left: '3%',
+// 						right: '4%',
+// 						bottom: '13%',
+// 						containLabel: true
+// 					},
+// 					xAxis: [{
+// 						type: 'category',
+// 						data: [
+// 							con[0].name, 
+// 							con[1].name, 
+// 							con[2].name, 
+// 							con[3].name, 
+// 							con[4].name
+// 							// {
+// 							// 	value: '咨询',
+// 							// },
+// 							// {
+// 							// 	value: '投诉',
+// 							// },
+// 							// {
+// 							// 	value: '抽检',		
+// 							// },
+// 							// {
+// 							// 	value: '建议及其他',								
+// 							// },
+// 							
+// 						],
+// 						axisTick: {
+// 							alignWithLabel: true
+// 						},
+// 						axisLine: {
+// 							lineStyle: {
+// 								color: '#ccc'
+// 							}
+// 						}
+// 					}],
+// 					yAxis: [{
+// 						type: 'value',
+// 						axisLine: {
+// 							lineStyle: {
+// 								color: '#fff'
+// 							}
+// 						}
+// 					}],
+// 					series: [{
+// 						name: '数量',
+// 						type: 'bar',
+// 						barWidth: '60%',
+// 						data: [
+// 							con[0].number, 
+// 							con[1].number, 
+// 							con[2].number, 
+// 							con[3].number, 
+// 							con[4].number
+// 						]
+// 					}]
+// 				});
+// 			}
+// 		}
+// 	});
+// }