Echarts非常强大,配置也非常的多,有很多细节需要深入研究。详解一下关于悬浮框中的数据排序问题

悬浮框的数据排序默认是根据series中的数据位置排序的,在我们想自定义排序时,在echarts的配置中有一个tooltip

以下为数据降序的代码:

tooltip = {
            trigger:  'axis',
            formatter:  (params) => {  // params为悬浮框上的全部数据
              const newParams = [];
              let paramsData = _.sortBy(params, 'value'); // 根据value值升序,_.sortBy为lodash的方法
              paramsData = _.reverse(paramsData);  // 将数据降序,_.reverse为lodash的方法
              paramsData.forEach((p) => {

// p.marker为对应数据线的颜色的圆点

// p.seriesName为对应数据的数据名称

// p.value为对应数据的值
                const cont = p.marker + ' ' + p.seriesName + ': ' + p.value + '<br/>'; 
                newParams.push(cont);
              });
              return _.join(newParams, '');  // 这里是需要将数组转化成字符串显示,如果不转化,每个数据前面都会出现一个逗号(,),_.join为lodash的方法
            }
          }

主要是在formatter中设置,formatter可以接受两种形式,字符串模版和回调函数

回调函数可以根据需求相应处理数据

字符串模版可以自定义显示形式

字符串模版有多中,根据具体是什么图,官网详细 介绍了这几种类型

链接:http://www.echartsjs.com/option.html#tooltip.formatter

Echarts之悬浮框中的数据排序的更多相关文章

  1. DataSet 中的数据排序 及 DataRow装成DataTable

    1.DataSet 中的数据排序 DataSet ds = new DataSet(); // 获取当前排口的数据 ds = _xiaobill.GetHistoryData(yinZiBianm, ...

  2. Echarts地图悬浮框显示多组series数据以及修改地图大小

    1.如何让echarts的地图悬浮框出现多组series数据? 2.如何更改地图默认的大小? <!DOCTYPE html> <html lang="en"> ...

  3. Echarts 的悬浮框tooltip显示自定义格式化

    最近做的项目用到echarts雷达图,但是由于地市过多,遇到悬浮框显示问题被遮住 如图: 可以看到上面从兴安开始数据就被遮住了 为了解决这个被遮住的悬浮框,达到tooltip自定义格式 完成后的效果如 ...

  4. echarts自定义悬浮框的显示

    最近在使用echarts的地图功能 ,业务需求是显示前五的具体信息,并且轮流显示,首先解决轮流显示的问题 var counta = 0; //播放所在下标 var mTime = setInterva ...

  5. Java案例——字符串中的数据排序

    需求:有一个字符串"9 1 2 7 4 6 3 8 5 0",请编写程序实现从小到大数据排序 分析:最重要的部分是如何将字符串中的数据取出来 1.定义一个字符串为"9 1 ...

  6. select有条件in要按照in中的数据排序

    mybatis中的写法 <select id="selectByIds" resultType="com.hoohui.electronic.util.ExHash ...

  7. C++ 中的sort()排序函数用法

    sort(first_pointer,first_pointer+n,cmp) 该函数可以给数组,或者链表list.向量排序. 实现原理:sort并不是简单的快速排序,它对普通的快速排序进行了优化,此 ...

  8. c# 制作悬浮框

    一,制作winform 窗体 窗体要做小一点,你见过500*500的悬浮框吗? 二,去掉边框和标题栏 this.FormBorderStyle = FormBorderStyle.None; 运行出来 ...

  9. Echarts ecomfe 触摸屏 touch 在IE10下无法显示悬浮框

    问题描述: Windows 8 IE10浏览http://echarts.baidu.com/doc/example/line2.html 时,鼠标放置在数据点上时无法显示悬浮框. 正常情况为: 而现 ...

随机推荐

  1. 无图形界面安装CentOS

    有些插在ATCA中的x86刀片虽然是提供了Micro HDMI显示接口的,但是可能由于厂家出于节省成本的考量,没有给板卡配备显卡,那么在无图形界面下安装系统,就成为一个运维人员应知的一件事情.这里我们 ...

  2. Dell R730服务器 Raid5配置

    Dell R730服务器,有7块5t硬盘,默认做的RAID5.我们的目的是取其中6块硬盘做RAID5,留一块硬盘做热备. 一块SSD系统盘. 在这里,我具体解释一下 ①6块硬盘做成RAID5 ②6块硬 ...

  3. vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版

    一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室— ...

  4. odoo开发笔记 -- wkhtmltox打印不显示中文 --ubuntu字体安装

    wkhtmltox 是一个开源的将网页内容转换成PDF的软件包,常嵌套在网页页面里边做打印功能. 以微软雅黑字体为例(其他的宋体.黑体等点阵字体都一样的),我们的雅黑字体文件是:Yahei.ttf(放 ...

  5. Python多线程-Barrier(障碍对象)

    Barrier(parties, action=None, timeout=None) 每个线程通过调用wait()尝试通过障碍,并阻塞,直到阻塞的数量达到parties时,阻塞的线程被同时全部释放. ...

  6. idea 运行scala代码 报错:Exception in thread "main" java.lang.NoClassDefFoundError: scala/Predef$ java.lang.NoClassDefFoundError: scala/Function0 Error: A JNI error has occurred, please check your installati

    各种报错信息如下: java.lang.NoClassDefFoundError: scala/Function0 at java.lang.Class.getDeclaredMethods0(Nat ...

  7. FastDFS概念、原理及CentOS7下安装实战

    一.FastDFS基本概念及基本原理 1.什么是FastDFS FastDFS是用c语言编写的一款开源的分布式文件系统.FastDFS为互联网量身定制,充分考虑了冗余备份.负载均衡.线性扩容等机制,并 ...

  8. vue实现城市列表选择

    成果展示 最后的成果就是下面所展示的内容,因为gif图没有做,只能截图所展示,接下来,会带着大家一步一步的完成下面功能,脚手架搭建和node安装在本次案例不会讲解,如果了解,可以在我的博客园找到有详细 ...

  9. Shell脚本 | 一键获取安卓应用活动名

    上篇文章提到,启动时间的计算需要用到应用启动页的活动名(Activity_Name). 如何获取活动名呢?通常有如下几种方式: 1.询问 Dev 同事 2.adb logcat ActivityMan ...

  10. 【转】kafka集群搭建

    转:http://www.cnblogs.com/luotianshuai/p/5206662.html Kafka初识 1.Kafka使用背景 在我们大量使用分布式数据库.分布式计算集群的时候,是否 ...