百度Echart展示世界地图效果

最新推荐文章于 2023-03-28 14:52:42 发布

chen_jia_hao

最新推荐文章于 2023-03-28 14:52:42 发布

阅读量1.1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/chen_jia_hao/article/details/104315551

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、使用百度Echarts展示世界地图效果：

2、实现代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<div id="cjh_world" style="width:1024px;height: 720px;border:1px solid red"></div>

		<script src="js/echarts.min.js"></script>
		<script src="js/world.js"></script>
		<script>
			var myChart = echarts.init(document.getElementById('cjh_world'));

			var geoCoordMap = {
				"北京": [116.407395, 39.904211],
				"纽约": [-74.005941, 40.712784],
				"Nicosia": [33.382276, 35.185566],
			};

			var rawData = [{
				"name": "纽约",
				value: '98%'
			}, {
				"name": "北京",
				value: '30.2%'
			}, {
				"name": "Nicosia",
				value: '30.2%'
			}];

			function makeMapData(rawData) {
				var mapData = [];
				for (var i = 0; i < rawData.length; i++) {
					var geoCoord = geoCoordMap[rawData[i].name];
					if (geoCoord) {
						mapData.push({
							name: rawData[i].name,
							value: geoCoord.concat(rawData[i].value)
						});
					}
				}
				return mapData;
			};


			var option = {
				backgroundColor: 'white',
				title: {
					itemGap: 0,
					textStyle: {
						color: '#eee'
					},
					z: 200
				},
				tooltip: {
					trigger: 'item',
					formatter: function(params) {
						return params.name + "<br/>占" + params.value[2];
					}
				},

				geo: {
					map: 'world',
					silent: true,
					emphasis: {
						label: {
							show: true,
							areaColor: 'red'
						}
					},
					itemStyle: {
						borderWidth: 0.4,
						borderColor: '#404a59',
						areaColor: '#00a4f6'
					},
					roam: true,
					scaleLimit: {
						min: 1.25,
						max: 1.25,
					},
					zoom: 1.25
				},
				series: [{
					name: 'Prices and Earnings 2012',
					type: 'scatter',
					coordinateSystem: 'geo',
					data: makeMapData(rawData),
					activeOpacity: 1,
					label: {
						formatter: '{b}',
						position: 'right',
						show: false
					},
					symbolSize: 20,
					itemStyle: {
						borderColor: 'red',
						borderWidth: 6,
						color: '#fff'
					},
					emphasis: {
						label: {
							show: false,
							color: "#000"
						}
					}
				}, {
					name: '散点',
					type: 'scatter',
					coordinateSystem: 'geo',
					symbol: 'pin',
					symbolSize: [120, 60],
					symbolOffset: [0, -5],
					label: {
						normal: {
							formatter: function(params) {
								return params.value[2];
							},
							show: true,
							textStyle: {
								color: '#fff',
								fontSize: 14,
							}
						}
					},
					itemStyle: {
						normal: {
							color: 'red', //标志颜色
						}
					},
					zlevel: 6,
					data: makeMapData(rawData)
				}]
			};

			myChart.setOption(option);
		</script>
	</body>
</html>

chen_jia_hao

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
百度Echart展示世界地图效果

1、使用百度Echarts展示世界地图效果：2、实现代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="cjh_worl...
复制链接

扫一扫