給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>