给Echarts地图的tooltip添加按钮

tootip配置自定义内容并提供按钮可点击查看详细信息
效果如下图所示：

思路：

1. tooltip的formatter支持自定义提示框浮层内容，可在此处自定义显示内容及按钮
2. 给按钮绑定事件，触发时调用method中的方法。该方法中去做地图容器的事件监听，在回调函数中处理路由跳转显示详细信息。

<template>
	<div id="map"></div>
</template>

<script>
import echarts from 'echarts';
import 'echarts/extension/bmap/bmap';

export default {
	name: 'SMap',
	data() {
		return {
			myChart: null,
			city:'',
			list: []
		};
	},
	mounted() {
		// 基于准备好的dom，初始化echarts实例
		this.myChart = echarts.init(document.getElementById('map'));
		let _this = this;
		
		// 指定图表的配置项和数据
		var option = {
			backgroundColor: 'transparent',
			title: {
				text: '人员分布情况',
				left: 'center',
				top: '15',
				textStyle: {
					color: '#B81820',
					fontSize: 22
				}
			},
			tooltip: {
				trigger: 'item',
				formatter: function(params) {
					return (
						params.name +
						'<br />' +
						params.marker +
						'人数：' +
						params.value[2] +
						'<button class="more" type="button" onclick="' +
						_this.goToDetail(params.name) +
						'">查 看</button>'
					);
				},
				enterable: true,
				alwaysShowContent: true,
				position: function(point) {
					return [point[0] + 5, point[1] + 5];
				}
			},
			bmap: {...}   //百度地图自定义配置
		};

		// 使用刚指定的配置项和数据显示图表。
		this.myChart.setOption(option);
	},
	methods: {
		renderMap() {
			this.myChart.setOption({
				series: [
					{
						name: '人员',
						type: 'scatter',
						//使用bmap地图此处需配置为bmap
						coordinateSystem: 'bmap',
						data: this.list,
						symbolSize: function(val) {
							if (val[2] > 10) {
								return val[2] / 2;
							}
							return 8;
						},
						label: {
							formatter: '{b}',
							position: 'right',
							show: false
						},
						itemStyle: {
							color: '#B81820'
						},
						emphasis: {
							label: {
								show: true
							}
						}
					}
				]
			});
		},
		goToDetail(city) {
			this.city = city;
			document.getElementById('map').addEventListener('click', ev => {
				let el = ev.target;
				if (el.tagName.toLowerCase() === 'button' && el.className === 'more') {
					this.$router.push('/list/' + this.city);
				}
			});
		}
	}，
	watch: {
		list(val) {
			if (val) {
				this.renderMap();
			}
		}
	}
};
</script>

神奇的事情发生了。在页面加载后tooltip第一次显示时，goToDetail被调用了多次，导致查看按钮上绑定了多个点击事件。

为了解决这个问题，我们设置addEventflag变量来控制仅当第一次goToDetail被调用时，给map DOM添加事件监听。这样，查看按钮就不会被注册那么多的点击事件了。

	data() {
		return {
			addEventflag: false
		};
	}

methods:{
	goToDetail(city) {
			this.city = city;
			if (this.addEventflag) {
				return false;
			}
			document.getElementById('map').addEventListener('click', ev => {
				let el = ev.target;
				if (el.tagName.toLowerCase() === 'button' && el.className === 'more') {
					this.$router.push('/list/' + this.city + '/' + this.mapType);
				}
			});

			this.addEventflag = true;
		}
}

这下这个小功能就实现了=。=

全部代码如下：

<template>
	<div id="map"></div>
</template>

<script>
import echarts from 'echarts';
import 'echarts/extension/bmap/bmap';

export default {
	name: 'SMap',
	data() {
		return {
			myChart: null,
			list: [],
			city:'',
			addEventflag: false
		};
	},
	mounted() {
		// 基于准备好的dom，初始化echarts实例
		this.myChart = echarts.init(document.getElementById('map'));
		let _this = this;
		
		// 指定图表的配置项和数据
		var option = {
			backgroundColor: 'transparent',
			title: {
				text: '人员分布情况',
				left: 'center',
				top: '15',
				textStyle: {
					color: '#B81820',
					fontSize: 22
				}
			},
			tooltip: {
				trigger: 'item',
				formatter: function(params) {
					return (
						params.name +
						'<br />' +
						params.marker +
						'人数：' +
						params.value[2] +
						'<button class="more" type="button" onclick="' +
						_this.goToDetail(params.name) +
						'">查 看</button>'
					);
				},
				enterable: true,
				alwaysShowContent: true,
				position: function(point) {
					return [point[0] + 5, point[1] + 5];
				}
			},
			bmap: {...}   //百度地图自定义配置
		};

		// 使用刚指定的配置项和数据显示图表。
		this.myChart.setOption(option);
	},
	methods: {
		renderMap() {
			this.myChart.setOption({
				series: [
					{
						name: '人员',
						type: 'scatter',
						//使用bmap地图此处需配置为bmap
						coordinateSystem: 'bmap',
						data: this.list,
						symbolSize: function(val) {
							if (val[2] > 10) {
								return val[2] / 2;
							}
							return 8;
						},
						label: {
							formatter: '{b}',
							position: 'right',
							show: false
						},
						itemStyle: {
							color: '#B81820'
						},
						emphasis: {
							label: {
								show: true
							}
						}
					}
				]
			});
		},
		goToDetail(city) {
			this.city = city;
			if (this.addEventflag) {
				return false;
			}
			document.getElementById('map').addEventListener('click', ev => {
				let el = ev.target;
				if (el.tagName.toLowerCase() === 'button' && el.className === 'more') {
					this.$router.push('/list/' + this.city);
				}
			});

			this.addEventflag = true;
		}
	}，
	watch: {
		list(val) {
			if (val) {
				this.renderMap();
			}
		}
	}
};
</script>