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 相关文章推荐
页面中body onload 和 window.onload 冲突的问题的解决
Jul 01 Javascript
一个简单的js鼠标划过切换效果
Jun 30 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
Jun 28 Javascript
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 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入门的学习方法
2007/01/02 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
PHP多例模式介绍
2013/06/24 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
新手该如何学python怎么学好python?
2008/10/07 Python
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
Python实现批量读取word中表格信息的方法
2015/07/30 Python
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
校领导推荐信
2013/11/01 职场文书
六年级学生期末评语
2014/12/26 职场文书
英语教师个人工作总结
2015/02/09 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
国庆节新闻稿
2015/07/17 职场文书