echarts 实现tooltip双栏效果
实现效果如下:

代码:
//option
tooltip: {
trigger: 'axis',
axisPointer: {
label: {
show: true,
fontSize: 15
}
},
formatter: this.formatter
},
// formatter function
formatter (params){
let temp=[];
let temp2='';
let leftSide='';
let rightSide='';
for( let item of params){
temp.push({
seriesName:item.seriesName,
value:item.value
})
}
let arr=temp.sort(this.sortValue);
let midValue=Math.ceil(arr.length/2);
for(let [key,item] of arr.entries()){
item.seriesName="测试数据";
if(key< midValue&&midValue>4){
if(isNaN(item.value)){
leftSide+=`${item.seriesName}: 无数据<br>`;
}else{
leftSide+=`${item.seriesName}: ${item.value}<br>`;
}
}else{
if(isNaN(item.value)){
rightSide+=`${item.seriesName}: 无数据<br>`;
}else{
rightSide+=`${item.seriesName}: ${item.value}<br>`;
}
}
}
temp2=`<div class="my-flex">
<div>${leftSide}</div>
<div style="margin-left:20px;">${rightSide}</div>
</div>`;
return temp2;
},
echarts 实现tooltip双栏效果的更多相关文章
- Web之路笔记之三 - 使用Floating实现双栏样式
2014秋季学期Web2.0课程实验 <Lab2 - Journal> 1. 对CSS的BOX MODEL进行亲密接触,理解他的用途. 2. 在float图片的时候,发现此时图片脱离了原来 ...
- Latex: 参考文献双栏对齐
参考: How to level columns in bibliography? Latex: 参考文献双栏对齐 需要实现的效果: 方法1: 在开头引用balance: \usepackage{ba ...
- ng1中 如何用双向绑定 实现单向绑定的初始时不显示双括号效果?
ng1中 如何用双向绑定 实现单向绑定(ng-bind就可以不显示{{}})的初始时不显示双括号效果? AngularJS 实例 页面加载时防止应用闪烁: <div ng-app="& ...
- 【分享】纯jQuery实现星巴克官网导航栏效果
前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...
- css遮罩蒙版效果 分栏效果
mask遮罩蒙版效果 来看一下效果图: 这是两张原图: 遮罩层图像 注意,白色区域为透明状态 要展示的图像 使用mask之后产生的效果图 首先来解释一下遮罩.蒙版.和PS中的蒙版.Flash中 ...
- 移动端如何用swiper实现导航栏效果
在移动端如何用swiper实现导航栏效果 我们在写移动端的时候会有滑动和点击导航后滑动到目标页面功能:而这个功能如果自己写的话会很麻烦,所以我在这推荐一下swiper这个插件. 其实swiper中的官 ...
- 【方法】纯jQuery实现星巴克官网导航栏效果
前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...
- Word中公式从单栏排版变为双栏排版后公式和编号错开了
如上图公式(2),把自己做的共识从通栏复制到期刊的双栏里就变成这样了(先复制过来参考文献,再复制正文,那么参考文献没事),原来一直搞不懂,今天把它显示所有标记发现多了个制表符(我原来以为是行标记),鼠 ...
- echarts自定义tooltip提示框内容
1.echarts自定义tooltip提示框内容 https://blog.csdn.net/dreamsup/article/details/56667330 2.关于Echarts的formatt ...
随机推荐
- Ubuntu下U盘变成只读的解决方法
首先执行命令: tail -f /var/log/syslog 然后插入有问题的U盘,tail会打印一些log: Jan :: zkw- kernel: [-: new high-speed USB ...
- day_5.26python面试重点
列表生成式: ''' 2018-5-26 19:40:58 生成器(generator):在Python中,这种⼀边循环⼀边计算的机制. ''' # 第一种实现 :只要把⼀个列表⽣成式的[ ]改成( ...
- day_5.25py
作用域
- golang - channels
如果说goroutine是Go语音程序的并发体的话,那么channels它们之间的通信机制.一个channels是一个通信机制,它可以让一个goroutine通过它给另一个goroutine发送值信息 ...
- 如何移植freertos
要素: 1.两个主要的文件夹移动 2.freertos_config 复制,决定了系统时钟启动位置 3. 启动汇编复制替换 4.it中断管理文件 的相关三个中断注释掉 5.复制delay文件,主要是s ...
- LeetCode 155 - 最小栈 - [数组模拟栈]
题目链接:https://leetcode-cn.com/problems/min-stack/description/ 设计一个支持 push,pop,top 操作,并能在常数时间内检索到最小元素的 ...
- 业界微服务楷模Netflix是这样构建微服务技术架构的
1. 如不考虑组织架构,直接切入技术架构(很多架构师的通病),则失败风险巨大. https://mp.weixin.qq.com/s/C8Rdz9wFtrBKfxPRzf0OBQ
- dhttp与IdCookieManager处理登陆过程
dhttp与IdCookieManager处理登陆过程 我们知道,用IE注册网页(象论坛)时,它能够自动找出相应的Cookie并提交给服务器,从而使用户不用重新登录就能够看到与他自己帐号有关的内容.这 ...
- RHEL6.2的安装文档
1 Installing RHEL 6.2 1.1 开始安装 选择“Install or upgrade an existing system”: 1.2 光盘检测 选择“Skip”跳过安装介质的检查 ...
- 理解Python的双下划线命名(转)
add by zhj:今天在学习SimpleHTTPServer的源代码时,看到了Python标准库SocketServer模块中有个BaseServer类,该类的__init__方法定义如下 def ...