duhongyu
/
AnYang_UI


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="main" style="width: 1000px;height: 600px;"></div>
	</body>
	<script src="js/echarts.min.js"></script>
	<script src="js/jquery.min.js"></script>
	<script type="text/javascript">
		var uploadedDataURL = "format.1629790904713.json";
		var myChart = echarts.init(document.getElementById('main'));
		var geoCoordMap = {
			"安阳县": [114.295989, 36.231785],
			"北关区": [114.379621, 36.137115],
			"滑县": [114.667181, 35.465867],
			"龙安区": [114.254489, 36.044375],
			"高新区": [114.310095, 36.115555],
			"殷都区": [114.289197, 36.133648],
			"文峰区": [114.418257, 36.034251],
			"汤阴县": [114.455689, 35.902302],
			"内黄县": [114.8165, 35.900576],
			"林州市": [113.854634, 36.010256]
		}

		var customerBatteryCityData = [{
				name: "安阳县",
				value: 70
			},
			{
				name: "北关区",
				value: 20
			},
			{
				name: "滑县",
				value: 70
			},
			{
				name: "龙安区",
				value: 70
			},
			{
				name: "高新区",
				value: 120
			},
			{
				name: "殷都区",
				value: 70
			},
			{
				name: "文峰区",
				value: 70
			},
			{
				name: "汤阴县",
				value: 0
			},
			{
				name: "内黄县",
				value: 70
			},
			{
				name: "林州市",
				value: 10
			}
		]
		$.getJSON(uploadedDataURL, function(geoJson) {
			echarts.registerMap('guangdong', geoJson);
			option = {
				// backgroundColor: '#131C38',
				// tooltip: {
				// 	trigger: 'item',
				// 	show: true,
				// 	enterable: true,
				// 	textStyle: {
				// 		fontSize: 20,
				// 		color: '#fff'
				// 	},
				// 	backgroundColor: 'rgba(0,2,89,0.8)',
				// 	formatter: '{b}<br />{c}'
				// },
				geo: [{
						map: 'guangdong',
						aspectScale: 0.9,
						roam: false, // 是否允许缩放
						zoom: 1.0, // 默认显示级别
						layoutSize: '95%',
						layoutCenter: ['55%', '50%'],
						itemStyle: {
							normal: {
								areaColor: {
									type: 'linear-gradient',
									x: 0,
									y: 400,
									x2: 0,
									y2: 0,
									colorStops: [{
										offset: 0,
										color: 'rgba(37,108,190,0.3)' // 0% 处的颜色
									}, {
										offset: 1,
										color: 'rgba(15,169,195,0.3)' // 50% 处的颜色
									}],
									global: true // 缺省为 false
								},
								borderColor: '#4ecee6',
								borderWidth: 1
							}
						},
						zlevel: 3
					}
				],
				series: [
					// map
					{
						geoIndex: 0,
						// coordinateSystem: 'geo',
						showLegendSymbol: true,
						type: 'map',
						roam: true,
						label: {
							normal: {
								show: false,
								textStyle: {
									color: '#fff'
								}
							},
							emphasis: {
								show: false,
								textStyle: {
									color: '#fff'
								}
							}
						},

						itemStyle: {
							normal: {
								borderColor: '#2ab8ff',
								borderWidth: 1.5,
								areaColor: '#12235c'
							},
							emphasis: {
								show: false,
								areaColor: '#2AB8FF',
								borderWidth: 0,
								color: 'red'
							}
						},
						map: 'guangdong', // 使用
						data: customerBatteryCityData
						// data: this.difficultData //热力图数据   不同区域 不同的底色
					},
					// 柱状体的底部
					{
						type: 'scatter',
						coordinateSystem: 'geo',
						geoIndex: 0,
						zlevel: 4,
						label: {
							// 这儿是处理的
							formatter: '{b}',
							position: 'bottom',
							color: '#fff',
							fontSize: 12,
							distance: 10,
							show: true
						},
						symbol: 'circle',
						symbolSize: [20, 10],
						itemStyle: {
							// color: '#F7AF21',
							color: 'rgb(22,255,255, 1)',
							opacity: 1
						},
						silent: true,
						data: scatterData2()
					},
					// 底部外框
					{
						type: 'scatter',
						coordinateSystem: 'geo',
						geoIndex: 0,
						zlevel: 4,
						label: {
							show: false
						},
						symbol: 'circle',
						symbolSize: [40, 20],
						itemStyle: {
							color: {
								type: 'radial',
								x: 0.5,
								y: 0.5,
								r: 0.5,
								colorStops: [{
										offset: 0,
										color: 'rgb(22,255,255, 0)' // 0% 处的颜色
									},
									{
										offset: .75,
										color: 'rgb(22,255,255, 0)' // 100% 处的颜色
									},
									{
										offset: .751,
										color: 'rgb(22,255,255, 1)' // 100% 处的颜色
									},
									{
										offset: 1,
										color: 'rgb(22,255,255, 1)' // 100% 处的颜色
									}
								],
								global: false // 缺省为 false
							},

							opacity: 1
						},
						silent: true,
						data: scatterData2()
					}
				]
			}
			myChart.setOption(option);
		})


		// // 动态计算柱形图的高度（定一个max）
		// function lineMaxHeight () {
		//     const maxValue = Math.max(...customerBatteryCityData.map(item => item.value))
		//     return 0.9/maxValue
		// }
		//     // 柱状体的主干
		// function lineData () {
		//     return customerBatteryCityData.map((item) => {
		//       return {
		//         coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * lineMaxHeight()]]
		//       }
		//     })
		// }
		// // 柱状体的顶部
		// function scatterData () {
		//     return customerBatteryCityData.map((item) => {
		//       return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * lineMaxHeight()]
		//     })
		// }
		// 柱状体的底部
		function scatterData2() {
			return customerBatteryCityData.map((item) => {
				return {
					name: item.name,
					value: geoCoordMap[item.name]
				}
			})
		}
	</script>
</html>