echarts自定义悬浮框的显示
最近在使用echarts的地图功能 ,业务需求是显示前五的具体信息,并且轮流显示,首先解决轮流显示的问题
var counta = 0; //播放所在下标
var mTime = setInterval(function () {
chinamap.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: counta
});
counta++;
if (counta > 4) {
counta = 0;
}
}, 2000);
以上代码是轮播显示悬浮框的,但是设置这个显示的条件是得配置tooltip配置项
tooltip: {
// alwaysShowContent: true,
position: ['30%', '80%'],
formatter: (p) => {
console.log(p.data.coords[2].split(' '))
return p.data.coords[2].split(' ')[0] + '<br/>' + p.data.coords[2].split(' ')[1]
}
},
以上代码是设置的悬浮框的位置,以及显示的内容,return就是显示的内容
显示内容的控制则需要在data中进行配置,我是在函数中根据data和地理位置统一设置的
function formtGCData(geoData, data, srcNam, dest) {
var tGeoDt = [];
if (dest) {
for (var i = 0, len = data.length; i < len; i++) {
if (srcNam != data[i][0].name) {
tGeoDt.push({
coords: [geoData[srcNam], geoData[data[i][0].name], (i + 1) + ' ' + data[i][0].name + ' ' + data[i][0].value]//放入属性值来控制提示框的内容
});
}
}
} else {
for (var i = 0, len = data.length; i < len; i++) {
if (srcNam != data[i][0].name) {
tGeoDt.push({
coords: [geoData[data[i][0].name], geoData[data[i][0].name], data[i][0].value]
});
}
}
}
// console.log(tGeoDt)
return tGeoDt;
}
此处的返回的就是对应tooltip中的data,可以在处理数据的时候放入对应想显示的信息,然后在tooltip中获取,在配合计时器就能实现轮播自定义的悬浮框的内容了
echarts自定义悬浮框的显示的更多相关文章
- Echarts 的悬浮框tooltip显示自定义格式化
最近做的项目用到echarts雷达图,但是由于地市过多,遇到悬浮框显示问题被遮住 如图: 可以看到上面从兴安开始数据就被遮住了 为了解决这个被遮住的悬浮框,达到tooltip自定义格式 完成后的效果如 ...
- Echarts地图悬浮框显示多组series数据以及修改地图大小
1.如何让echarts的地图悬浮框出现多组series数据? 2.如何更改地图默认的大小? <!DOCTYPE html> <html lang="en"> ...
- Echarts之悬浮框中的数据排序
Echarts非常强大,配置也非常的多,有很多细节需要深入研究.详解一下关于悬浮框中的数据排序问题 悬浮框的数据排序默认是根据series中的数据位置排序的,在我们想自定义排序时,在echarts的配 ...
- Android -- 使用WindowManager实现悬浮框效果
1,原文在这里http://blog.csdn.net/qq_17250009/article/details/52908791,我只是把里面的关键步骤给注释了一下,首先来看一下我们的效果,如图(电脑 ...
- 菜鸟学JS(三)——自动隐藏的悬浮框
今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框.css肯定是用来控制样式的,js用来控制器显示与隐藏的.显示与隐藏通常有两种方法实现:1,用js控制其显示属性:2,用js控制其大小. 今天 ...
- Echarts ecomfe 触摸屏 touch 在IE10下无法显示悬浮框
问题描述: Windows 8 IE10浏览http://echarts.baidu.com/doc/example/line2.html 时,鼠标放置在数据点上时无法显示悬浮框. 正常情况为: 而现 ...
- echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮
echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮 >>>>>>>>>>>>>>&g ...
- Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示
一.设置文字超出宽度显示省略号 注意点: 1. 需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...
- C# 鼠标悬停在datagridview的某单元格,显示悬浮框效果
今天在做项目时,看到一软件做的悬浮框效果不错,从网上搜罗了一些资料,未见到有十分好的解决办法,只能自已动手,利用datagridview 的ToolTipText 来达到此效果. 以下是我简单实现的代 ...
随机推荐
- dedecms手机站和PC站共用同一数据库的方法
我们知道搜索引擎建议将手机站和PC站分开,虽然自适应可以适配不同的终端,但单独建独立的m站可能权重和排名更好,因为移动端的竞争度不同甚至更低.代码更精简.蜘蛛抓取更顺畅,所以要单独建手机站比较好.那么 ...
- offsetHeight在不同的浏览器下取值不同
今天在调js的时候,发现firefox和IE在取document.body.offsetHeight的值的时候结果不一样.上网查了一下,发现如下结果: 这四种浏览器分别为IE(Internet E ...
- jenkins中 Slave使用Docker
原因就不说了,网上的自动化测试Docker教程太不靠谱,还是学学官网吧. 目的: 在现在各种虚拟化的大条件下,还在建立N个节点机器或节点机器搞N个并发,是不是太不方便了. 如果一个机器搞N个并发,在自 ...
- [冬令营day1T3]Tree
题目描述 Description 给一棵N个节点的无根树,求路径长度=K的简单路径数 输入描述 Input Description 第一行两个正整数N,K 接下来N-1行,每行两个正整数x,y,表示 ...
- 攻防世界(Ctf-Web 新手练习区)
题目:view_source 在url的前面加上个 “view-source: ”就看到flag了,或者“CTRL+U”快捷键查看源码 flag:cyberpeace{e07dcafaeeb31df2 ...
- 【LG3647】[APIO2014]连珠线
[LG3647][APIO2014]连珠线 题面 洛谷 题解 首先考虑一下蓝线连起来的情况,一定是儿子-父亲-另一个儿子或者是儿子-父亲-父亲的父亲. 而因为一开始只有一个点在当前局面上,将一条红边变 ...
- 实例解读什么是Redis缓存穿透、缓存雪崩和缓存击穿
from:https://baijiahao.baidu.com/s?id=1619572269435584821&wfr=spider&for=pc Redis缓存的使用,极大的提升 ...
- 【转】【linux】查看文件夹大小
du的用法 du命令用来查看目录或文件所占用磁盘空间的大小.常用选项组合为:du -sh du常用的选项: -h:以人类可读的方式显示 -a:显示目录占用的磁盘空间大小,还要显示其下目录和文件占用磁盘 ...
- 生成Makefile文件全过程
[1]生成Makefile文件全过程 整体流程如下图: 注意:以下文件根目录为testmake(任意位置新建即可) (1)测试程序 1.1 建立两个目录:mkdir include source 1. ...
- STM8L独立看门狗IWDG
简单扼要 void IWDG_Init(void)//初始化 { IWDG->KR = 0xcc;//启动IWDG IWDG->KR = 0x55;//解除PR及RLR的写保护 IWDG- ...