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. typescript-koa-postgresql 实现一个简单的rest风格服务器 —— 连接 postgresql 数据库

    接上一篇,这里使用 sequelize 来连接 postgresql 数据库 1.安装 sequelize,数据库驱动 pg yarn add sequelize sequelize-typescri ...

  2. POJ 2725

    #include <iostream> #include <string> #include <algorithm> #define MAXN 400005 usi ...

  3. 关于并发用户数的思考-通过PV量换算并发

    首先介绍一下pv量:PV(访问量):即Page View, 即页面浏览量或点击量,用户每次刷新即被计算一次.UV(独立访客):即Unique Visitor,访问您网站的一台电脑客户端为一个访客.00 ...

  4. Python标准库 -- UUID模块(生成唯一标识)

    UUID是什么: UUID: 通用唯一标识符 ( Universally Unique Identifier ),对于所有的UUID它可以保证在空间和时间上的唯一性,也称为GUID,全称为: UUID ...

  5. 解决 在 WINDOWS 下 同时安装 python2 python3 后 pip 错误

    再之前同时安装 python 后 只需把环境变量PATH 里面改为 PATH=C:\Python36-32\Scripts\;C:\Python36-32\;C:\Python27\;C:\Pytho ...

  6. typedef在C和C++的区别?

    一.struct定义结构体1.先声明结构体类型再定义变量名struct name{ member ..};name A;... 如:struct student{ int a;};student st ...

  7. redis集群环境的搭建和错误分析

    redis集群环境的搭建和错误分析 redis集群时,出现的几个异常问题 09 redis集群的搭建 以及遇到的问题

  8. 简单的字母全排列问题—递归法和STL法

    问题描述:求全由小写字母组成的不超过200个字符序列的全排列 如输入序列bbjd,排列结果为: bbdj bbjd bdbj bdjb bjbd bjdb dbbj dbjb djbb jbbd jb ...

  9. Selenium3自动化问题二:各chrome版本对应的chromedriver版本

    一:问题说明 最近用到selenium3在火狐浏览器中执行自动化脚本,遇到了一些问题,最后解决方案中占比最多的就是浏览器和驱动版本不一致导致的,故这里给出chrome.firefox驱动的不同版本对应 ...

  10. 海量数据处理之Tire树(字典树)

    参考博文:http://blog.csdn.net/v_july_v/article/details/6897097 第一部分.Trie树 1.1.什么是Trie树 Trie树,即字典树,又称单词查找 ...