AnYang_UI/WebChartNewest/js/dispatTopic/dispatTopic.js

//热线整合受理情况&重大事件
var dispatTopicType = 2 // 1 周 2月
var hotThings = echarts.init(document.getElementById("hotThings"));
//$('.cutDispatchHandle').click(function(e) {
//	if($(this).text() === '月调度专题') {
//		dispatTopicType = 1
//		$(this).text('周调度专题')
//		getHotThings()
//	} else if($(this).text() === '周调度专题') {
//		dispatTopicType = 2
//		$(this).text('月调度专题')
//		getHotThings()
//	}
//})

$('.newDataAct').click(function () {
	console.log('dataAct')
	var indexTitle = $(this).attr('indexTitle')
	if($(this).attr('data-pos') == '1'){
		
		$(this).children(".day").addClass('active');
		$(this).siblings("label").children('.month').removeClass('active');
//		$('#themeClassType').val('0');
		dispatTopicType = 1
		trafficState = 0;
		cutHotThings();
	} else if ($(this).attr('data-pos') == '2') {
		$(this).children('.month').addClass('active')
		$(this).siblings("label").children('.day').removeClass('active');
//		$('#themeClassType').val('1');
		dispatTopicType = 2
		cutHotThings();
		trafficState = 1;
	}
})
hotThings.getZr().on('click', function (params) {
	$(".themeBarTit").text($('.cutDispatchHandle').text())
	$(".themeBar_wrap").show()
	var pointInPixel = [params.offsetX, params.offsetY];
	var pointInGrid = hotThings.convertFromPixel({
        seriesIndex: 0
    }, pointInPixel);
    var xIndex = pointInGrid[0];  //索引
    var handleIndex = Number(xIndex);
    var seriesObj = hotThings.getOption(); //图表object对象
	$('.themeBar_down').siblings().hide()
	$('.themeBar_down').show();
	themeDblId = seriesObj.series[1].data[handleIndex].themId
	console.log(hotThings)
	console.log(themeDblId)
	getThemeStatics();
//	getHotThings()
})
function cutHotThings() {
	var nameData = [];
	var conNum = [];
	var conNumData = []
	var maxNum = []
	var secData = [];
	var type = $('#themeClassType').val();
	var url = '/InfoNew/GetThemeSpecial';
//	if (type == '1') url = '/InfoNew/GetThemeDept1';
	
	new doAjax({
		url: huayi.config.callcenter_url + url,
		Type: 'get',
		data: {
			token: $.cookie("token"),
			stime: '',
			etime: '',
			timetype: MajoreventsDataType,
			id: themeDblId,
			type: dispatTopicType
		},
		callBack: function(res) {
			if(res.state === "notoken") {
				window.location.href = "login.html";
			}
			res.data.forEach(function(v, n) {
				var name = '';
				if(type == '1') {
					name = v.deptName ? v.deptName.replace(/[0-9]+/g, "") : '其他'
				} else {
					name = v.F_Name ? v.F_Name.replace(/[0-9]+/g, "") : '其他'
					if(dispatTopicType == 2){
						if(v.F_Cycle.indexOf('年'!== -1))
						name = v.F_Cycle.split('年')[1] + name 
					}
				}
				
				nameData.push(name)
				var objCount = {}
				objCount.count = v.count
				objCount.themId = v.F_ID
				conNumData.push(objCount)
				conNum.push(v.count)
				secData.push({
					level: name,
					landArea: v.count
				})
			})

			if(res.data && res.data.length > 0) {
				$('#themeRate').text(res.data[0].Proportion);
			}
			for(var i = 0; i < secData.length; i++) {
				maxNum.push(Math.max.apply(null, conNum) + 200);
			}
			newHotThingsChart('hotThings', nameData, conNum, maxNum, -30,conNumData)
		}
	});

}
function newHotThingsChart(dom, data, count, count1, rotate = 0,conNumData) {
	window.onresize = function() {
		hotThings.resize()
	}
	option = {
		textStyle: {
			color: "#c0c3cd",
			fontSize: 11
		},
		grid: {
			top: '25%',
			bottom: '30%'
		},
		dataZoom:[
            {
                type:'inside',//slider表示有滑动块的，inside表示内置的
                show:true,
                xAxisIndex:[0],
                startValue:1,  // 数据窗口范围的起始数值
       			endValue:10, 
            }
        ],
		xAxis: {
			nameTextStyle: {
				color: "#c0c3cd",
				padding: [0, 0, -10, 0],
				fontSize: 11
			},
			axisLabel: {
				color: "#c0c3cd",
				fontSize: 11,
				rotate: rotate,
			},
			axisTick: {
				lineStyle: {
					color: "#8398c4",
					width: 1
				},
				show: false
			},
			minorTick: {
				length: 8
			},
			splitLine: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: "#8398c4",
					width: 1,
					type: "solid"
				},
				show: true
			},
			data: data,
			type: "category"
		},
		yAxis: {
			nameTextStyle: {
				color: "#c0c3cd",
				padding: [0, 0, 10, -5],
				fontSize: 11
			},
			axisLabel: {
				color: "#c0c3cd",
				fontSize: 11
			},
			axisTick: {
				lineStyle: {
					color: "#8398c4",
					width: 1
				},
				show: true
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: "#8398c4",
					type: "dashed"
				}
			},
			axisLine: {
				lineStyle: {
					color: "#8398c4",
					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: count,
				type: "bar",
				barMaxWidth: "auto",
				barWidth: 15,
//				barGap:'100%',/*多个并排柱子设置柱子之间的间距*/
//	            barCategoryGap:'100%',/*多个并排柱子设置柱子之间的间距*/
				itemStyle: {
					color: {
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						type: "linear",
						global: false,
						colorStops: [{
							offset: 0,
							color: "#ff4519"
						}, {
							offset: 1,
							color: "#fff500"
						}]
					},
					barBorderRadius: [30, 30, 0, 0]
				},
				label: {
					show: true,
					position: "top",
					distance: 10,
					color: "#fff"
				},
				emphasis: {
					itemStyle: {
						color: new echarts.graphic.LinearGradient(
							0, 0, 0, 1, [{
									offset: 0,
									color: '#fde301'
								},
								{
									offset: 1,
									color: '#0a2f3e'
								}
							]
						)
					}
				},
			},
			{
				data: conNumData,
				type: "line",
				symbolSize: 0, // symbol的大小设置为0
			    showSymbol: false, // 不显示symbol
			    lineStyle: {
			        width: 0, // 线宽是0
			        color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
			    }
			},
			{
				data: [1, 1, 1, 1, 1, 1],
				type: "pictorialBar",
				barMaxWidth: "20",
				symbol: "none",
			},
			{
				type: "pictorialBar",
				barMaxWidth: "20",
				symbolPosition: "end",
				symbol: "none",
				symbolOffset: [0, "-50%"],
				symbolSize: [30, 12],
				zlevel: 1
			},
			{
				data: count1,
				type: "bar",
				barMaxWidth: "auto",
				barWidth: 15,
				barGap: "-100%",
				itemStyle: {
					color: '#234caf'
				},
				zlevel: -1
			}, {
				data: [1, 1, 1, 1, 1, 1],
				type: "pictorialBar",
				barMaxWidth: "20",
				symbol: "none",
				symbolOffset: [0, "50%"],
				symbolSize: [30, 15],
				zlevel: -2
			}, {
				data: count1,
				type: "pictorialBar",
				barMaxWidth: "20",
				symbolPosition: "end",
				symbol: "circle",
				symbolOffset: [0, "-60%"],
				symbolSize: [15, 12],
				itemStyle: {
					color: '#234caf'
				},
				zlevel: -1
			},
		]
	}
	
	if (domM === 'themeBarDownEle') {
		themeBarDownEcharts.setOption(option);
	} else{
		domM = ''
		hotThings.setOption(option);
	}
	
}