说说如何基于 Vue.js 、element UI 与 Echart 实现一张地图展示多个区域提示框

1 需求变更

省级区域图实现效果给客户看了之后，客户希望可以一次性把所有区域的数据展示在地图周围。

原计划是想用 echart 的 tooltip 提示框组件来实现。实验之后发现 echart 地图只支持弹出一个 tooltip 提示框。这样显然无法满足要求。

转而考虑使用 element UI 的 tooltip 组件。

实现效果：

2 element UI Tooltip 组件

Tooltip 组件常用于展示鼠标 hover 时的提示信息。

Tooltip 组件使用 content 属性来决定 hover 时的提示信息。由 placement 属性决定展示效果： placement 属性值为：方向 - 对齐位置；四个方向： top、left、right、bottom ；三种对齐位置： start ， end ，默认为空。如 placement ="left-end "，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。

它包含以下属性参数：

参数	类型	可选值	默认值	说明
effect	String	dark/light	dark	主题颜色，目前只提供了两种主题。
content	String	-	-	显示的内容。
placement	String	top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end	bottom	Tooltip 的出现位置。
value	Boolean	-	false	是否可见。
disabled	Boolean	-	false	Tooltip 是否可用。
offset	Number	-	0	出现位置的偏移量。
transition	String