Echarts悬浮框数据排序与自定义显示详解

作者:阿沐时间:2026-10-22 19:01:24浏览:165

本文详解Echarts中tooltip悬浮框的数据排序问题。默认按series顺序显示,通过配置formatter回调函数,结合lodash的sortBy和reverse方法可实现数据降序排列。同时介绍字符串模版与回调函数的区别,帮助开发者自定义悬浮框显示内容与顺序。

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

总结

总结

以上内容介绍了Echarts悬浮框数据排序的相关技巧,希望能对大家有所帮助。如有任何疑问,欢迎留言,小编会及时回复。感谢大家对本站的支持!

作者最新文章