XinXiangXLX_UI/WebChart/js/pieChat.js

var container1 = echarts.init(document.getElementById('part1'));
var container2 = echarts.init(document.getElementById('part2'));
var container3 = echarts.init(document.getElementById('part3'));


// var container7 = echarts.init(document.getElementById('patt7')); //大屏六个图

function partOne() {
	$.ajax({
		type: "get",
		url: huayi.config.callcenter_url + "WOReport/GetChannel",
		async: true,
		dataType: "json",
		data: {},
		success: function(data) {
			if(data.state.toLowerCase() == "success") {
				var con = data.rows;
				container1.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].channel, 
							con[1].channel, 
							con[2].channel, 
							con[3].channel, 
							con[4].channel
						],
						axisLine: {
							lineStyle: {
								color: '#ccc'
							}
						}
					},
					yAxis: {
						name: '数量',
						splitLine: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#fff'
							}
						}
					},
					series: [{
							name: '电话',
							type: 'line',
							data: [
								con[0].Telephone, 
								con[1].Telephone, 
								con[2].Telephone, 
								con[3].Telephone, 
								con[4].Telephone 
							]
						},
						{
							name: '微信',
							type: 'line',
							data: [
								con[0].WeChat, 
								con[1].WeChat, 
								con[2].WeChat, 
								con[3].WeChat, 
								con[4].WeChat 
							]
						}
					],
					color: ['#61a0a9', '#cb885d']

				});
				
			}
		}
	});
}

function partTwo() {
	$.ajax({
		type: "get",
		url: huayi.config.callcenter_url + "WOReport/GetChannel",
		async: true,
		dataType: "json",
		data: {
//			date:
		},
		success: function(data) {
			if(data.state.toLowerCase() == "success") {
				var con = data.rows;
				container2.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: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: [
							con[0].channel, 
							con[1].channel, 
							con[2].channel, 
							con[3].channel, 
							con[4].channel
						],
						axisTick: {
							alignWithLabel: true
						},
						axisLine: {
							lineStyle: {
								color: '#ccc'
							}
						}
					}],
					yAxis: [{
						type: 'value',
						axisLine: {
							lineStyle: {
								color: '#ccc'
							}
						}
					}],
					series: [{
						name: '即时办结',
						type: 'bar',
						barWidth: '60%',
						data: [
							con[0].Immediate, 
							con[1].Immediate, 
							con[2].Immediate, 
							con[3].Immediate, 
							con[4].Immediate
						]
					}]
				});
			}
		}
	});
}

function partThree() {
	$.ajax({
		type: "get",
		url: huayi.config.callcenter_url + "WOReport/GetChannel",
		async: true,
		dataType: "json",
		data: {
//			date:
		},
		success: function(data) {
			if(data.state.toLowerCase() == "success") {
				var con = data.rows;
				container3.setOption({
					title: {
						text: '转接率图表',
						textStyle: {
							//文字颜色
							color: '#00e9ff',
							//字体大小
							　　　　fontSize: 18
						},
						x: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend: {
						orient: 'vertical',
						left: 'left'
					},

					series: [{
						name: '访问来源',
						type: 'pie',
						radius: '55%',
						center: ['50%', '60%'],
						data: [{
								value: con[0].Transfer,
								name: con[0].channel
							},
							{
								value: con[1].Transfer,
								name: con[1].channel
							},
							{
								value: con[2].Transfer,
								name: con[2].channel
							},
							{
								value: con[3].Transfer,
								name: con[3].channel
							},
							{
								value: con[4].Transfer,
								name: con[4].channel
							}
						],
						itemStyle: {
							normal: {
								color: '#159FE9',
								opacity: 0.5,
							},
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				});
			}
		}
	});
}

function partFour() {
	$.ajax({
		type: "get",
		url: huayi.config.callcenter_url + "WOReport/GetChannel",
		async: true,
		dataType: "json",
		data: {
			channel:$(".channelSel").val()
		},
		success: function(data) {
			if(data.state.toLowerCase() == "success") {
				var con = data.rows;
				var option={
					title: {
						text: '渠道来源满意度',
						x: 'left',
						textStyle: {
							//文字颜色
							color: '#00e9ff',
							//字体大小
							　　　　fontSize: 18
						}
					},
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend: {
						orient: 'vertical',
						left: 'left'
					},
					series: [{
						name: '访问来源',
						type: 'pie',
						radius: '55%',
						center: ['50%', '60%'],
						data: [{
								value: con[0].Verysatisfied,
								name: '非常满意'
							},
							{
								value: con[0].Satisfaction,
								name: '满意'
							},
							{
								value: con[0].Commonly,
								name: '一般'
							},
							{
								value: con[0].Unsatisfactory,
								name: '不满意'
							}
						],
						itemStyle: {
							normal: {
								color: '#159FE9',
								opacity: 0.5,
							},
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				}
			
				echartsPie = echarts.init(document.getElementById('part4'));
				echartsPie.setOption(option);
				//var container4 = echarts.init(document.getElementById('part4'));
			}
		}
	});
}


// 第四屏
// function partpaat() {
// 	$.ajax({
// 		type: "get",
// 		url: huayi.config.callcenter_url + "WOReport/GetChannel",
// 		async: true,
// 		dataType: "json",
// 		data: {},
// 		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].channel, 
// 							con[1].channel, 
// 							con[2].channel, 
// 							con[3].channel, 
// 							con[4].channel
// 						],
// 						axisLine: {
// 							lineStyle: {
// 								color: '#ccc'
// 							}
// 						}
// 					},
// 					yAxis: {
// 						name: '数量',
// 						splitLine: {
// 							show: false
// 						},
// 						axisLine: {
// 							lineStyle: {
// 								color: '#fff'
// 							}
// 						}
// 					},
// 					series: [{
// 							name: '电话',
// 							type: 'bar',
// 							barWidth:20,
// 							data: [
// 								con[0].Telephone, 
// 								con[1].Telephone, 
// 								con[2].Telephone, 
// 								con[3].Telephone, 
// 								con[4].Telephone 
// 							]
// 						},
// 						{
// 							name: '微信',
// 							type: 'line',
// 							data: [
// 								con[0].WeChat, 
// 								con[1].WeChat, 
// 								con[2].WeChat, 
// 								con[3].WeChat, 
// 								con[4].WeChat 
// 							]
// 						},
// 						 {
// 							type: 'pie',
// 							id: 'pie',
// 							radius: '40%',
// 							center: ['60%', '30%'],
// 							label: {
// 								formatter: '{b}: {@2012} ({d}%)'
// 							},
// 							encode: {
// 								itemName: 'product',
// 								value: '2012',
// 								tooltip: '2012'
// 							}
// 						}
// 					],
// 					color: ['#61a0a9', '#cb885d']
// 
// 				});
// 				
// 			}
// 		}
// 	});
// }