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 ...
随机推荐
- HDU 4725 The Shortest Path in Nya Graph(构图)
The Shortest Path in Nya Graph Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ...
- Kafka创建Topic时如何将分区放置到不同的Broker中
熟悉 Kafka的同学肯定知道,每个主题有多个分区,每个分区会存在多个副本,本文今天要讨论的是这些副本是怎么样放置在 Kafka集群的 Broker 中的. 大家可能在网上看过这方面的知识,网上对这方 ...
- 【vue】如何在 Vue-cli 创建的项目中引入 iView
根据vue项目的搭建教程,以下记录如何在Vue-cli创建的项目中引入iView. 1)iView的安装,在项目下使用 npm 安装iView cnpm install iview --save ...
- ubuntu-18.04 root登录图形界面失败问题解决方案
一.设置root密码 二.进入/etc/pam.d目录 主要修改两个文件(圈了红色框框),记得命令行下切换root账户(sudo -i)进行vim修改,刚安装的ubuntu没有vim支持,请根据提示进 ...
- RPC框架-通俗易懂的解释
早期单机时代,一台电脑上运行多个进程,大家各干各的,老死不相往来.假如A进程需要一个画图的功能,B进程也需要一个画图的功能,程序员就必须为两个进程都写一个画图的功能.这不是整人么?于是就出现了IPC( ...
- SPOJ - TSUM 母函数+FFT+容斥
题意:n个数,任取三个加起来,问每个可能的结果的方案数. 题解:构造母函数ABC,比如现在有 1 2 3 三个数.则 其中B表示同一个数加两次,C表示用三次.然后考虑去重. A^3表示可重复地拿三个. ...
- xCode 升级9.3之后巨卡
因为项目要适配iPhone8, iPhoneX 等.需要升级Xcode需要升级到9.3.但是 MAC系统是10.12的,需要升级到10.13. 系统升级完之后升级Xcode.之后Xcode 就各种卡. ...
- iOS打包上传问题
iOS 打包不成功的原因: 1.打包时在下图 code signing没有选择发布证书 2.没有配置好pp文件 3.targets-> general 和 setting设置的签名方式不一样,要 ...
- Exception 07 : org.hibernate.LazyInitializationException: could not initialize proxy - no Session
异常名称: org.hibernate.LazyInitializationException: could not initialize proxy - no Session 异常截图: 异常详情: ...
- Java代理和动态代理机制分析和应用
本博文中项目代码已开源下载地址:GitHub Java代理和动态代理机制分析和应用 概述 代理是一种常用的设计模式,其目的就是为其他对象提供一个代理以控制对某个对象的访问.代理类负责为委托类预处理消息 ...