说说如何基于 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 ",则提示信息出现在目标元素的左侧,且提示信息的底部与目标元素的底部对齐。

它包含以下属性参数:

猜你喜欢

转载自blog.csdn.net/deniro_li/article/details/105308174