实现效果如下:

代码:

//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双栏效果的更多相关文章

  1. Web之路笔记之三 - 使用Floating实现双栏样式

    2014秋季学期Web2.0课程实验 <Lab2 - Journal> 1. 对CSS的BOX MODEL进行亲密接触,理解他的用途. 2. 在float图片的时候,发现此时图片脱离了原来 ...

  2. Latex: 参考文献双栏对齐

    参考: How to level columns in bibliography? Latex: 参考文献双栏对齐 需要实现的效果: 方法1: 在开头引用balance: \usepackage{ba ...

  3. ng1中 如何用双向绑定 实现单向绑定的初始时不显示双括号效果?

    ng1中 如何用双向绑定 实现单向绑定(ng-bind就可以不显示{{}})的初始时不显示双括号效果? AngularJS 实例 页面加载时防止应用闪烁: <div ng-app="& ...

  4. 【分享】纯jQuery实现星巴克官网导航栏效果

    前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...

  5. css遮罩蒙版效果 分栏效果

    mask遮罩蒙版效果 来看一下效果图: 这是两张原图: 遮罩层图像 注意,白色区域为透明状态   要展示的图像 使用mask之后产生的效果图   首先来解释一下遮罩.蒙版.和PS中的蒙版.Flash中 ...

  6. 移动端如何用swiper实现导航栏效果

    在移动端如何用swiper实现导航栏效果 我们在写移动端的时候会有滑动和点击导航后滑动到目标页面功能:而这个功能如果自己写的话会很麻烦,所以我在这推荐一下swiper这个插件. 其实swiper中的官 ...

  7. 【方法】纯jQuery实现星巴克官网导航栏效果

    前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...

  8. Word中公式从单栏排版变为双栏排版后公式和编号错开了

    如上图公式(2),把自己做的共识从通栏复制到期刊的双栏里就变成这样了(先复制过来参考文献,再复制正文,那么参考文献没事),原来一直搞不懂,今天把它显示所有标记发现多了个制表符(我原来以为是行标记),鼠 ...

  9. echarts自定义tooltip提示框内容

    1.echarts自定义tooltip提示框内容 https://blog.csdn.net/dreamsup/article/details/56667330 2.关于Echarts的formatt ...

随机推荐

  1. Gradle 设置全局代理

    #systemProp.socks.proxyHost=127.0.0.1 #systemProp.socks.proxyPort=7077 #systemProp.https.proxyHost=1 ...

  2. C# 根据类名创建类的实例对象

    因为我使用这个方法的类都是和AbstractScenePageDTO处于一个命名空间以及程序集下的,所以获取命名空间和程序集的时候,直接使用AbstractScenePageDTO这个类进行获取,这样 ...

  3. 【netcore入门】在Windows IIS上部署.NET Core 2.1项目

    部署之前先检查下面2个先决条件是否满足 1.安装了 IIS 模块 win7 在 控制面板→程序和功能→打开或关闭Windows功能→勾选Internet 信息服务(Internet Informati ...

  4. 【Latex】常用工具包

    字体篇: \usepackage{color} {\color{red}{Hello World!}} 表格篇: 1.resizebox \begin{table*}[!htb] \centering ...

  5. 静态,关键字:static 接口,IUSB , API 接口关键字:interface

    //静态 //普通成员 //普通成员是属于对象的 //静态成员 //静态成员属于类的 //关键字:static //self关键字:在类里面代表该类 //在静态方法里面不能调用普通成员 //在普通方法 ...

  6. 微软VBS生成Excel内容和图表示例

    <HTML> <BODY> <INPUT id=button1 name=button1 type=button value=Button> <SCRIPT ...

  7. db2 v11 安装测试

    一.准备环境: 修改/etc/hosts如下配置: #vi /etc/hosts 127.0.0.1    localhost 修改系统内核参数 # vi /etc/sysctl.conf kerne ...

  8. linux下python3.5环境搭建

    ubuntu12 在虚拟机vm11版本下安装正常,ubuntu14在虚拟机11-14版本下均因为某些文件权限不够安装失败(ubuntu14安装失败),未解决. ubuntu12 安装完成后,首先安装 ...

  9. RuntimeError - [Xcodeproj] Unknown object version.解决方法

    wjw:layoutInScrollView username$ pod install Analyzing dependencies xcode-select: error: tool 'xcode ...

  10. arcgisengine实现矩形转面

    面文件都有几何类型. arcengine在绘图时,不规则的多边形的几何类型是esriGeometryPolygon,矩形的几何类型是esriGeometryEnvelope,圆的几何类型是esriGe ...