Echarts之悬浮框中的数据排序问题


Posted in Javascript onNovember 08, 2018

 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之悬浮框中的数据排序问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
无缝滚动js代码通俗易懂(自写)
Jun 19 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
Nov 03 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
js自定义select下拉框美化特效
May 12 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
Vue实现星级评价效果实例详解
Dec 30 Javascript
浅析vue-router实现原理及两种模式
Feb 11 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 #jQuery
基于React Native 0.52实现轮播图效果
Aug 25 #Javascript
详解webpack打包后如何调试的方法步骤
Nov 07 #Javascript
微信小程序列表中item左滑删除功能
Nov 07 #Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 #Javascript
VueCli3构建TS项目的方法步骤
Nov 07 #Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 #Javascript
You might like
php实现数组按指定KEY排序的方法
2015/03/30 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
php获取linux命令结果的实例
2017/03/13 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
js正确获取元素样式详解
2009/08/07 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
javascript拖拽应用实例
2016/03/25 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
wxpython布局的实现方法
2019/11/01 Python
Python同时迭代多个序列的方法
2020/07/28 Python
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
J2EE系统只能是基于web
2015/09/08 面试题
建筑工程管理专业自荐信范文
2013/12/28 职场文书
采购经理岗位职责
2014/02/16 职场文书
临床专业自荐信
2014/06/22 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
2014年纪委工作总结
2014/12/05 职场文书
给病人的慰问信
2015/03/23 职场文书
2019思想汇报范文
2019/05/21 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
Vue全局事件总线你了解吗
2022/02/24 Vue.js