Echarts之悬浮框中的数据排序
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之悬浮框中的数据排序的更多相关文章
- DataSet 中的数据排序 及 DataRow装成DataTable
1.DataSet 中的数据排序 DataSet ds = new DataSet(); // 获取当前排口的数据 ds = _xiaobill.GetHistoryData(yinZiBianm, ...
- Echarts地图悬浮框显示多组series数据以及修改地图大小
1.如何让echarts的地图悬浮框出现多组series数据? 2.如何更改地图默认的大小? <!DOCTYPE html> <html lang="en"> ...
- Echarts 的悬浮框tooltip显示自定义格式化
最近做的项目用到echarts雷达图,但是由于地市过多,遇到悬浮框显示问题被遮住 如图: 可以看到上面从兴安开始数据就被遮住了 为了解决这个被遮住的悬浮框,达到tooltip自定义格式 完成后的效果如 ...
- echarts自定义悬浮框的显示
最近在使用echarts的地图功能 ,业务需求是显示前五的具体信息,并且轮流显示,首先解决轮流显示的问题 var counta = 0; //播放所在下标 var mTime = setInterva ...
- Java案例——字符串中的数据排序
需求:有一个字符串"9 1 2 7 4 6 3 8 5 0",请编写程序实现从小到大数据排序 分析:最重要的部分是如何将字符串中的数据取出来 1.定义一个字符串为"9 1 ...
- select有条件in要按照in中的数据排序
mybatis中的写法 <select id="selectByIds" resultType="com.hoohui.electronic.util.ExHash ...
- C++ 中的sort()排序函数用法
sort(first_pointer,first_pointer+n,cmp) 该函数可以给数组,或者链表list.向量排序. 实现原理:sort并不是简单的快速排序,它对普通的快速排序进行了优化,此 ...
- c# 制作悬浮框
一,制作winform 窗体 窗体要做小一点,你见过500*500的悬浮框吗? 二,去掉边框和标题栏 this.FormBorderStyle = FormBorderStyle.None; 运行出来 ...
- Echarts ecomfe 触摸屏 touch 在IE10下无法显示悬浮框
问题描述: Windows 8 IE10浏览http://echarts.baidu.com/doc/example/line2.html 时,鼠标放置在数据点上时无法显示悬浮框. 正常情况为: 而现 ...
随机推荐
- 上台阶问题(递归,DFS)
题目 一共39层台阶.如果我每一步迈上1个台阶或者两个台阶,先迈左脚,再迈右脚,然后左右交换,最后一步迈右脚,也就是一共要走偶数步,那么,上完39级台阶,有多少种不同的方法? 思路 采用递归的思想,边 ...
- Java语言基础(方法与数组)_DAY05
1:函数(掌握) (1)定义在类中,有特定功能的一段小程序,可以独立运行. (2)函数的格式: 修饰符 返回值类型 函数名(形参类型 形式参数1,形参类型 形式参数2...) ...
- configure: error: You need a C++ compiler for C++ support.[系统缺少c++环境]
一.错误configure: error: You need a C++ compiler for C++ support.二.安装c++ compiler情况1.当您的服务器能链接网络时候[联网安装 ...
- Json.Net 在.Net Core 2.0 中序列化DataSet 问题
使用Asp.Net Core中自带的版本10.0.1 生成一个简单的DataSet DataSet ds2 = new DataSet(); DataTable table = new DataTab ...
- jmeter接口自动化部署jenkins教程
首先,保证本地安装并部署了jenkins,jmeter,xslproc 我搭建的自动化测试框架是jmeter+jenkins+xslproc ---注意:原理是,jmeter自生成的报告jtl文件,通 ...
- 06 - JavaSE之常用类
String类 String 类是不可变的字符序列,String 字符串一旦分配好就不能改变其内容和长度了.(如果使用 s1+=s2; 并不是在s1的后面开辟空间将s2拷贝其内,而是另外开辟一个空间, ...
- vmrun 批量创建vmware虚拟机
1 准备模板机 具体步骤如下: 1. 下载镜像安装系统 https://mirrors.aliyun.com/centos/7.5.1804/isos/x86_64/ 2. 安装完成配置好IP ,关闭 ...
- 详解C#泛型(三)
一.前面两篇文章分别介绍了定义泛型类型.泛型委托.泛型接口以及声明泛型方法: 详解C#泛型(一) 详解C#泛型(二) 首先回顾下如何构建泛型类: public class MyClass<T&g ...
- KMP算法理解(转)
(作者matrix67) KMP算法是拿来处理字符串匹配的.换句话说,给你两个字符串,你需要回答,B串是否是A串的子串(A串是否包含B串).比如,字符串A="I'm matrix67&quo ...
- Spark2.1.0模型设计与基本架构(上)
随着近十年互联网的迅猛发展,越来越多的人融入了互联网——利用搜索引擎查询词条或问题:社交圈子从现实搬到了Facebook.Twitter.微信等社交平台上:女孩子们现在少了逛街,多了在各大电商平台上的 ...