AnYang_UI/anyangWeb.UI/js/index.js

//一级
var myChart = echarts.init(document.getElementById('main'));
var myChart1 = echarts.init(document.getElementById('main1'));
var myChart3 = echarts.init(document.getElementById('main3'));
var img = './images/frame.png'
chart1(); //话务坐席情况
chart2(); //受理渠道统计
chart3(); //今日受理量统计
chart4(); //受理关键词热度分析
areaMap(); //地图
traffic_chart()
acceptance_chart()
channel_chart()
keyword_chart()

function chart1() {
	option = {
		legend: {
			top: "20",
			x: "center",
			textStyle: {
				fontSize: 12,
				color: "rgba(101, 213, 255, 1)"
			},
			icon: "path://M512 881.777778 512 881.777778C716.222629 881.777778 881.777778 716.222629 881.777778 512 881.777778 307.777371 716.222629 142.222222 512 142.222222 307.777373 142.222222 142.222222 307.777371 142.222222 512 142.222222 716.222629 307.777373 881.777778 512 881.777778L512 881.777778ZM512 1024 512 1024C229.230208 1024 0 794.769789 0 512 0 229.230211 229.230208 0 512 0 794.769789 0 1024 229.230211 1024 512 1024 794.769789 794.769789 1024 512 1024L512 1024Z",
			itemWidth: 8, // 设置宽度
			itemHeight: 8, // 设置高度、
			itemGap: 12 // 设置间距
		},
		tooltip: {
			trigger: 'item',
			axisPointer: {
				show: true,
				type: 'line',
				lineStyle: {
					type: 'dashed'
				}
			},
			textStyle: {
				color: '#ffe400',
				fontSize: '20',
				fontWeight: '500'
			},
			position: 'top',
			backgroundColor: 'rgba(250,250,250,0)',
			transitionDuration: 0.4,
			formatter: function(params) {
				return '<div style="background-image: url(images/reminder_box2.png);width:80px;height:43px;line-height:40px;background-size: 100% 100%;text-align:center;">' +
					params.value + '</div>';
			}
		},

		grid: {
			right: "5%",
			top: "20%",
			left: "5%",
			bottom: "5%",
			containLabel: true
		},
		xAxis: {
			type: "category",
			boundaryGap: true,
			data: ['坐席数量', '签入', '通话中', '话后处理', '置忙', '置闲', '离线'],
			axisLabel: {
				//坐标轴刻度标签的相关设置。
				interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
				//	margin:15,
				textStyle: {
					color: "#fff",
					fontStyle: "normal",
					fontSize: 10
				}
			},
			axisTick: {
				//坐标轴刻度相关设置。
				show: false
			},
			axisLine: {
				//坐标轴轴线相关设置
				lineStyle: {
					color: "#036376"
				}
			},
			splitLine: {
				//坐标轴在 grid 区域中的分隔线。
				show: false,
				lineStyle: {
					color: "rgba(77, 128, 254, 0.2)"
				}
			}
		},
		yAxis: [{
			type: "value",
			splitNumber: 3,
			axisLabel: {
				textStyle: {
					color: "#fff",
					fontStyle: "normal",
					fontSize: 12
				},
				formatter: function() {
					return "";
				}
			},
			axisLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			splitLine: {
				show: false,
				lineStyle: {
					color: "rgba(77, 128, 254, 0.2)"
				}
			}
		}],
		series: [{
			type: "pictorialBar",
			barWidth: "75%",
			stack: "总量",
			label: {
				normal: {
					show: false
				}
			},
			itemStyle: {
				normal: {
					color: {
						type: "linear",
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [{
								offset: 0,
								color: "#00edfc" // 0% 处的颜色
							},
							{
								offset: 1,
								color: "#05293d" // 100% 处的颜色
							}
						],
						globalCoord: false // 缺省为 false
					} //渐变颜色
				}
			},
			emphasis: {
				itemStyle: {
					color: new echarts.graphic.LinearGradient(
						0, 0, 0, 1,
						[{
								offset: 0,
								color: '#fde301'
							},
							{
								offset: 1,
								color: '#0a2f3e'
							}
						]
					)
				}
			},
			symbol: "path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z",

			data: [901, 845, 750, 875, 654, 832, 600]
		}],
	};
	myChart.setOption(option);
}

function chart2() {
	option = {
		// backgroundColor: '#031d33',
		"textStyle": {
			"color": "#c0c3cd",
			"fontSize": 10
		},
		"toolbox": {
			"show": false,
			"feature": {
				"saveAsImage": {
					"backgroundColor": "#031245"
				},
				"restore": {}
			},
			"iconStyle": {
				"borderColor": "#c0c3cd"
			}
		},
		"legend": {
			"top": 10,
			"itemWidth": 8,
			"itemHeight": 8,
			"icon": "circle",
			"left": "center",
			"padding": 0,
			"textStyle": {
				"color": "#c0c3cd",
				"fontSize": 10,
				"padding": [2, 0, 0, 0]
			}
		},
		"color": ["#63caff", "#49beff", "#395568", "#395568", "#395568", "#6c93ee", "#a9abff", "#f7a23f", "#27bae7",
			"#ff6d9d", "#cb79ff", "#f95b5a", "#ccaf27", "#38b99c", "#93d0ff", "#bd74e0", "#fd77da", "#dea700"
		],
		"grid": {
			"containLabel": true,
			"left": 20,
			"right": 20,
			"bottom": 10,
			"top": 40
		},
		"xAxis": {
			"nameTextStyle": {
				"color": "#c0c3cd",
				"padding": [0, 0, -10, 0],
				"fontSize": 10
			},
			"axisLabel": {
				"color": "#c0c3cd",
				"fontSize": 10,
				"interval": 0
			},
			"axisTick": {
				"lineStyle": {
					"color": "#384267",
					"width": 1
				},
				"show": true
			},
			"splitLine": {
				"show": false
			},
			"axisLine": {
				"lineStyle": {
					"color": "#384267",
					"width": 1,
					"type": "solid"
				},
				"show": true
			},
			"data": ["电话", "市长信箱", "人名网", "连线政府", "省政务网", "微信"],
			"type": "category"
		},
		"yAxis": {
			"nameTextStyle": {
				"color": "#c0c3cd",
				"padding": [0, 0, 10, -5],
				"fontSize": 10
			},
			"axisLabel": {
				"color": "#c0c3cd",
				"fontSize": 10
			},
			"axisTick": {
				"lineStyle": {
					"color": "#384267",
					"width": 1
				},
				"show": true
			},
			"splitLine": {
				"show": true,
				"lineStyle": {
					"color": "#384267",
					"type": "dashed"
				}
			},
			"axisLine": {
				"lineStyle": {
					"color": "#384267",
					"width": 1,
					"type": "solid"
				},
				"show": true,
				// "symbol":['none', 'arrow'],
				"symbol": ['none', 'path://M5, 20 L5, 5 L8, 8 L5, 2 L2, 8 L5, 5 L5.3, 6 L5.3,                  20'],
				'symbolOffset': 5,
				'symbolSize': [35, 38],
			},
			"name": "条"
		},
		"series": [{
				"data": [1500, 1148, 756, 1395, 1750, 1148],
				"type": "bar",
				"barMaxWidth": "auto",
				"barWidth": 15,
				"itemStyle": {
					"color": {
						"x": 0,
						"y": 0,
						"x2": 0,
						"y2": 1,
						"type": "linear",
						"global": false,
						"colorStops": [{
							"offset": 0,
							"color": "#3ffeea"
						}, {
							"offset": 1,
							"color": "#0181ff"
						}]
					},
					barBorderRadius: [30, 30, 0, 0]
				},
				"label": {
					"show": false,
					"position": "top",
					"distance": 10,
					"color": "#fff",
					"position": [30, 10],
				}
			}, {
				"data": [1, 1, 1, 1, 1, 1],
				"type": "pictorialBar",
				"barMaxWidth": "20",
				"symbol": "none",
			},
			{
				// "data": [1500, 1148, 756, 1395, 1750, 1148],
				"type": "pictorialBar",
				"barMaxWidth": "20",
				"symbolPosition": "end",
				"symbol": "none",
				"symbolOffset": [0, "-50%"],
				"symbolSize": [30, 12],
				"zlevel": 1
			},
			{
				"data": [2000, 2000, 2000, 2000, 2000, 2000],
				"type": "bar",
				"barMaxWidth": "auto",
				"barWidth": 15,
				"barGap": "-100%",
				"zlevel": -1
			}, {
				"data": [1, 1, 1, 1, 1, 1],
				"type": "pictorialBar",
				"barMaxWidth": "20",
				"symbol": "none",
				"symbolOffset": [0, "50%"],
				"symbolSize": [30, 15],
				"zlevel": -2
			}, {
				"data": [2000, 2000, 2000, 2000, 2000, 2000],
				"type": "pictorialBar",
				"barMaxWidth": "20",
				"symbolPosition": "end",
				"symbol": "circle",
				"symbolOffset": [0, "-60%"],
				"symbolSize": [15, 12],
				"zlevel": -1
			},
		],
		"tooltip": {
			"trigger": "axis",
			"show": false
		}
	}
	myChart1.setOption(option);
}

function chart3() {
	var traffic = [{
		name: '呼出',
		value: 304
	}, {
		name: '呼入',
		value: 600
	}, {
		name: '接通',
		value: 296
	}];
	var workOrder = [{
		name: '处理',
		value: 304
	}, {
		name: '录入',
		value: 600
	}, {
		name: '完结',
		value: 296
	}];
	acceptStatistics('main2', traffic)
	acceptStatistics('main5', workOrder)
}

function acceptStatistics(dom, dataList) {
	let myChart = echarts.init(document.getElementById(dom));
	var data = [];
	var color = ['#00ffff', '#ffe000', '#006ced']
	for (var i = 0; i < dataList.length; i++) {
		data.push({
			value: dataList[i].value,
			name: dataList[i].name,
			itemStyle: {
				normal: {
					borderWidth: 3,
					shadowBlur: 10,
					borderColor: color[i],
					shadowColor: color[i]
				}
			}
		});
	}
	var seriesOption = [{
		name: '',
		type: 'pie',
		clockWise: false,
		radius: [35, 37],
		hoverAnimation: false,
		itemStyle: {
			normal: {
				label: {
					show: true,
					position: 'outside',
					color: '#ddd',
					formatter: function(params) {
						if (params.name !== '') {
							return params.name + '：' + params.value;
						} else {
							return '';
						}
					},
					padding: [0, -50, 25, -30]
				},
				labelLine: {
					length: 0,
					length2: 40,
					show: true,
					color: '#00ffff',
					lineStyle: {
						width: 2,
						join: 'bevel'
					},
					minTurnAngle: 180
				},
				borderWidth: 1,

			}
		},
		data: data
	}];
	option = {
		color: color,
		title: {
			text: '',
			top: '48%',
			textAlign: "center",
			left: "49%",
			textStyle: {
				color: '#fff',
				fontSize: 22,
				fontWeight: '400'
			}
		},
		graphic: {
			elements: [{
				type: "image",
				z: 3,
				style: {
					image: img,
					width: 59,
					height: 59
				},
				left: 'center',
				top: 'center',
				position: [100, 100]
			}]
		},

		tooltip: {
			show: false
		},
		toolbox: {
			show: false
		},
		series: seriesOption
	}
	myChart.setOption(option);
}

function chart4() {
	var reslult = [{
			name: "劳动和社会保障",
			value: 90,
			color: "#d1c00d",
			position: [0, 50],
			fontSize: "14",
			number: "4",
		},
		{
			name: "公共安全",
			value: 70,
			color: "#d1c00d",
			position: [22, 40],
			fontSize: "14",
			number: "4",
		},
		{
			name: "环境保护",
			value: 65,
			color: "#d1c00d",
			position: [25, 65],
			number: "4",
			fontSize: "14",
		},
		{
			name: "公共服务",
			value: 95,
			color: "#064d60",
			position: [45, 50],
			number: "4",
			fontSize: "16"
		},
		{
			name: "文体教育",
			value: 75,
			color: "#03d1d3",
			position: [95, 66],
			fontSize: "14",
			number: "4",
		},
		{
			name: "营商管理",
			value: 65,
			color: "#03d1d3",
			position: [70, 58],
			fontSize: "14",
			number: "4",
		},
		{
			name: "卫生健康",
			value: 65,
			color: "#00FFFF",
			position: [70, 38],
			number: "4",
			fontSize: "14",
		},
		{
			name: "交通管理",
			value: 75,
			color: "#00FFFF",
			position: [90, 47],
			fontSize: "14",
			number: "4",
		},
	];
	var data = [];
	// 渲染数据，并写入chart
	reslult.map((item) => {
		data.push({
			name: item.name,
			value: item.position,
			symbolSize: item.value,
			label: {
				normal: {
					formatter: function(param) {
						var newParamsName = ""; //返回文字格式
						var paramsNameNumber = param.name.length; //获取显示文字长度
						var number = parseInt(item.number); //超过多少字换行
						var rowNumber = Math.ceil(paramsNameNumber / number); //最多能显示几行
						if (paramsNameNumber > number) {
							//如果长度大于每行最多显示的字数
							for (var p = 0; p < rowNumber; p++) {
								//循环次数就是行数
								var tempStr = ""; //每次截取的字符
								var start = p * number; //截取的起点
								var end = start + number; //截取的终点
								if (p == rowNumber - 1) {
									//最后一行就不换行了
									tempStr = param.name.substring(start);
								} else {
									tempStr = param.name.substring(start, end) + "\n";
								}
								newParamsName += tempStr; //拼接字符串
							}
						} else {
							newParamsName = param.name; //如果小于每行最多显示的字数就返回原来的字符串
						}
						return newParamsName;
					},
					show: true,
					textStyle: {
						fontSize: item.fontSize,
						fontFamily: "Microsoft YaHei",
						color: "#FFFFFF",
						fontWeight: "bold",
						opacity: 1,
					},
				},
			},
			itemStyle: {
				normal: { //右 下 左
					color: new echarts.graphic.RadialGradient(0, 0, 1, [{
							offset: 0.2,
							color: "#2a413b",
						},
						{
							offset: 1,
							color: item.color,
						},
					]),
					opacity: 1,
					borderWidth: 1,
					borderColor: item.color,
				},
			},
		});
	});
	option = {
		// backgroundColor:'#092844',
		grid: {
			show: false,
			top: 10,
			bottom: 10,
		},
		xAxis: [{
			gridIndex: 0,
			type: "value",
			show: false,
			min: 0,
			max: 100,
			nameLocation: "middle",
			nameGap: 5,
		}, ],
		yAxis: [{
			gridIndex: 0,
			min: 0,
			show: false,
			max: 100,
			nameLocation: "middle",
			nameGap: 30,
		}, ],

		series: [{
			type: "scatter",
			symbol: "circle",
			symbolSize: 120,
			label: {
				normal: {
					show: true,
					formatter: "{b}",
					color: "#fff",
					textStyle: {
						fontSize: "20",
					},
				},
			},
			animationDurationUpdate: 500,
			animationEasingUpdate: 500,
			animationDelay: function(idx) {
				// 越往后的数据延迟越大
				return idx * 100;
			},
			data: data,
		}, ],
	}
	myChart3.setOption(option)
}

function areaMap() {
	$('.lzmap,.aymap,.lamap,.bgmap,.gxmap,.ydmap,.wfmap,.tymap,.nhmap,.hxmap').mouseleave(function(e) {
		$('.wrap').css({
			'display': 'none'
		})
	})
	$('.map').mouseover(function(e) {
		if (e.target.tagName != 'LI') {
			return;
		}

		if ($(e.target).text() == '林州市') {
			$('.wrap').css({
				'display': 'block',
				'top': '30px',
				'left': '35px'
			})
		}
		if ($(e.target).text() == '安阳县') {
			$('.wrap').css({
				'display': 'block',
				'top': '-59px',
				'left': '161px'
			})
		}
		if ($(e.target).text() == '滑县') {
			$('.wrap').css({
				'display': 'block',
				'top': '343px',
				'left': '439px'
			})
		}
		if ($(e.target).text() == '龙安区') {
			$('.wrap').css({
				'display': 'block',
				'top': '-53px',
				'left': '240px'
			})
		}
		if ($(e.target).text() == '北关区') {
			$('.wrap').css({
				'display': 'block',
				'top': '-58px',
				'left': '279px'
			})
		}
		if ($(e.target).text() == '高新区') {
			$('.wrap').css({
				'display': 'block',
				'top': '-26px',
				'left': '270px'
			})
		}
		if ($(e.target).text() == '殷都区') {
			$('.wrap').css({
				'display': 'block',
				'top': '-13px',
				'left': '228px'
			})
		}
		if ($(e.target).text() == '文峰区') {
			$('.wrap').css({
				'display': 'block',
				'top': '-13px',
				'left': '300px'
			})
		}
		if ($(e.target).text() == '汤阴县') {
			$('.wrap').css({
				'display': 'block',
				'top': '90px',
				'left': '327px'
			})
		}
		if ($(e.target).text() == '内黄县') {
			$('.wrap').css({
				'display': 'block',
				'top': '76px',
				'left': '501px'

			})
		}
	})
}

//二级大屏数据
$('.call_situation').click(function() {
	$('.bulletFrame').show();
	$('.traffic_wrap').show();
	$('.traffic_wrap').siblings().hide()
})
$('.accept_statistics').click(function() {
	$('.bulletFrame').show();
	$('.acceptance_wrap').show();
	$('.acceptance_wrap').siblings().hide()
})
$('.accept_channel').click(function() {
	$('.bulletFrame').show();
	$('.channel_wrap').show();
	$('.channel_wrap').siblings().hide()
})
$('.key_word').click(function() {
	$('.bulletFrame').show();
	$('.keyword_wrap').show();
	$('.keyword_wrap').siblings().hide()
})
$('.time_statistics').click(function() {
	$('.bulletFrame').show();
	$('.timeSta_wrap').show();
	$('.timeSta_wrap').siblings().hide()
})
$('.close_icon').click(function() {
	$('.bulletFrame').hide();
})

function traffic_chart() {
	let trafficChart = echarts.init(document.getElementById('traffic'));
	trafficChart.resize();
	let option = {
		// color: ['#8effad', '#2ddffe', '#39a5fc', '#ff9126', '#fa0084'],
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				show: true,
				type: 'line',
				lineStyle: {
					type: 'dashed'
				}
			},
			textStyle: {
				color: '#ffe400',
				fontSize: '12'
			},
			// position:'top',
			backgroundColor: 'rgba(250,250,250,0)',
			// transitionDuration: 0.4,
			formatter: function(params) {
				let str =
					'<div style="background-image: url(images/secondary_img/reminder_box3.png);width:124px;height:135px;line-height:22px;background-size: 100% 100%;text-align:center;padding-top:8px;">'
				params.forEach(function(v, n) {
					str += '<div class="contNum" style="">' + v.seriesName + ': ' + v.value + '</div>'
				})
				str += '</div>';
				return str;
			}
		},
		legend: {
			data: ['总数', '咨询', '求助', '建议', '投诉']
		},
		toolbox: {
			feature: {
				saveAsImage: {}
			}
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: [{
			type: 'category',
			boundaryGap: false,
			axisLabel: {
				color: "#f4f5f5",
				fontSize: 14
			},
			data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00',
				'10:00', '11:00',
				'12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00',
				'21:00', '22:00', '23:00', '24:00'
			]
		}],
		yAxis: [{
			nameTextStyle: {
				color: "#f4f5f5",
				padding: [0, 0, 10, -5],
				fontSize: 10
			},
			axisLabel: {
				color: "#f4f5f5",
				fontSize: 10
			},
			axisTick: {
				lineStyle: {
					color: "#687f8a",
					width: 1
				},
				show: true
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: "#687f8a",
					type: "dashed"
				}
			},
			axisLine: {
				lineStyle: {
					color: "#687f8a",
					width: 1,
					type: "solid"
				},
				show: true,
				// "symbol":['none', 'arrow'],
				symbol: ['none',
					'path://M5, 20 L5, 5 L8, 8 L5, 2 L2, 8 L5, 5 L5.3, 6 L5.3,                  20'
				],
				symbolOffset: 5,
				symbolSize: [35, 38],
			},
			name: "条"
		}],
		series: [{
				name: '总数',
				type: 'line',
				stack: '总量',
				smooth: true,
				showSymbol: false,
				lineStyle: {
					width: 0
				},
				areaStyle: {
					opacity: 0.8,
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: 'rgba(128, 255, 165)'
					}, {
						offset: 1,
						color: 'rgba(1, 191, 236)'
					}])
				},
				emphasis: {
					focus: 'series'
				},
				itemStyle: {
					normal: {
						color: 'rgb(128, 255, 165)',
						borderWidth: 0

					}
				},

				data: [540, 632, 401, 864, 500, 640, 750, 540, 632, 301, 464, 560, 640, 750, 440, 632, 401, 564,
					690, 340, 850, 740, 632, 401, 600
				]
			},
			{
				name: '咨询',
				type: 'line',
				stack: '总量',
				smooth: true,
				lineStyle: {
					width: 0
				},
				showSymbol: false,
				areaStyle: {
					opacity: 0.8,
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: 'rgba(0, 221, 255)'
					}, {
						offset: 1,
						color: 'rgba(77, 119, 255)'
					}])
				},
				itemStyle: {
					normal: {
						color: 'rgb(0, 221, 255)',
						borderWidth: 2

					}
				},
				emphasis: {
					focus: 'series'
				},
				data: [120, 282, 111, 234, 220, 340, 310, 120, 282, 111, 234, 220, 340, 310, 120, 282, 111, 234,
					220, 340, 310, 120, 282, 111, 125
				]
			},
			{
				name: '求助',
				type: 'line',
				stack: '总量',
				smooth: true,
				lineStyle: {
					width: 0
				},
				showSymbol: false,
				areaStyle: {
					opacity: 0.8,
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: 'rgba(55, 162, 255)'
					}, {
						offset: 1,
						color: 'rgba(116, 21, 219)'
					}])
				},
				itemStyle: {
					normal: {
						color: 'rgb(55, 162, 255)',
						borderWidth: 2

					}
				},
				emphasis: {
					focus: 'series'
				},
				data: [320, 132, 201, 334, 190, 130, 220, 320, 132, 201, 334, 190, 130, 220, 320, 132, 201, 334,
					190, 130, 220, 320, 132, 201, 210
				]
			},
			{
				name: '建议',
				type: 'line',
				stack: '总量',
				smooth: true,
				lineStyle: {
					width: 0
				},
				showSymbol: false,
				areaStyle: {
					opacity: 0.8,
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: 'rgba(255, 0, 135)'
					}, {
						offset: 1,
						color: 'rgba(135, 0, 157)'
					}])
				},
				itemStyle: {
					normal: {
						color: 'rgb(255, 0, 135)',
						borderWidth: 2

					}
				},
				emphasis: {
					focus: 'series'
				},
				data: [220, 402, 231, 134, 190, 230, 120, 270, 402, 231, 134, 190, 230, 120, 220, 402, 231, 134,
					190, 230, 120, 220, 402, 231, 156
				]
			},
			{
				name: '投诉',
				type: 'line',
				stack: '总量',
				smooth: true,
				lineStyle: {
					width: 0
				},
				showSymbol: false,
				label: {
					show: true,
					position: 'top'
				},
				areaStyle: {
					opacity: 0.8,
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: 'rgba(255, 191, 0)'
					}, {
						offset: 1,
						color: 'rgba(224, 62, 76)'
					}])
				},
				itemStyle: {
					normal: {
						color: 'rgb(255, 191, 0)',
						borderWidth: 2

					}
				},
				emphasis: {
					focus: 'series'
				},
				data: [220, 302, 181, 234, 210, 290, 150, 220, 302, 181, 234, 210, 290, 150, 220, 302, 181, 234,
					210, 290, 150, 220, 302, 181, 106
				]
			}
		]
	};
	trafficChart.setOption(option);
}

function acceptance_chart() {
	let acceptanceChart = echarts.init(document.getElementById('acceptance'));
	option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				show: true,
				type: 'line',
				lineStyle: {
					type: 'dashed'
				}
			},
			textStyle: {
				color: '#ffe400',
				fontSize: '12'
			},
			// position:'top',
			backgroundColor: 'rgba(250,250,250,0)',
			// transitionDuration: 0.4,
			formatter: function(params) {
				let str =
					'<div style="background-image: url(images/secondary_img/reminder_box3.png);width:124px;height:150px;line-height:22px;background-size: 100% 100%;text-align:center;padding-top:8px;">'
				let connectionRate = (params[1].value / params[0].value).toFixed(1) * 100 + '%';
				let workorderRate = (params[3].value / params[2].value).toFixed(1) * 100 + '%';
				params.splice(2, 0, {
					seriesName: '电话接通率',
					value: connectionRate
				})
				params.splice(5, 0, {
					seriesName: '工单直办率',
					value: workorderRate
				})
				params.forEach(function(v, n) {
					str += '<div class="contNum" style="">' + v.seriesName + ': ' + v.value + '</div>'
				})
				str += '</div>';
				return str;
			}
		},
		legend: {
			data: ['电话呼入量', '电话接通量', '工单录入量', '工单直办量']
		},
		toolbox: {
			feature: {
				saveAsImage: {}
			}
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: [{
			type: 'category',
			boundaryGap: false,
			axisLabel: {
				color: "#f4f5f5",
				fontSize: 14
			},
			data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00',
				'10:00', '11:00',
				'12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00',
				'21:00', '22:00', '23:00', '24:00'
			]
		}],
		yAxis: [{
			nameTextStyle: {
				color: "#f4f5f5",
				padding: [0, 0, 10, -5],
				fontSize: 14
			},
			axisLabel: {
				color: "#f4f5f5",
				fontSize: 14
			},
			axisTick: {
				lineStyle: {
					color: "#687f8a",
					width: 1
				},
				show: true
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: "#687f8a",
					type: "dashed"
				}
			},
			axisLine: {
				lineStyle: {
					color: "#687f8a",
					width: 1,
					type: "solid"
				},
				show: true,
				// "symbol":['none', 'arrow'],
				symbol: ['none',
					'path://M5, 20 L5, 5 L8, 8 L5, 2 L2, 8 L5, 5 L5.3, 6 L5.3,                  20'
				],
				symbolOffset: 5,
				symbolSize: [35, 38],
			},
			name: "条"
		}],
		series: [{
			name: '电话呼入量',
			type: 'line',
			smooth: true,
			// symbol: 'circle',
			symbolSize: 5,
			showSymbol: false,
			lineStyle: {
				normal: {
					width: 1
				}
			},
			areaStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: '#399d85'
					}, {
						offset: 0.8,
						color: '#257f76'
					}], false),
					shadowColor: 'rgba(0, 0, 0, 0.1)',
					shadowBlur: 10
				}
			},
			itemStyle: {
				normal: {
					color: '#74e4a0',
					borderColor: '#74e4a0',
					borderWidth: 2

				}
			},
			data: [50, 72, 81, 94, 100, 102, 110, 125, 145, 152, 165, 172, 150, 142, 131, 130, 120, 115,
				110, 105, 95, 82, 65, 52, 44
			]
		}, {
			name: '电话接通量',
			type: 'line',
			smooth: true,
			// symbol: 'circle',
			symbolSize: 5,
			showSymbol: false,
			lineStyle: {
				normal: {
					width: 1
				}
			},
			areaStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: '#2fb2b3'
					}, {
						offset: 0.8,
						color: '#0b4856'
					}], false),
					shadowColor: 'rgba(0, 0, 0, 0.1)',
					shadowBlur: 10
				}
			},
			itemStyle: {
				normal: {
					color: '#2ddffe',
					borderColor: '#2ddffe',
					borderWidth: 2

				}
			},
			data: [40, 50, 55, 65, 72, 85, 92, 100, 115, 121, 134, 145, 140, 133, 125, 115, 102, 95, 82, 70,
				62, 51, 44, 30, 22
			]
		}, {
			name: '工单录入量',
			type: 'line',
			smooth: true,
			// symbol: 'circle',
			symbolSize: 5,
			showSymbol: false,
			lineStyle: {
				normal: {
					width: 1
				}
			},
			areaStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: '#157cb8'
					}, {
						offset: 0.8,
						color: '#09354c'
					}], false),
					shadowColor: 'rgba(0, 0, 0, 0.1)',
					shadowBlur: 10
				}
			},
			itemStyle: {
				normal: {

					color: '#39a5fc',
					borderColor: '#39a5fc',
					borderWidth: 2
				}
			},
			data: [20, 32, 45, 55, 62, 71, 84, 90, 98, 110, 115, 120, 118, 112, 105, 95, 82, 71, 64, 50, 50,
				40, 35, 22, 11
			]
		}, {
			name: '工单直办量',
			type: 'line',
			smooth: true,
			// symbol: 'circle',
			symbolSize: 5,
			showSymbol: false,
			lineStyle: {
				normal: {
					width: 1
				}
			},
			areaStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: '#dd8d38'
					}, {
						offset: 0.8,
						color: '#225f67'
					}], false),
					shadowColor: 'rgba(0, 0, 0, 0.1)',
					shadowBlur: 10
				}
			},
			itemStyle: {
				normal: {

					color: '#dd8d38',
					borderColor: '#dd8d38',
					borderWidth: 2
				}
			},
			data: [10, 15, 18, 24, 28, 32, 36, 50, 55, 66, 75, 72, 63, 56, 50, 46, 35, 30, 26, 20, 18, 15,
				12, 10, 5
			]
		}]
	};
	acceptanceChart.setOption(option);
}

function channel_chart() {
	let channelChart = echarts.init(document.getElementById('channel'));
	let data = [{
			level: '电话',
			landArea: 1526
		},
		{
			level: '市长信箱',
			landArea: 890
		},
		{
			level: '人名网',
			landArea: 856
		},
		{
			level: '连线政府',
			landArea: 926
		},
		{
			level: '省政务网',
			landArea: 1756
		},
		{
			level: '微信',
			landArea: 1621
		},
		{
			level: '微博',
			landArea: 1821
		},
		{
			level: '短信平台',
			landArea: 700
		},
		{
			level: '中国政府网',
			landArea: 560
		},
		{
			level: '营商接诉即办',
			landArea: 810
		},
	]
	const CubeLeft = echarts.graphic.extendShape({
		shape: {
			x: 0,
			y: 0
		},
		buildPath: function(ctx, shape) {
			const xAxisPoint = shape.xAxisPoint
			const c0 = [shape.x, shape.y]
			const c1 = [shape.x - 20, shape.y - 4]
			const c2 = [xAxisPoint[0] - 20, xAxisPoint[1] - 4]
			const c3 = [xAxisPoint[0], xAxisPoint[1]]
			ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1])
				.closePath()
		}
	})
	const CubeRight = echarts.graphic.extendShape({
		shape: {
			x: 0,
			y: 0
		},
		buildPath: function(ctx, shape) {
			const xAxisPoint = shape.xAxisPoint
			const c1 = [shape.x, shape.y]
			const c2 = [xAxisPoint[0], xAxisPoint[1]]
			const c3 = [xAxisPoint[0] + 8, xAxisPoint[1] - 4]
			const c4 = [shape.x + 8, shape.y - 4]
			ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1])
				.closePath()
		}
	})
	const CubeTop = echarts.graphic.extendShape({
		shape: {
			x: 0,
			y: 0
		},
		buildPath: function(ctx, shape) {
			// 逆时针 角 y 负数向上  X 负数向左
			const c1 = [shape.x, shape.y]
			const c2 = [shape.x + 8, shape.y - 4]
			const c3 = [shape.x - 11, shape.y - 8]
			const c4 = [shape.x - 20, shape.y - 4]
			ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1])
				.closePath()
		}
	})
	echarts.graphic.registerShape('CubeLeft', CubeLeft)
	echarts.graphic.registerShape('CubeRight', CubeRight)
	echarts.graphic.registerShape('CubeTop', CubeTop)
	let MAX = []
	let VALUE = []
	let LEV = []
	let chartData = [].concat(data)
	chartData.forEach(item => {
		VALUE.push(item.landArea)
		LEV.push(item.level)
	})
	let maxItem = [].concat(VALUE).sort((a, b) => b - a)[0]

	let SUM = 0
	for (let item of VALUE) {
		SUM += item
		MAX.push(maxItem)
	}
	option = {
		tooltip: {
			trigger: 'item',
			textStyle: {
				color: '#ffe400',
				fontSize: '14',
				fontWeight: '500'
			},
			position: 'top',
			backgroundColor: 'rgba(250,250,250,0)',
			transitionDuration: 0.4,
			formatter: function(params) {
				return '<div style="background-image: url(images/reminder_box2.png);width:50px;height:33px;line-height:30px;background-size: 100% 100%;text-align:center;">' +
					VALUE[params.dataIndex] + '</div>';
			}
		},
		grid: {
			right: "5%",
			top: "20%",
			left: "5%",
			bottom: "5%",
			containLabel: true
		},
		// grid: {
		//     show: false,
		//     left: 0,
		//     right: 10,
		//     bottom: 150,
		//     top: 50,
		//     containLabel: true
		// },
		xAxis: {
			type: 'category',
			data: LEV,
			axisLine: {
				show: true,
				lineStyle: {
					color: '#687e89'
				}
			},
			offset: 10,
			axisTick: {
				show: false
			},
			axisLabel: {
				fontSize: 12,
				color: '#00FFFE'
			}
		},
		yAxis: [{
			nameTextStyle: {
				color: "#f4f5f5",
				padding: [0, 0, 10, -5],
				fontSize: 14
			},
			axisLabel: {
				color: "#f4f5f5",
				fontSize: 14
			},
			axisTick: {
				lineStyle: {
					color: "#687f8a",
					width: 1
				},
				show: true
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: "#687f8a",
					type: "dashed"
				}
			},
			axisLine: {
				lineStyle: {
					color: "#687f8a",
					width: 1,
					type: "solid"
				},
				show: true,
				// "symbol":['none', 'arrow'],
				symbol: ['none',
					'path://M5, 20 L5, 5 L8, 8 L5, 2 L2, 8 L5, 5 L5.3, 6 L5.3,                  20'
				],
				symbolOffset: 5,
				symbolSize: [35, 38],
			},
			name: "条"
		}],
		series: [{
			type: 'custom',
			renderItem: (params, api) => {
				const location = api.coord([api.value(0), api.value(1)])
				return {
					type: 'group',
					children: [{
						type: 'CubeLeft',
						shape: {
							api,
							xValue: api.value(0),
							yValue: api.value(1),
							x: location[0],
							y: location[1],
							xAxisPoint: api.coord([api.value(0), 0])
						},
						style: {
							fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#3fffea'
							}, {
								offset: 1,
								color: '#007eff'
							}])
						}
					}, {
						type: 'CubeRight',
						shape: {
							api,
							xValue: api.value(0),
							yValue: api.value(1),
							x: location[0],
							y: location[1],
							xAxisPoint: api.coord([api.value(0), 0])
						},
						style: {
							fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#2fbeaf' // 顶部
							}, {
								offset: 1,
								color: '#015fbf' // 底部
							}])
						}
					}, {
						type: 'CubeTop',
						shape: {
							api,
							xValue: api.value(0),
							yValue: api.value(1),
							x: location[0],
							y: location[1],
							xAxisPoint: api.coord([api.value(0), 0])
						},
						style: {
							fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#9ffff5'
							}, {
								offset: 1,
								color: '#9ffff5'
							}])
						}
					}]
				}
			},
			data: VALUE
		}, {
			type: 'bar',
			label: {
				normal: {
					show: false,
					position: 'top',
					formatter: (e) => {
						switch (e.name) {
							case '6等':
								return VALUE[0]
							case '7等':
								return VALUE[1]
							case '8等':
								return VALUE[2]
							case '9等':
								return VALUE[3]
							case '10等':
								return VALUE[4]
							case '11等':
								return VALUE[5]
							case '12等':
								return VALUE[6]
						}
					},
					fontSize: 10,
					color: '#fff',
					offset: [0, -5]
				}
			},
			itemStyle: {
				color: 'transparent'
			},
			data: MAX
		}]
	}
	channelChart.setOption(option);
}

function keyword_chart() {
	let keywordPieChart = echarts.init(document.getElementById('keywordPie'));
	option = {
		legend: [{
				top: '670',
				data: [{
						icon: 'image://./images/secondary_img/1.png',
						name: '人力资源'
					},
					{
						icon: 'image://./images/secondary_img/1.png',
						name: '人力资源1'
					},
					{
						icon: 'image://./images/secondary_img/2.png',
						name: '人力资源2'
					},
					{
						icon: 'image://./images/secondary_img/3.png',
						name: '人力资源3'
					},
					{
						icon: 'image://./images/secondary_img/4.png',
						name: '人力资源4'
					}
				],
				itemWidth: 30,
				itemHeight: 30
			},
			{
				top: '680',
				data: [{
						icon: 'image://./images/secondary_img/5.png',
						name: '人力资源5'
					},
					{
						icon: 'image://./images/secondary_img/6.png',
						name: '人力资源6'
					},
					{
						icon: 'image://./images/secondary_img/7.png',
						name: '人力资源7'
					},
					{
						icon: 'image://./images/secondary_img/8.png',
						name: '人力资源8'
					},
					{
						icon: 'image://./images/secondary_img/9.png',
						name: '人力资源9'
					}
				],
				itemWidth: 30,
				itemHeight: 30,
				padding: [40, 0]
			}
		],
		color: ['#008aff', '#88ffb7', '#00bba7', '#fddb6a', '#fb6a76', '#ff0000', '#e5a0ff', '#9b56ff', '#9b56ff',
			'#68f6ff'
		],
		series: [{
			name: '访问来源',
			type: 'pie',
			radius: '58%',
			// label: {
			//     normal: {
			// 		position: 'inner',
			// 		show : false,
			// 	}
			// },
			data: [{
					value: 1048,
					name: '人力资源'
				},
				{
					value: 735,
					name: '人力资源1'
				},
				{
					value: 580,
					name: '人力资源2'
				},
				{
					value: 484,
					name: '人力资源3'
				},
				{
					value: 300,
					name: '人力资源4'
				},
				{
					value: 1048,
					name: '人力资源5'
				},
				{
					value: 735,
					name: '人力资源6'
				},
				{
					value: 580,
					name: '人力资源7'
				},
				{
					value: 484,
					name: '人力资源8'
				},
				{
					value: 300,
					name: '人力资源9'
				}
			],
			emphasis: {
				itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				}
			},
			label: {
				normal: {
					show: false,
					formatter: function(params){
						return params.name+'：'+params.value
						// return 
					},
				},
				emphasis: {
					position: 'left',
					show: true,
					textStyle: {
						fontSize: '14',
						fontWeight: 'bold'
					},
					length: 1
				}
			},
		}]
	};
	keywordPieChart.setOption(option);
}
initTable();
function initTable() {
	var $tableLeft = $('#table_all');
	$tableLeft.bootstrapTable('destroy');
	//先销毁表格
	$tableLeft.bootstrapTable({
		method: "get", //使用get请求到服务器获取数据
		url: huayi.config.callcenter_url + "testusertypeapi/api/TestUserType/Getpatient",
		contentType: "application/x-www-form-urlencoded",
		striped: true, //表格显示条纹
		pagination: true, //启动分页
		pageSize: 10, //每页显示的记录数
		pageNumber: 1, //当前第几页
		fixedColumns: true,
		fixedNumber: 3,
		pageList: [5, 10, 20, 50, 100], //记录数可选列表
		search: false, //是否启用查询
		showColumns: false, //显示下拉框勾选要显示的列
		showRefresh: false, //显示刷新按钮
		sidePagination: "server", //表示服务端请求
		//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
		//设置为limit可以获取limit, offset, search, sort, order
		queryParamsType: "undefined",
		queryParams: function queryParams(params) { //设置查询参数
			console.log(params)
			var param = {
				PageIndex: params.pageNumber,
				PageSize: params.pageSize,
			};
			return param;
		},
		onLoadSuccess: function(data) { //加载成功时执行
			var newDataL = {};
			newDataL.state = data.state;
			newDataL.message = data.message;
			newDataL.rows = data.data.rows;
			newDataL.total = data.data.total;
			$tableLeft.bootstrapTable('load', newDataL);
			// $('.tool_downs').authorizeOperateButton();
		},
		onLoadError: function() { //加载失败时执行
			layer.msg("加载数据失败", {
				time: 1500,
				icon: 2
			});
		}
	});
}