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可以接受两种形式,字符串模版和回调函数
回调函数可以根据需求相应处理数据
字符串模版可以自定义显示形式
字符串模版有多中,根据具体是什么图,官网详细 介绍了这几种类型
链接:
总结
以上所述是小编给大家介绍的echarts之悬浮框中的数据排序问题,希望对大家有所帮助
如对本文有疑问, 点击进行留言回复!!
vue脚手架安装以及vue脚手架创建项目(详细步骤),看这篇文章就行了,小白也能创建自己的项目
JavaScript递归函数详解:如何使用递归及简单的递归案例
JavaScript 中的break、continue、return的用法和区别
网友评论