Echarts3之全国地图和省市地图二合一整合

最新推荐文章于 2024-08-12 10:43:05 发布

Dr.Zhu

最新推荐文章于 2024-08-12 10:43:05 发布

阅读量9.6k

点赞数 2

分类专栏： Echarts

本文链接：https://blog.csdn.net/zt_fucker/article/details/52593010

版权

Echarts 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

没图说个ji 先上图

开始接触时是echarts 2 ，echarts升级至echarts 3 之后没怎么接触，通过介绍了解到，echarts3变得更加人性化，将一些底层的方法开放出来，增加的echarts的扩展性。

很遗憾echarts3并没有提供市级的地图的demo。

于是将echarts2中的demo直接拿来改

下面是代码：希望能帮助到你

<!DOCTYPE html>

<head>
	<meta charset="utf-8">
	<title>ECharts</title>
	<!-- ECharts单文件引入 -->
	<script src="js/echarts3.js"></script>
	<script src="js/china.js"></script>
	<script src="js/shandong.js"></script>
	<script src="js/hebei.js"></script>
</head>

<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="height:400px"></div>
</body>
<script type="text/javascript">
	var myChart = echarts.init(document.getElementById('main'));
	var option = {
		tooltip: {
			trigger: 'item'
		},
		legend: {
			orient: 'vertical',
			x: 'left',
			data: ['iphone3']
		},
		visualMap : {
			min: 0,
			max: 1000,
			x: 'left',
			y: 'bottom',
			color: ['orangered','yellow','lightskyblue'],
			text: ['高', '低'], // 文本，默认为数值文本
			calculable: true
		},
		toolbox: {
			show: true,
			orient: 'vertical',
			x: 'right',
			y: 'center',
			feature: {
				mark: {
					show: true
				},
				dataView: {
					show: true,
					readOnly: false
				}
			}
		},
		series: [{
			tooltip: {
				trigger: 'item',
			},
			name: 'iphone3',
			type: 'map',
			mapType: 'china',
			left: 10,
			selectedMode: 'single',
			label: {
				normal: {
					show: true,
					textStyle: {
						fontSize: 9,
					}
				},
				emphasis: {
					show: true,
					textStyle: {
						fontStyle: 'oblique',
						fontSize: 9,
					}
				}
			},
			showLegendSymbol: false,
			data: [{
				name: '北京',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '天津',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '上海',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '重庆',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '河北',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '河南',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '云南',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '辽宁',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '黑龙江',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '湖南',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '安徽',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '山东',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '新疆',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '江苏',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '浙江',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '江西',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '湖北',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '广西',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '甘肃',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '山西',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '内蒙古',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '陕西',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '吉林',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '福建',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '贵州',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '广东',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '青海',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '西藏',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '四川',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '宁夏',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '海南',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '台湾',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '香港',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}, {
				name: '澳门',
				selected: false,
				value: Math.round(Math.random() * 1000)
			}]
		}, ],
	};
	myChart.on('mapselectchanged', function(param) {
		var selected = param.selected;
		var selectedProvince;
		var name;
		for(var i = 0, l = option.series[0].data.length; i < l; i++) {
			name = option.series[0].data[i].name;
			option.series[0].data[i].selected = selected[name];
			if(selected[name]) {
				selectedProvince = name;
			}
		}
		if(typeof selectedProvince == 'undefined') {
			option.series.splice(1);
			myChart.setOption(option, true);
			return;
		}
		option.series[1] = {
			name: '随机数据',
			type: 'map',
			mapType: selectedProvince,
			showLegendSymbol: false,
			label: {
				normal: {
					show: true,
					textStyle: {
						fontSize: 9,
					}
				},
				emphasis: {
					show: true,
					textStyle: {
						fontStyle: 'oblique',
						fontSize: 9,
					}
				}
			},
			mapLocation: {
				x: '35%'
			},
			roam: true,
			data: [{
				name: '烟台市',
				value: Math.round(Math.random() * 1000)
			}, {
				name: '临沂市',
				value: Math.round(Math.random() * 1000)
			}, {
				name: '潍坊市',
				value: Math.round(Math.random() * 1000)
			}, {
				name: '青岛市',
				value: Math.round(Math.random() * 1000)
			}, {
				name: '菏泽市',
				value: Math.round(Math.random() * 1000)
			}, {
				name: '济宁市',
				value: Math.round(Math.random() * 1000)
			}, {
				name: '德州市',
				value: Math.round(Math.random() * 1000)
			}, {
				name: '滨州市',
				value: Math.round(Math.random() * 1000)
			}, {
				name: '聊城市',
				value: Math.round(Math.random() * 1000)
			}, {
				name: '东营市',
				value: Math.round(Math.random() * 1000)
			}, {
				name: '济南市',
				value: Math.round(Math.random() * 1000)
			}, {
				name: '泰安市',
				value: Math.round(Math.random() * 1000)
			}, {
				name: '威海市',
				value: Math.round(Math.random() * 1000)
			}, {
				name: '日照市',
				value: Math.round(Math.random() * 1000)
			}, {
				name: '淄博市',
				value: Math.round(Math.random() * 1000)
			}, {
				name: '枣庄市',
				value: Math.round(Math.random() * 1000)
			}, {
				name: '莱芜市',
				value: Math.round(Math.random() * 1000)
			}, {
				name: '张家口市',
				value: Math.round(Math.random() * 1000)
			}, {
				name: '保定市',
				value: Math.round(Math.random() * 1000)
			}, {
				name: '唐山市',
				value: Math.round(Math.random() * 1000)
			}, {
				name: '沧州市',
				value: Math.round(Math.random() * 1000)
			}, {
				name: '石家庄市',
				value: Math.round(Math.random() * 1000)
			}, {
				name: '邢台市',
				value: Math.round(Math.random() * 1000)
			}, {
				name: '邯郸市',
				value: Math.round(Math.random() * 1000)
			}, {
				name: '秦皇岛市',
				value: Math.round(Math.random() * 1000)
			}, {
				name: '衡水市',
				value: Math.round(Math.random() * 1000)
			}, {
				name: '廊坊市',
				value: Math.round(Math.random() * 1000)
			}, ]
		};
		option.legend = {
			orient: 'vertical',
			x: 'left',
			data: ['iphone3']
		};
		option.visualMap = {
			min: 0,
			max: 1000,
			x: 'left',
			y: 'bottom',
			color: ['orangered','yellow','lightskyblue'],
			text: ['高', '低'], // 文本，默认为数值文本
			calculable: true
		};
		myChart.setOption(option, true);
	});
	// 为echarts对象加载数据 
	myChart.setOption(option);
</script>

但是这个程序有很多限制的因素：

①全国各省和省内各市数据共用同一套dataRange，在省内数据和省内各市数据相差比较大的时候，市内数据颜色变化不明显，影响用户体验。

②点击地图内省会触发一个mapselectchanged的函数，当选中省的时候触发获取到点击省的详细信息，但是如果取消选中的话，程序传入的对象就变成了undefined，需要找到判断undefined的代码处修改，当初我找的时候走了很多弯路，（取消选中的时候怎么可能传入的是undefined！！！但是事实上就是这样）。当初想对选中和取消选中进行单独的处理，但是最后以失败告终（主要是dispatchAction不太会用，或者根本在这没什么卵用）
以上就是主要的问题