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的练习，javascript五图轮播切换---实用版，这个实力有个缺陷就是没有过渡效果，这个本人也还在研究中，也希望高手可以指点一下2012-08-08
forEach()是JavaScript中一个常用的方法,用于遍历数组或类数组对象中的每个元素,本文就来介绍一下JavaScript forEach的几种用法小结,具有一定的参考价值,感兴趣的可以了解一下2023-11-11
这篇文章主要介绍了Javascript中数组去重与拍平的相关资料，因为这是实际业务开发中经常遇到的，文中开始先进行了数组的判断介绍，因为在处理数组之前判断数据是不是数组很重要，有需要的朋友可以参考借鉴，下面来一起看看吧。2017-02-02
javascript table排序 这个更简单了，不用改变现在的表格结构
另外一个table排序，这个更简单了，不用改变现在的表格结构,来自国外的代码。2010-04-04
javascript是种脚本语言，浏览器下载到哪儿就会执行到哪儿，下面为大家介绍下，如何给应用部分的js代码一个统一的入口2014-06-06
这篇文章主要为大家详细介绍了OpenLayers3实现对地图的基本操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要介绍了uniapp 封装组件的方法,结合实例形式分析了uniapp父级页与子页面组件封装与传参交互相关实现技巧,需要的朋友可以参考下2023-06-06
这篇文章主要给大家介绍了关于微信小程序中获取用户手机号授权登录的详细步骤,在微信小程序中开发者可以通过微信提供的API接口实现用户登录和获取用户的手机号,需要的朋友可以参考下2023-07-07
这篇文章主要为大家详细介绍了js实现登录拖拽窗口，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
深入浅析JavaScript中prototype和proto的关系
prototype,每一个函数对象都有一个显示的prototype属性，而proto每个对象都有一个名为_proto_内部隐藏属性。本文给大家介绍JavaScript中prototype和proto的关系，需要的朋友参考下2015-11-11
最新评论