$(function() {
	echarts_1();
	echarts_2();
	c.init();
	echarts_3();
	// echarts_4();
	// echarts_5();
	// echarts_6();
})

function echarts_1() {
	// 活动类别分析
	var myChart = echarts.init(document.getElementById('echarts_1'));
	var option = {
		tooltip: {
			trigger: 'item',
			formatter: "{a} <br/>{b}: {c}条",
		},
		series: [{
				name: '活动类别分析',
				type: 'pie',
				radius: '75%',
				center: ['50%', '50%'],
				zlevel: 3,
				color: ['#c968e1', '#0d83fb', '#00ffff', '#ebc14f', '#fb802e', '#7f3eb9', '#2adbac'],
				data: [{
						value: 42,
						name: '扶贫济困'
					},
					{
						value: 42,
						name: '医疗卫生'
					},
					{
						value: 76,
						name: '妇女儿童服务'
					},
					{
						value: 12,
						name: '其他'
					},
					{
						value: 36,
						name: '社区治理'
					},
					{
						value: 36,
						name: '残疾人服务'
					},
					{
						value: 76,
						name: '养老服务'
					}
				],
				label: {
					padding: [18, 0, 0, 0],
					formatter: [
						'{c|}',
						'{a|{c}条}',
						'{b|{b}}'
					].join('\n'),
					rich: {

						c: {
							width: 4,
							height: 4,
							padding: [0, -4],
							marginBottom: 50,
							borderRadius: 4,
							lineHeight: 0,
							backgroundColor: 'auto'
						},
						a: {
							padding: [-30, 0, 0, 5],
							color: "#02f7f4",
							fontSize: 20,
							align: "center",

						},
						b: {
							padding: [-10, 0, 0, 5],
							color: "#fff",
							fontSize: 14,
							align: "center",
							lineHeight: 18,
						},

					},
				},
				labelLine: {
					show: true,
					length: 15,
					length2: 32,
				},
				emphasis: {
					itemStyle: {
						shadowBlur: 0,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				},

			}

			, {
				name: '外边框',
				type: 'pie',
				zlevel: 1,
				radius: ['90%', '90%'], //边框大小
				center: ['50%', '50%'], //边框位置
				cursor: 'default',
				emphasis: {
					scale: false
				},
				tooltip: {
					show: false
				},
				data: [{
					value: 1,
					label: {
						show: false
					},
					itemStyle: {
						borderWidth: 1, //设置边框粗细
						borderColor: 'rgba(29,176,226,.5)' //边框颜色
					}
				}],
			},
			{
				name: '内边框',
				type: 'pie',
				zlevel: 3,
				radius: ['0', '25%'], //边框大小
				center: ['50%', '50%'], //边框位置
				cursor: 'default',
				emphasis: {
					scale: false
				},
				tooltip: {
					show: false
				},
				data: [{
					value: 1,
					label: {
						show: false
					},
					itemStyle: {
						color: '#fff'
					}
				}],
			},
			{
				type: 'pie',
				zlevel: 4,
				emphasis: {
					scale: false
				},
				tooltip: {
					show: false
				},
				radius: [0, '10%'],
				data: [{
					value: 1,
					itemStyle: {
						color: '#f0f7ff'
					},
					label: {
						show: false
					}
				}]
			},
		]
	};

	myChart.setOption(option);
	window.addEventListener("resize", function() {
		myChart.resize();
	});
}

function echarts_2() {
	// 需求类别分析
	var myChart = echarts.init(document.getElementById('echarts_2'));
	var data1 = [15, 22, 45, 18, 22]; //招标
	var data2 = [20, 22, 28, 20, 25]; //众筹
	var data3 = [20, 20, 20, 20, 20]; //指派
	// 总计
	var total_data = function() {
		var datas = [];
		for (var i = 0; i < data1.length; i++) {
			datas.push(data1[i] + data2[2] + data3[i]);
		}
		return datas;
	}();
	var option = {
		tooltip: {
			trigger: 'axis',
		},
		grid: {
			height: "58%",
			top: '5%',
		},
		legend: {
			show: true,
			align: 'auto',
			data: ['招标', '众筹', '指派'],
			bottom: '1%',
			itemWidth: 13,
			itemHeight: 13,
			textStyle: {
				color: "#fff",
				fontSize: 12,
			}
		},
		xAxis: [{
			type: 'category',
			data: ['基本共工服务', '社会管理服务', '行业管理与协调性服务', '技术性服务', '政府履职所需的辅助性事项'],
			splitLine: {
				show: false,
				lineStyle: {
					color: "rgba(95,200,225,.5)",
					type: 'solid',
				}
			},
			axisTick: {
				show: false,
				alignWithLabel: true,
			},
			axisLine: {
				lineStyle: {
					color: "rgba(95,200,225,.5)",
					type: 'solid',
				}
			},
			boundaryGap: true,
			axisLabel: {
				color: '#fff',
				fontSize: 12,
				lineHeight: 14,
				show: true,
				interval: '0',
				formatter: function(params) {
					var newParamsName = ""; // 最终拼接成的字符串
					var paramsNameNumber = params.length; // 实际标签的个数
					var provideNumber = 4; // 每行能显示的字的个数
					var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
					/**
					 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
					 */
					// 条件等同于rowNumber>1
					if (paramsNameNumber > provideNumber) {
						/** 循环每一行,p表示行 */
						for (var p = 0; p < rowNumber; p++) {
							var tempStr = ""; // 表示每一次截取的字符串
							var start = p * provideNumber; // 开始截取的位置
							var end = start + provideNumber; // 结束截取的位置
							// 此处特殊处理最后一行的索引值
							if (p == rowNumber - 1) {
								// 最后一次不换行
								tempStr = params.substring(start, paramsNameNumber);
							} else {
								// 每一次拼接字符串并换行
								tempStr = params.substring(start, end) + "\n";
							}
							newParamsName += tempStr; // 最终拼成的字符串
						}

					} else {
						// 将旧标签的值赋给新标签
						newParamsName = params;
					}
					//将最终的字符串返回
					return newParamsName
				}
			},

		}],
		yAxis: [{
			type: "value",
			show: true,
			name: "人数",
			nameTextStyle: {
				color: "#b7efff",
				fontSize: 14,
			},
			nameLocation: "end",
			max: 100,
			min: 0,
			splitNumber: 5,
			axisLabel: {
				color: '#b7efff',
				fontSize: 12,
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: "rgba(95,200,225,.5)",
					type: 'dashed',
				}
			}
		}],
		series: [{
			name: '招标',
			type: "bar",
			barWidth: 11,
			stack: "需求人数",
			data: data1,
			itemStyle: {
				color: '#1e6afa',
			}
		}, {
			name: '众筹',
			type: "bar",
			barWidth: 11,
			stack: "需求人数",
			data: data2,
			itemStyle: {
				color: '#2d9aff',
			}
		}, {
			name: '指派',
			type: "bar",
			stack: "需求人数",
			barWidth: 11,
			data: data3,
			itemStyle: {
				color: '#00ffff',
				barBorderRadius: [11, 11, 0, 0]
			}
		}, {
			name: '总计',
			type: "bar",
			barWidth: 11,
			stack: "需求人数",
			label: {
				show: true,
				offset: [0, 0],
				position: 'insideBottom',
				formatter: '{c}',
				textStyle: {
					color: '#fff',
				}
			},
			itemStyle: {
				color: "rgba(128,128,128,0)",
			},
			data: total_data,
			markPoint: {
				data: [{
					type: 'max',
					name: "最大值",
					symbol: "circle",
					itemStyle: {
						color: "rgba(225, 255, 255, 1)",
					}
				}],
				symbol: "circle",
				animation: true,
				animationEasing: "bounceOut",
				animationDurationUpdate: 1040,
				symbolSize: 33,
				itemStyle: {
					color: "rgba(224, 40, 40, 1)",
					borderWidth: 4,
					borderType: "solid",
					width: 3,
					height: 3,
					borderDashOffset: 4,
					borderColor: "rgba(58, 51, 51, 1)",
					borderCap: "square",
					borderJoin: "round",
					borderMiterLimit: 37,
					shadowBlur: 7,
					shadowColor: "rgba(225, 214, 214, 1)",
					shadowOffsetX: 0.5,

				}

			}

		}]
	};
	myChart.setOption(option);
	window.addEventListener("resize", function() {
		myChart.resize();
	});
}

function echarts_3() {
	// 服务类别分析
	var myChart = echarts.init(document.getElementById('echarts_3'));
	var option = {
		tooltip: {
			trigger: 'item',
			formatter: "{a} <br/>{b}: {c}条",
		},
		series: [{
				name: '服务类别分析',
				type: 'pie',
				radius: '75%',
				center: ['50%', '50%'],
				zlevel: 2,
				color: ['#c968e1', '#0d83fb', '#00ffff', '#ebc14f', '#fb802e', '#7f3eb9', '#2adbac'],
				data: [{
						value: 42,
						name: '扶贫济困'
					},
					{
						value: 42,
						name: '医疗卫生'
					},
					{
						value: 76,
						name: '妇女儿童服务'
					},
					{
						value: 12,
						name: '其他'
					},
					{
						value: 36,
						name: '社区治理'
					},
					{
						value: 36,
						name: '残疾人服务'
					},
					{
						value: 76,
						name: '养老服务'
					}
				],
				label: {
					padding: [18, 0, 0, 0],
					formatter: [
						'{c|}',
						'{a|{c}条}',
						'{b|{b}}'
					].join('\n'),
					rich: {

						c: {
							width: 4,
							height: 4,
							padding: [0, -4],
							marginBottom: 50,
							borderRadius: 4,
							lineHeight: 0,
							backgroundColor: 'auto'
						},
						a: {
							padding: [-30, 0, 0, 5],
							color: "#02f7f4",
							fontSize: 20,
							align: "center",

						},
						b: {
							padding: [-10, 0, 0, 5],
							color: "#fff",
							fontSize: 14,
							align: "center",
							lineHeight: 18,
						},

					},
				},
				labelLine: {
					show: true,
					length: 15,
					length2: 32,
				},
				emphasis: {
					itemStyle: {
						shadowBlur: 0,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				},

			},
			{
				name: '内边框',
				type: 'pie',
				zlevel: 3,
				radius: ['0', '60%'], //边框大小
				center: ['50%', '50%'], //边框位置
				cursor: 'default',
				emphasis: {
					scale: false,
					disabled: true
				},
				tooltip: {
					show: false
				},
				data: [{
					value: 1,
					label: {
						show: false
					},
					itemStyle: {
						color: '#283fd6'
					}
				}],
			}
		]
	};

	myChart.setOption(option);
	window.addEventListener("resize", function() {
		myChart.resize();
	});
}

var chartDom = document.getElementById('map');
var myChart = echarts.init(chartDom);
var option;
var clickLevel = 0;

var c = {
	init() {
		c.drawMap();
		myChart.on('click', (params) => {
			console.log(myChart)
			if (params.componentSubType == 'map') {
				myChart.clear();
				c.drawMap(params.name, params.data.level)
			} else if (params.componentSubType == 'scatter' || params.componentSubType ==
				'effectScatter') {
				console.log(params.componentSubType, "click")
				this.$emit('pointClick', params)
			}
		})
	},

	drawMap(name, level) {
		myChart.showLoading();
		var url = "data/110.json";

		if (name == '大兴区' || level == 2){
			url = "data/110115.json";
			var counterss = $(".counter");
			counterss.each(function(){
				var nums = $(this).attr("data-num")-15;
				if($(this).hasClass('counterp')){
					$(this).before("<p class='counter counterp' data-num='"+nums+"'>"+nums+"</p>")
				}else if($(this).hasClass('counterb')){
					$(this).before("<b class='counter counterb' data-num='"+nums+"'>"+nums+"</b>")
				}else{
					$(this).before("<span class='counter' data-num='"+nums+"'>"+nums+"</span>")
				}
				$(this).remove();
			})
			$('.counter').countUp({
				delay: 50,
				time: 1500
			});

		}

		if (clickLevel == level && level == 2) {
			myChart.hideLoading();
			location.href = "/yiwanggongzhi/govern-show.html"
			console.log(clickLevel)
			return false;
		} else
			clickLevel = level

		$.get(url, function(geoJson) {
			if (level == 2) {
				var countersss = $(".counter");
				countersss.each(function(){
					var nums = $(this).attr("data-num")-15;
					if($(this).hasClass('counterp')){
						$(this).before("<p class='counter counterp' data-num='"+nums+"'>"+nums+"</p>")
					}else if($(this).hasClass('counterb')){
						$(this).before("<b class='counter counterb' data-num='"+nums+"'>"+nums+"</b>")
					}else{
						$(this).before("<span class='counter' data-num='"+nums+"'>"+nums+"</span>")
					}
					$(this).remove();

				})
				$('.counter').countUp({
					delay: 50,
					time: 1500
				});

				const jsons = geoJson.features.filter(item => item.properties.name == name)
				const mapJson = {
					"type": "FeatureCollection",
					"features": jsons
				}
				geoJson = mapJson;
			}

			myChart.hideLoading();
			echarts.registerMap('DX', geoJson);
			myChart.setOption(
				(option = {
					title: {
						text: '',
					},
					tooltip: {
						trigger: 'item',
						formatter: '{b}'
					},
					toolbox: {
						show: false,
						orient: 'vertical',
						left: 'right',
						top: 'center',
						feature: {
							restore: {},
						}
					},
					visualMap: {
						min: 800,
						max: 50000,
						text: ['High', 'Low'],
						realtime: false,
						calculable: true,
						inRange: {
							color: ['rgba(117,68,177,0.9)', 'rgba(106,215,175,0.9)',
								'rgba(223,127,64,0.9)'
							],
						},
						show: false,
					},
					series: [{
						name: '北京市大兴区',
						type: 'map',
						map: 'DX',
						zoom: 1.2, //当前视角的缩放比例
						roam: true, //是否开启平游或缩放
						scaleLimit: {
							min: 1,
							max: 1.6
						},
						label: {
							show: true
						},
						left: 'center',
						top: 'center',
						data: [{
								name: '榆垡镇',
								value: 10057.34,
								level: 2
							},

							{
								name: '黄村镇',
								value: 20057.34,
								level: 2
							},
							{
								name: '北臧村镇',
								value: 15477.48,
								level: 2
							},
							{
								name: '庞各庄镇',
								value: 31686.1,
								level: 2
							},
							{
								name: '礼贤镇',
								value: 6992.6,
								level: 2
							},
							{
								name: '魏善庄镇',
								value: 44045.49,
								level: 2
							},
							{
								name: '安定镇',
								value: 40689.64,
								level: 2
							},
							{
								name: '青云店镇',
								value: 37659.78,
								level: 2
							},
							{
								name: '长子营镇',
								value: 45180.97,
								level: 2
							},

							{
								name: '采育镇',
								value: 55204.26,
								level: 2
							},
							{
								name: '西红门镇',
								value: 21900.9,
								level: 2
							},
							{
								name: '旧宫镇',
								value: 4918.26,
								level: 2
							},
							{
								name: '亦庄镇',
								value: 5881.84,
								level: 2
							},
							{
								name: '瀛海镇',
								value: 4178.01,
								level: 2
							},
							{
								name: '兴丰街道',
								value: 2227.92,
								level: 2
							},
							{
								name: '清源街道',
								value: 2180.98,
								level: 2
							},
							{
								name: '林校路街道',
								value: 9172.94,
								level: 2
							},
							{
								name: '观音寺街道',
								value: 3368,
								level: 2
							},
							{
								name: '天宫院街道',
								value: 806.98,
								level: 2
							},
							{
								name: '高米店街道',
								value: 22706.98,
								level: 2
							},
							{
								name: '东城区',
								value: 33106.98,
								level: 1

							},
							{
								name: '西城区',
								value: 31306.98,
								level: 1

							},
							{
								name: '朝阳区',
								value: 21706.98,
								level: 1

							},
							{
								name: '丰台区',
								value: 14706.98,
								level: 1

							},
							{
								name: '石景山区',
								value: 43706.98,
								level: 1

							},
							{
								name: '海淀区',
								value: 23306.98,
								level: 1

							}, {
								name: '顺义区',
								value: 12706.98,
								level: 1

							}, {
								name: '通州区',
								value: 1506.98,
								level: 1

							}, {
								name: '大兴区',
								value: 4706.98,
								level: 1

							}, {
								name: '房山区',
								value: 3706.98,
								level: 1

							}, {
								name: '门头沟区',
								value: 12806.98,
								level: 1

							}, {
								name: '昌平区',
								value: 22606.98,
								level: 1

							}, {
								name: '平谷区',
								value: 42306.98,
								level: 1

							}, {
								name: '密云区',
								value: 30206.98,
								level: 1

							}, {
								name: '怀柔区',
								value: 20706.98,
								level: 1

							}, {
								name: '延庆区',
								value: 10206.98,
								level: 1

							}
						],
						// 自定义名称映射
						nameMap: {

						}
					}]
				})
			);
		});
	}
}