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 相关文章推荐
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
Jun 21 Javascript
jquery实现图片切换代码
Oct 13 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 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
3.从实例开始
2006/10/09 PHP
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
PHP实现服务器状态监控的方法
2014/12/09 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
动态加载js的几种方法
2006/10/23 Javascript
jquery的键盘事件修改代码
2011/02/24 Javascript
一个简单的js树形菜单
2011/12/09 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
react路由配置方式详解
2017/08/07 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
Python字符串切片操作知识详解
2016/03/28 Python
python 获取字符串MD5值方法
2018/05/29 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
django 类视图的使用方法详解
2019/07/24 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
波兰补充商店:Muscle Power
2018/10/29 全球购物
教育专业个人求职信
2013/12/02 职场文书
公司成立感言
2014/01/11 职场文书
简单的辞职信范文
2014/01/18 职场文书
大学生秋游活动方案
2014/02/17 职场文书
秋收起义观后感
2015/06/11 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
六年级作文之关于梦
2019/10/22 职场文书
MySQL 全文检索的使用示例
2021/06/07 MySQL