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. 彻底弄懂“PKIX path building failed”问题

    SSL的基础知识 SSL的全称是Secure Socket Layer.它的通信流程如下图所示,客户端与服务端会通过几次通信,通过非对称加密创建出一个加密密钥,用于以后的对称信息加密. 1,客户端明文 ...

  2. python爬虫在解析不带引号的json报错的问题解决方案

    本例中环境: python3.6.6 demjson-2.2.4 如不看废话请直接看3(下面红体字) 1.近期在爬取代理验证代理的时候发生一个Bug, 就是在验证代理的时候返回的是如下字符串, {ip ...

  3. [原创]K8飞刀20160613 Plesk密码 & 注册表16进制转换 & Html实体解密

    K8飞刀  by K8拉登哥哥@[K8搞基大队]博客: http://qqhack8.blog.163.com 简介: K8飞刀是一款多功能的安全测试工具. Hacker Swiss Army Kni ...

  4. MySQL高可用架构-MMM安装教程

    安装指南: 一.架构以及服务器信息 基本安装包含至少2个数据库服务器和1个监视服务器.本例中使用2个监视服务器和5个数据库服务器(服务器系统为CentOS 7) 用途 IP 主机名 Server-id ...

  5. 微信小程序(wx:for)遍历对象

    最近在折腾微信小程序,遇到这么一个情况:后端返回一个key-value的对象数据,需要遍历对象的key-value,然后渲染到视图中.就像下面这样: { '2018-1-9':{ address: ' ...

  6. Touch事件传递机制 Android

    Touch事件分发中只有两个主角:ViewGroup和View.Activity的Touch事件事实上是调用它内部的ViewGroup的Touch事件,可以直接当成ViewGroup处理. View在 ...

  7. asp.net调用js方法

    C#前台js调用后台代码 前台js <script type="text/javascript" language="javascript"> fu ...

  8. 27-hadoop-hbase安装

    hbase的安装分为单机模式和完全分布式 单机模式 单机模式的安装很简单, 需要注意hbase自己内置一个zookeeper, 如果使用单机模式, 那么该机器的zookeepr不可以启动 1, 添加j ...

  9. curl 详解【转】

    原文:https://blog.csdn.net/lansesl2008/article/details/14523303 用途说明 curl命令是一个功能强大的网络工具,它能够通过http.ftp等 ...

  10. sql 聚合语句,count的用法

    如要获取 result = '1' 的数量COUNT( CASE WHEN result = '1' THEN result END ) SELECT * FROM ( SELECT batchNo, ...