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

转载于:https://www.cnblogs.com/yezi-dream/p/9926597.html

Echarts之悬浮框中的数据排序相关推荐

利用ECharts可视化mysql数据库中的数据
利用ECharts可视化mysql数据库中的数据技术实现背景在我们的日常开发中我们经常使用到各种各样的数据进行相关的功能的开发,在这个过程中我们可以用到各种各样的图表来分析和实现我们的需求,很多的 ...
Java学习案例：字符串中的数据排序
案例:字符串中的数据排序需求:有一个字符串:"91 27 46 38 50",请写程序实现最终输出结果是:"27 38 46 50 91" 思路: 1.定义一 ...
对vector中的数据排序
要求:从文件fin中读取数据,每行的格式如"王明 85",代表"姓名成绩",具体有多少行不确定.按成绩从大到小排序,将结果写入文件fout. /*功能:从文件 ...
mysql的可视化图表_利用ECharts可视化mysql数据库中的数据
这是工程所有文件的一个目录工程文件目录我做了一个柱状图,一个饼状图,一个折线图,配置过程很恶心,出了好多错,所以在这里记录一下. 如果想直接看 echarts 的部分,可以跳过下面数据库的建立. ...
怎么样给list中的数据排序
一.简单数据的排序,如int,Integer类型的数据可以直接使用Collections中的sort()方法: public static void main(String[] args) { ...
【100个 Unity实用技能】☀️ | C# 中 Sort() 对List中的数据排序的几种方法整理总结
Unity 小科普老规矩,先介绍一下 Unity 的科普小知识: Unity是实时3D互动内容创作和运营平台 . 包括游戏开发.美术.建筑.汽车设计.影视在内的所有创作者,借助 Unity 将创意 ...
[天坑]python从文件中读取数据排序_关于os.listdir（）乱序问题
朋友问了我一个问题: 为啥他用了os.listdir后图片顺序不对了... 我很好奇 import osdef deal(path):file_names = os.listdir(path)c = ...
MySQL中实现分组排序
这几天在项目开发中需要用SQL实现数据的分组排序,以前在oracle的存储过程开发中用过rank函数可以很方便的实现,但是现在在MySQL中是没有类似的,经过上网搜索资料现将MySQL中的数据排序和分 ...
前端鼠标移入悬浮框针对页面顶部和底部的定位设置
一般情况对于鼠标移入出现悬浮框,会考虑到是在页面顶部还是底部,所以会涉及到一些代码 <div v-show="i.secStationList&&(i.secStati ...

Echarts之悬浮框中的数据排序

Echarts之悬浮框中的数据排序相关推荐

最新文章

热门文章