echarts 模仿3D地图 实现数据动态交互

实现的效果图

在这里插入图片描述
首先要获取地图数据------json或者geojson格式的文件

可以通过 echarts-map最新实时geoJson文件下载*
map地图 geoJson文件下载地址 https://hxkj.vip/demo/echartsMap

话不多说,代码如下:

var uploadedDataURL = "common/nanjing.geoJson"; // 根目录下面  如果地图加载不出来  看一下是不是文件路径写错了

function showProvince() {
	var name = '南京市';
	var option
	$.get(uploadedDataURL, function(geoJson) {
		echarts.registerMap(name, geoJson);
		mapCenter.setOption(option = {
			tooltip: { //提示框组件。
				trigger: 'item', //数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。
				textStyle: {
					fontSize: '12',
				},
				backgroundColor: 'rgba(50,50,50,0)',
				padding: 0,
				enterable: true,
				position: 'inside',
				formatter: function(params) {
					//地图上面展示出来的数据
					var tipHtml = '';
					tipHtml =
						`<div class="mapStyle">
						<div>${params.name}</div>
						<div class="firsts">项目数:${params.value}</div>
						</div>`;
					return tipHtml;
				}
			},
			geo: [{
				show: true,
				map: name, // 地区名字  如 本项目中的 “南京”
				aspectScale: 1, // 地图倾斜度
				zoom: 1.15, // 地图放大倍数
				label: {
					normal: {
						show: false
					},
					emphasis: {
						show: false,
					}
				},
				roam: false, //地图设置不可拖拽,固定的
				itemStyle: {
					normal: {
						areaColor: '#00FFFF', // 地图颜色
						borderWidth: 4, // 边框的宽度
						shadowColor: '#0098d9', //  阴影颜色
						borderColor: '#00FFFF', // 边框颜色
						// shadowOffsetX: -5,
						// shadowOffsetY: 10,
						shadowBlur: 12, // 阴影的模糊大小
						shadowOffsetX: 0, //阴影水平方向上的偏移距离
						shadowOffsetY: 12, // 阴影垂直方向上的偏移距离
					},
					emphasis: {
						show: false,
					}
				}
			}],
			series: [{
				name: '企业数量',
				type: 'map',
				mapType: name,
				aspectScale: 1,
				zoom: 1.15,
				label: {
					normal: {
						show: true,
						textStyle: {
							color: "#fff",
							fontSize: "12"
						}
					},
					emphasis: {
						show: false,
						textStyle: {
							fontSize: "12"
						}
					}
				},
				itemStyle: {
					normal: {
						areaColor: '#0371a0',
						borderColor: '#00FFFF',
					},
				},
				animation: false,
				data: [{
						"name": "玄武区",
						"value": 351
					}, {
						"name": "秦淮区",
						"value": 100
					}, {
						"name": "建邺区",
						"value": 68
					}, {
						"name": "鼓楼区",
						"value": 563
					}, {
						"name": "浦口区",
						"value": 91
					}, {
						"name": "栖霞区",
						"value": 947
					}, {
						"name": "雨花台区",
						"value": 228
					}, {
						"name": "江宁区",
						"value": 989
					}, {
						"name": "六合区",
						"value": 801
					}, {
						"name": "溧水区",
						"value": 989
					},
					{
						"name": "高淳区",
						"value": 989
					},
				]
			}]
		});
		var count = 0; // 定义变量 来控制地图显示的数据和左下角数据相同 相当于数组索引
		var timeTicket = null; 
		var dataLength = option.series[0].data.length;
		timeTicket && clearInterval(timeTicket);
		timeTicket = setInterval(function() {  // 页面初始化
			mapCenter.dispatchAction({
				type: 'downplay',
				seriesIndex: 0,
			});
			mapCenter.dispatchAction({
				type: 'showTip',
				seriesIndex: 0,
				dataIndex: (count) % dataLength,
			});
			if (count > 10) { // 根据你的项目情况 来判断count的大小
				count = 0
			}
			$('.eCenTops').text(option.series[0].data[count].name)
			$('.spanOne').text(option.series[0].data[count].value)
			$('.spanTwo').text(option.series[0].data[count].value)
			$('.spanThree').text(option.series[0].data[count].value)
			count++;
		}, 1500);

		mapCenter.on('mouseover', function(params) { // 鼠标移入是显示的数据
			console.log(params)
			clearInterval(timeTicket);
			mapCenter.dispatchAction({
				type: 'downplay',
				seriesIndex: 0
			});
			mapCenter.dispatchAction({
				type: 'showTip',
				seriesIndex: 0,
				dataIndex: params.dataIndex,
			});
			$('.eCenTops').text(params.data.name)
			$('.spanOne').text(params.data.value)
			$('.spanTwo').text(params.data.value)
			$('.spanThree').text(params.data.value)
		});
		mapCenter.on('mouseout', function(params) { // 鼠标移出是显示的数据
			console.log(params)
			timeTicket && clearInterval(timeTicket);
			timeTicket = setInterval(function() {
				mapCenter.dispatchAction({
					type: 'downplay',
					seriesIndex: 0,
				});
				mapCenter.dispatchAction({
					type: 'showTip',
					seriesIndex: 0,
					dataIndex: (count) % dataLength
				});
				if (count > 10) { 
					count = 0
				}
				$('.eCenTops').text(option.series[0].data[count].name)
				$('.spanOne').text(option.series[0].data[count].value)
				$('.spanTwo').text(option.series[0].data[count].value)
				$('.spanThree').text(option.series[0].data[count].value)
				count++
			}, 1500);
		});
	});

}
showProvince();
window.addEventListener('resize', function() {
	this.mapCenter.resize();// 自适应
})
  • 2
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值