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. iOS开发之Todo List for Swift项目

    一直从事Windows Phone开发,但对iOS开发一直有所好奇,于是在MBP到手之际,顺手安装了Xcode.移动互联网开发的相似性,使得我能快速地了解和认识了iOS的开发框架体系,在看完了Appl ...

  2. Alpha冲刺(3/10)——追光的人

    1.队友信息 队员学号 队员博客 221600219 小墨 https://www.cnblogs.com/hengyumo/ 221600240 真·大能猫 https://www.cnblogs. ...

  3. 多线程编程——ANR

    1.为什么要用多线程 这里列出几个原因: 提高用户体验或者避免ANR:在事件处理代码中需要使用多线程,否则会出现ANR(Application is not responding),或者因为响应较慢导 ...

  4. Linux系统基础知识整理

    一.说明 本篇文章,我将结合自己的实践以及简介,来对linux系统做一个直观清晰的介绍,使得哪些刚接触Linux的小伙伴可以快速入门,也方便自己以后进行复习查阅. 二.基本知识整理 1.Linux文件 ...

  5. 使用ffmpeg实现对h264视频解码 -- (实现了一个易于使用的c++封装库)

    H264是当今流行的视频压缩格式:ffmpeg是一个开源库,实现了对h264视频文件的解压缩. 为了降低使用ffmpeg的复杂性,尽量隐藏实现细节,我写了一个封装库.c#也可以很方便的使用此库.解压后 ...

  6. js便签笔记(9)——解读jquery源码时记录的一些知识点

    近来一直利用业余时间在看jquery2.1.1源码,大约看了两千行了.平时看的时候,做了一些笔记,贴出来分享. 1. Array.prototype.slice.call 可以将伪数组转化为真正的数组 ...

  7. 自我总结 (三) --(Java Web学习)

    自我完善的过程就是在不断的自我总结不断的改进. 在前的近半个月里,我们经过了考试,也开始了java web的项目. 先看看这次的考试.考完之后我就觉得有点不对劲的,结果 结果真的是一塌糊涂.上周五的时 ...

  8. 第一次项目上Linux服务器(六:Nginx安装及相关命令(转))

    1.下载nginx 方法一 wget http://nginx.org/download/nginx-1.11.6.tar.gz 方法二 http://nginx.org/en/download.ht ...

  9. Redhat6.8安装Oracle11g下遇到两个问题记录

    问题一: 刚刚安装完毕Oracle之后,尝试sqlplus登陆报错,TNS:net service name is incorrectly specified 参考文章:关于环境变量ORACLE_SI ...

  10. ActiveMQ与Spring整合-MessageListener

    消费者,使用监听的实现方式. 1. pom.xml 2. 生产者 package org.ygy.mq.lesson04; import javax.jms.JMSException; import  ...