AnYang_UI/WebChartNewest/js/second_1.js

//热线整合受理情况&重大事件
var  hotline2Data=[]
var domM
var  hotline2M = echarts.init(document.getElementById('hotline2'));
var  channelM = echarts.init(document.getElementById('channel'));
var hotlineTimeType
//	热线整合
laydate.render({
	elem: '#date',
	range: '~',
	type: 'datetime',
	done: function(value) {
		initHoneline(value)
	}
});
$('.accept_statistics .hotline').click(function (e) {
	domM = 'hotline2'
	$('.bulletFrame').show();
	$('.hotline_wrap').show();
	$('.hotline_wrap').siblings().hide()
	if ($('.bulletFrame').css('display') == 'block') {
		$('.body').css('opacity', '0.4')
	}
	if (hotlineDataType === 0) {
		hotlineTimeType = 1
		getNowTime('#date')
	} else if(hotlineDataType === 1){
		hotlineTimeType = 0
		getNowTime('#date', 4)
	}
	initHoneline($('#date').val())
	e.stopPropagation()
})
function initHoneline(value) {
		
		
		var secData = [];
		new doAjax({
			url:huayi.config.callcenter_url+'/InfoNew/GetHotline',
			Type: 'get',
			data: {
				token: $.cookie("token"),
				stime: value && value.split(' ~ ')[0],
				etime: value && value.split(' ~ ')[1]
			},
			callBack: function (res) {
				res.data.forEach(function (v, n) {
					secData.push({
						level: v.value,
						landArea: v.count
					})
				})
				hotline2Data = secData
				getHonelineChart2(hotline2Data)
				domM = 'hotline2'
			}
		});
	}
hotline2M.on('click', function (params) {
	console.log(params, 'hotline2')
	domM = 'hotline2'
	if (domM== 'hotline2') {
		workTable('', '', '', params.name, '', '', '', '', hotlineTimeType)
	} else if (domM== 'events') {
		var keyValue = getKey(data,'level',params.name,'key')
			 var dataInfo = data.find((o) => {
			 	return o.level === params.name;
			 })
			workTable('','','','','' ,'','',null,null,null,null,null, null, null, null, $('#date2').val() && $('#date2').val().split(' ~ ')[0], $('#date2').val() && $('#date2').val().split(' ~ ')[1], null, dataInfo.themeId, 1, dataInfo.key)
	} else if (domM== 'channel') {
		var time = $('#date3').val().split(' ~ ');
		var sourceInfo = sourceCountId.find(function(o) {
			return o.name == params.name;
		})
		if (sourceInfo) {
			if (sourceInfo.strworkid) {
				workTable('', '', '', '', '', '', '', '', 0,'','','', '', '', sourceInfo.strworkid, time[0], time[1])
			} else {
				workTable('', '', '', '', '', '', '', '', 0, '', sourceInfo.id,'', '', '', '', time[0], time[1])
			}
		}
	}
	
})
channelM.on('click', function (params) {
	
	domM = 'channel'
	var time = $('#date3').val().split(' ~ ');
	var sourceInfo = sourceCountId.find(function(o) {
		return o.name == params.name;
	})
	if (sourceInfo) {
		if (sourceInfo.strworkid) {
			workTable('', '', '', '', '', '', '', '', 0,'','','', '', '', sourceInfo.strworkid, time[0], time[1])
		} else {
			workTable('', '', '', '', '', '', '', '', 0, '', sourceInfo.id,'', '', '', '', time[0], time[1])
		}
	}
})
function getHonelineChart2(data) {
	data = awaySort(data,"landArea")
	data.length = 10
	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 => {
		if (domM === 'themeBarEle') {
			var obj = {}
			obj.name = item.level
			obj.value = item.landArea
			obj.themId = item.id
			VALUE.push(obj)
		} else {
			VALUE.push(item.landArea)
		}
		
		
		LEV.push(item.level)
	})
//	console.log(VALUE)
	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: '16',
				fontWeight: '500'
			},
			position: 'top',
			backgroundColor: 'rgba(250,250,250,0)',
			transitionDuration: 0.4,
			formatter: function (params) {
				var resultValue = ''
				if (domM === 'themeBarEle') {
					resultValue =  VALUE[params.dataIndex].value
				} else {
					resultValue = VALUE[params.dataIndex]
					
				}
				return '<div style="background-image: url(image/second/reminder_box2.png);width:50px;height:33px;line-height:30px;background-size: 100% 100%;text-align:center;">' +
					resultValue + '</div>';
			}
		},

		grid: {
			right: "5%",
			top: "20%",
			left: "5%",
			bottom: "5%",
			containLabel: true
		},
		xAxis: {
			type: 'category',
			data: LEV,
			axisLine: {
				show: true,
				lineStyle: {
					color: '#687e89'
				}
			},
			offset: 10,
			axisTick: {
				show: false
			},
			axisLabel: {
				fontSize: 14,
				rotate: -45,
				color: '#fff'
			}
		},
		yAxis: [{
			nameTextStyle: {
				color: "#f4f5f5",
				padding: [0, 0, 10, -5],
				fontSize: 16
			},
			axisLabel: {
				color: "#f4f5f5",
				fontSize: 16
			},
			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',
			itemStyle: {
				color: 'rgba(255,255,255,0)'
			},
			emphasis: {
				itemStyle: {
					opacity: 0.2,
					color: 'rgb(60,118,77)'
				}
			},
			data: MAX
		},]
	}
	if (domM === 'channel') {
		channelM.setOption(option);
	} else if (domM === 'themeBarEle') {
		themeBarEcharts.setOption(option);
	} else {
		hotline2M.setOption(option);
	}
	
}
function awaySort(objArr, key) {
	let result = objArr.slice(0);
	return result.sort((a, b) => b[key] -a[key] );
}

function getKey(data,key1,value,key2){
	var dataValue
	data.forEach(function (ele) {
		if (ele[key1]===value) {
			dataValue =ele[key2]
			
		}
	})
	return  dataValue
}