实现效果如下:

代码:

//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. 十二、K3 WISE 开发插件《工业单据老单与自己添加的窗体 - 互相传值传参》

    ===================================== 目录: 1.演示效果--[销售订单]传值给[自定义窗体] 2.演示效果--[自定义窗体]传值给[销售订单] 3.附源码 4. ...

  2. IOS Https适配摸索

    转:http://www.jianshu.com/p/f312a84a944c https封面 在WWDC 2016开发者大会上,苹果宣布了一个最后期限:到2017年1月1日 App Store中的所 ...

  3. Mysql的复杂语句

    简单的crud操作很容易,但是对于嵌套的查询语句,多表查询语句,以及条件查询语句,这些都很复杂,需要不断练习. limit a,b: 从a开始,长度为b. SELECT * FROM tb_quali ...

  4. mysql随机查询若干条数据的方法

  5. win怎么设置最快捷的下滑关机

    win怎么设置最快捷的下滑关机 1.在C:\Windows\System32下找到SlideToShutDown.exe文件发送一份到桌面快捷方式 2.右键此快捷方式--属性--更换图表--更换一个自 ...

  6. Linux下coreseek环境安装 、mysql数据源、sphinx扩展安装及php调用

    一.安装m4-1.4.13.autoconf-2.64.automake-1.11.libtool-2.2.6 下载安装m4-1.4.13.autoconf-2.64.automake-1.11.li ...

  7. Redhat7.5安装glusterfs4

    redhat7.5自带yum源不包含glusterfs4,下面通过rpm包的方式安装glusterfs4 环境查看 glusterfs官方网站下载rpm包下载地址 https://buildlogs. ...

  8. js删除Array数组中的某个元素

    Array.prototype.indexOf = function (val) { ; i < this.length; i++) { if (this[i] == val) return i ...

  9. [No0000100]正则表达式匹配解析过程分析(正则表达式匹配原理)&regexbuddy使用&正则优化

    常见正则表达式引擎引擎决定了正则表达式匹配方法及内部搜索过程,了解它至关重要的.目前主要流行引擎有:DFA,NFA两种引擎. 引擎 区别点 DFA Deterministic finite autom ...

  10. [No0000B5]C# 类型基础 值类型和引用类型 及其 对象判等 深入研究1

    引言 本文之初的目的是讲述设计模式中的 Prototype(原型)模式,但是如果想较清楚地弄明白这个模式,需要了解对象克隆(Object Clone),Clone其实也就是对象复制.复制又分为了浅度复 ...