point: 鼠标位置,如 [20, 40]。

params: 同 formatter 的参数相同。

dom: tooltip 的 dom 对象。

rect: 只有鼠标在图形上时有效,是一个用x, y, width, height四个属性表达的图形包围盒。

size: 包括 dom 的尺寸和 echarts 容器的当前尺寸,例如:{contentSize: [width, height], viewSize: [width, height]}。

好了既然了解回调参数,那么接下来就利用回调参数来进行更改,

首先获取鼠标位置当然point,还是要跟随鼠标位置的,这里就不需要我们自己去计算了,

然后将提示框的高度拿到,既然有dom,我们就操作dom,这里dom.dom.offsetHeight即为提示框高度,10这个值是对提示框的微调操作,

是不是很简单主要代码如下:

tooltip: {
        trigger: 'item',

backgroundColor:'rgba(255,255,255,0.3)',

padding:[10, 20],

textStyle:{
        color:'#fff',

fontSize:18,

lineHeight:'30px'

},

position: function (point, params, dom, rect, size) {
      return [point[0]+10, point[1]-dom.offsetHeight -10];

},

formatter: function(params) {
        var res = '<center>栏目<center>'

res+=params.name + ' : ' + params.value[2] + '&nbsp;台';

return res;

}

},
————————————————
版权声明:本文为CSDN博主「Mr.Tang's Blog」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_27751965/article/details/89223277

echarts 中国地图tooltip实现提示框的更多相关文章

  1. echarts 中国地图 数据自动提示

    mounted() { // 首先每种图是根据series -->type决定的 eg:bar--柱状图 line 折线图 pie饼图 map地图等等三部曲 跟着走 // @第一步都是初始化 v ...

  2. php数据映射到echarts中国地图

    echarts和php结合 根据php后台数据,映射到地图上所有的省份,地图市下钻的形式,每次下钻到新地图不合并(合并缩放的话会导致下钻地图位置找不到了),添加了自定义工具栏里面的返回到顶级下钻地图 ...

  3. Tooltip浮动提示框效果(掌握里面的小知识)

    使用原生JavaScript设计和实现Tooltip浮动提示框特效,了解代码简化.事件绑定.事件冒泡等技巧和知识. 特效四个关键点:显示:鼠标移到ToolTip超链接上时,ToolTip提示框可以显示 ...

  4. echarts中国地图散点涟漪效果

    echarts中国地图例子:http://gallery.echartsjs.com/editor.html?c=effectScatter-map 代码: var data = [{ name: ' ...

  5. echarts中国地图

    echarts中国地图效果图: =================== 需要引入echarts的js文件:(1.echarts.min.js:2.china.js) 下载地址: echarts.min ...

  6. echarts标准饼图解读(一)——提示框(tooltip)配置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. echarts 中国地图标注所在点

    达到的效果: 1.本身是个中国地图‘ 2.直接通过经纬度标注 3.标注点可以是其他样子(比如:五角星) 4.标注点具有提示框并且鼠标可以进入 5.提示框里的链接可点击(可以添加为链接事件): 所需要技 ...

  8. Echarts 中国地图(包括china.js文件)

    用Echarts写中国地图需要导入china.js(现在官方不提供下载,个人找的在最下面有),根据需要的效果如下.位置可以自己在option里面修改 <!DOCTYPE html> < ...

  9. 一个让echarts中国地图包含省市轮廓的技巧

    背景知识及应用简介 本文主要介绍一个使用ECharts地图组件的取巧方法,该技巧源于实际需求中遇到的问题,一般没有该需求的话这个技巧也是用不到的.有前端基础和以及对ECharts有了解的人基本可以读懂 ...

  10. EasyUI 学习(1)-Tooltip(提示框)

    一.创建组件 Tooltip不依赖其他组件 1.使用class加载 <a href="#" class="easyui-tooltip" title=&q ...

随机推荐

  1. win32-制作mini dump文件

    一个完整的用户模式dump是基本的用户模式转储文件. 此转储文件包括进程的整个内存空间,程序的可执行映像本身,句柄表以及其他信息,这些信息对于调试器在重建转储发生时正在使用的内存中很有用. 可以将完整 ...

  2. MySQL单表能存储多少条数据?

    MySQL是中小型网站普遍使用的数据库之一,然而,很多人并不清楚MySQL到底能支持多大的数据量,甚至对它产生误解.MySQL单表的上限,主要与操作系统支持的最大文件大小有关.事实上MySQL能承受的 ...

  3. file.deleteOnExit()与file.delete()的区别

    之前踩过一个坑,下载过的文件在我第二次打开app的时候奇迹的找不到了.难道是没有下载成功?为此我特地查看了我的本地文件路径的目录.事实证明文件的确是下载到了本地路径下,但是第二次进入app的时候,路径 ...

  4. 浅入 ABP 系列教程目录汇总

    浅入ABP(1):搭建基础结构的 ABP 解决方案 https://www.cnblogs.com/whuanle/p/13675889.html 浅入ABP(2):添加基础集成服务 https:// ...

  5. Mysql常用存储引擎以及区别?

    InnoDB:是Mysql的默认存储引擎,支持事务.外键.如果应用对事务的完整性有比较高的要求,在并发条件下要求数据的一致性,数据操作除了插入和查询之外,还包含很多的更新.删除操作,那么InnoDB存 ...

  6. 【小程序分包】小程序包大于2M,来这教你分包啊

    前言 缘由 该大的不大,小程序包超出2M,无法上传发布 前段时间项目迭代时,因版本大升级,导致uniapp打包后小程序后,包体积大于2M.虽然将图片等静态资源压缩,体积大的资源放置cdn,在不懈的努力 ...

  7. 15. JVM垃圾回收器详解

    1. 垃圾回收器的分类 和 GC性能指标 垃圾收集器没有在规范中进行过多的规定,可以由不同的厂商.不同版本的JVM来实现. 由于JDK的版本处于高速迭代过程中,因此Java发展至今已经衍生了众多的GC ...

  8. 4、zookeeper的事件监听机制

    watcher概念 https://zookeeper.apache.org/doc/r3.4.14/zookeeperProgrammers.html#sc_WatchRememberThese z ...

  9. 俄罗斯套娃 (Matryoshka) 嵌入模型概述

    在这篇博客中,我们将向你介绍俄罗斯套娃嵌入的概念,并解释为什么它们很有用.我们将讨论这些模型在理论上是如何训练的,以及你如何使用 Sentence Transformers 来训练它们. 除此之外,我 ...

  10. vscode复制相对路径时是反斜杠\,改为正斜杠/ [转]

    痛点:复制路径的时候斜杠不对 解决:explorer.copyRelativePathSeparator 设置 在跳出来的设置页面的搜索栏里输入explorer.copyRelativePathSep ...