Echarts之悬浮框中的数据排序问题
更新时间：2018年11月08日 08:55:29 作者：yezi-dream
Echarts非常强大，配置也非常的多，有很多细节需要深入研究。这篇文章主要介绍了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之悬浮框中的数据排序问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
本篇文章主要是对JS删除字符串最后一个字符的实现代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
这篇文章主要介绍了JS实用的动画弹出层效果,实例分析了javascript实现动画效果弹出层的方法,非常具有实用价值,需要的朋友可以参考下2015-05-05
这篇文章主要为大家详细介绍了微信小程序用户信息encryptedData的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
AJAX使用了UpdatePanel后无法使用alert弹出脚本
今天在做项目的时候发现个问题。。使用UpdatePanel后alert脚本就要报错了。2010-04-04
这篇文章主要介绍了ES6新特性之数组的扩充,结合实例形式分析了ES6数组操作的常见方法与相关使用技巧,需要的朋友可以参考下2017-04-04
这次项目中有一个功能，频繁使用switch语句，代码优化的时候，将其换成数组2012-02-02
这篇文章主要介绍了Javascript加速运动与减速运动代码分享,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了JS实现动态给图片添加边框的方法,涉及javascript操作图片border的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
这篇文章主要给大家介绍了关于在JavaScript中如何使用宏的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
MySQL作为最常用的开源关系型数据库管理系统之一,一直在不断发展和改进,其中,MySQL 5.7和MySQL 8是两个备受关注的版本,它们之间存在一些关键的差异,本文将深入探讨这两个版本之间的主要差异,需要的朋友可以参考下2023-11-11
最新评论