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 相关文章推荐
基于jQuery图片平滑连续滚动插件
Apr 27 Javascript
jqGrid读取选择的多行的某个属性代码
May 18 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
jquery获取下拉框中的循环值
Feb 08 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
javascript头像上传代码实例
Sep 28 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 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面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
PHP simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
菜鸟javascript基础整理1
2010/12/06 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
JS中promise化微信小程序api
2018/04/12 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
python读取浮点数和读取文本文件示例
2014/05/06 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
Numpy的简单用法小结
2019/08/28 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
大韩航空官方网站:Korean Air
2017/10/25 全球购物
巴西在线鞋店:Shoestock
2017/10/28 全球购物
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
养殖项目策划书范文
2014/01/13 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
室内设计专业自荐信
2014/05/31 职场文书
个人先进材料范文
2014/12/30 职场文书
公司财务部岗位职责
2015/04/14 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
Django 实现jwt认证的示例
2021/04/30 Python
SQL Server实现分页方法介绍
2022/03/16 SQL Server
Python实现科学占卜 让视频自动打码
2022/04/09 Python