echarts 中国地图tooltip实现提示框
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] + ' 台';
return res;
}
},
————————————————
版权声明:本文为CSDN博主「Mr.Tang's Blog」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_27751965/article/details/89223277
echarts 中国地图tooltip实现提示框的更多相关文章
- echarts 中国地图 数据自动提示
mounted() { // 首先每种图是根据series -->type决定的 eg:bar--柱状图 line 折线图 pie饼图 map地图等等三部曲 跟着走 // @第一步都是初始化 v ...
- php数据映射到echarts中国地图
echarts和php结合 根据php后台数据,映射到地图上所有的省份,地图市下钻的形式,每次下钻到新地图不合并(合并缩放的话会导致下钻地图位置找不到了),添加了自定义工具栏里面的返回到顶级下钻地图 ...
- Tooltip浮动提示框效果(掌握里面的小知识)
使用原生JavaScript设计和实现Tooltip浮动提示框特效,了解代码简化.事件绑定.事件冒泡等技巧和知识. 特效四个关键点:显示:鼠标移到ToolTip超链接上时,ToolTip提示框可以显示 ...
- echarts中国地图散点涟漪效果
echarts中国地图例子:http://gallery.echartsjs.com/editor.html?c=effectScatter-map 代码: var data = [{ name: ' ...
- echarts中国地图
echarts中国地图效果图: =================== 需要引入echarts的js文件:(1.echarts.min.js:2.china.js) 下载地址: echarts.min ...
- echarts标准饼图解读(一)——提示框(tooltip)配置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- echarts 中国地图标注所在点
达到的效果: 1.本身是个中国地图‘ 2.直接通过经纬度标注 3.标注点可以是其他样子(比如:五角星) 4.标注点具有提示框并且鼠标可以进入 5.提示框里的链接可点击(可以添加为链接事件): 所需要技 ...
- Echarts 中国地图(包括china.js文件)
用Echarts写中国地图需要导入china.js(现在官方不提供下载,个人找的在最下面有),根据需要的效果如下.位置可以自己在option里面修改 <!DOCTYPE html> < ...
- 一个让echarts中国地图包含省市轮廓的技巧
背景知识及应用简介 本文主要介绍一个使用ECharts地图组件的取巧方法,该技巧源于实际需求中遇到的问题,一般没有该需求的话这个技巧也是用不到的.有前端基础和以及对ECharts有了解的人基本可以读懂 ...
- EasyUI 学习(1)-Tooltip(提示框)
一.创建组件 Tooltip不依赖其他组件 1.使用class加载 <a href="#" class="easyui-tooltip" title=&q ...
随机推荐
- 解决linux下zip文件解压后中文乱码问题
最近项目上碰到在windows上压缩了一些图片,图片文件名称都是中文的,scp到linux下用unzip解压后文件名 全是乱码,找了半天解决方案,下面这个亲测可行,特记录一下,与大家分享: 原因: 由 ...
- 2021-07-30 JavaScript中常用数据的判断
为什么要判断一个变量的常用数据? 实际业务场景里,一个变量的数据是否合法或符合预期,会影响到项目中用到的UI组件库特定组件的运行.比如element-ui中的el-select组件,单选时绑定的数据不 ...
- file.deleteOnExit()与file.delete()的区别
之前踩过一个坑,下载过的文件在我第二次打开app的时候奇迹的找不到了.难道是没有下载成功?为此我特地查看了我的本地文件路径的目录.事实证明文件的确是下载到了本地路径下,但是第二次进入app的时候,路径 ...
- JS内存爆破问题
原理 检测到调试,格式化等,疯狂的在js文件,或者html中进行读写,cookie重写追加,字节追加,导致内存不足够,卡死 内存爆破,指js通过死循环/频繁操作数据库(包括cookie)/频繁调取hi ...
- STM32标准库内部Flash读写
STM32标准库FLASH读写 1. STM32内部FLASH介绍 STM32系列一般集成有内部flash,这部分内存可以直接通过指针的形式进行读取.但是由于内部flash一般存储为重要数据或程序运行 ...
- Nebula Graph 源码解读系列 | Vol.03 Planner 的实现
上篇我们讲到 Validator 会将由 Parser 生成的抽象语法树(AST)转化为执行计划,这次,我们来讲下执行计划是如何生成的. 概述 Planner 是执行计划(Execution Plan ...
- 一: Mysql字符集问题
## Mysql 字符集问题 1 修改MySQL5.7字符集 1.1 修改步骤 在MySQL 8.0版本之前,默认字符集为 latin1 ,utf8字符集指向的是 utf8mb3 .网站开发人员在数据 ...
- 以Servlet来解释 抽象实现类
在 Java Servlet API 中: Servlet 接口定义了一个 Servlet 的基本行为.这个接口是抽象的,因为它包含抽象方法,比如 service(), init(), 和 destr ...
- SQL之基本查询
提纲 记录查询 使用列别名 查询语句执行顺序 数据分页 子句执行顺序 结果集排序 PS: 排序注意 多个排序字段 子句执行顺序 结果集去除重复数据 注意: 条件查询 比较运算符 注意 子句执行顺序
- 如何使用疯狂URL获取抖音推流码地址(抖音推流码地址获取教程)
本节所用到的工具:疯狂URL.OBS推流工具 什么是推流地址? 平时我们如果是下载直播,叫拉流.但如果是你自己要直播,属于上传直播流数据,叫推流,即:把直播流数据推送到视频服务器,然后别人才能看到直播 ...