echarts 显示顺序_echarts 堆叠图 tooltip中各项指数如何实现'倒序展示'

待我称王封你为后i 2022-11-03 05:54 427阅读 1赞

echarts堆叠图tooltip的各项展示顺序与图上的展示顺序是不对称的，我截图了echarts官方网站的示例图，如下

![80d2866b2600fce8a989d520ba9abab1.png][]

应产品需求，我需要把tooltip上展示的顺序与图上的顺序上下对称，也就是把默认的顺序进行倒序处理。

百思不得其解，后来，终于找到了方法，感觉人生瞬间都有了希望！废话不多说，看方法。

tooltip有一个钩子方法：position:(point, params, dom, rect, size)=>\{\}，可以获取tooltip内的dom，直接把dom进行倒置来实现，如下代码：

tooltip: \{

trigger: 'axis',

axisPointer: \{

type: 'cross',

label: \{

show: false,

\}

\},

backgroundColor: 'rgba(255,255,255,0.9)',

textStyle: \{

color: '\#2D67A2',

fontSize: '12px'

\},

extraCssText: 'box-shadow: 0px 0px 5px 2px rgba(26,56,107,0.1)',

position:(point, params, dom, rect, size)=>\{

var pattern = /(.\*?: (\\d\{0,3\},)\*\[0-9\]+)/g;

var matchArray = dom.innerHTML.match(pattern); // 匹配出各项生成数组

var str = matchArray.join('');

var dateStr = dom.innerHTML.replace(str,''); // 筛选出日期

dom.innerHTML = dateStr + matchArray.reverse().join(''); // 逆序后重新组合

\}

\},

这样就完成了，看下调整顺序之后的效果

![3c0928a7feb3d13300cce160572bcf31.png][]

看到我的图效果就能发现，我在tooltip的最后加了一行“总量”，这就是我手动加上去的，也就是在最后组合时拼接一起就可以，鉴于这是个性化需求，就没有在上述代码上陈列。

另外还有一个问题是我在开发过程中发现的，这个上面的数字显示是默认每三位以逗号分割的，但是在写正则时并没有注意这个问题，就导致数字超过三位数之后就会有bug,这个问题已经在正则中修改了。

以上就是我在开发过程中遇到的问题与解决方法，如有问题，还请指正！

参考链接https://www.cnblogs.com/RocCa...

[80d2866b2600fce8a989d520ba9abab1.png]: /images/20221024/0d5ad46e41b94fd9a3adefea35a5b000.png
[3c0928a7feb3d13300cce160572bcf31.png]: /images/20221024/98a192073e934c4cb3be29c97e331235.png

发表评论取消回复

表情：

评论列表（有 1 条评论，427人围观）

蒲公英云08A102V铁粉 2023-01-18 09:16

博主您好，请问有合计项如何进行倒序？我也有合计项，但是不能实现倒序，可否放出源码？谢谢

相关阅读

相关 echarts tooltip 按值的降序显示 tip 信息

遇到了一个小改进点。就是echarts 图的tooltip 的内容，希望按照每条线当前的值进行降序显示。查询 echarts 官方文档，https://www.echar

逃离我推掉我的手/ 2023年06月02日 09:28/ 0 赞/ 21 阅读

相关 echarts tooltip 数值后显示 %

需求：要求 echarts 在鼠标 hover 时可以看到数据后面显示百分号（数据已是后台处理过的）。效果图： ![1733986-20190802150340710-9

绝地灬酷狼/ 2023年06月02日 09:28/ 0 赞/ 118 阅读

相关 Echarts：10-5-1:堆叠区域图

10月5日星期一晴今天，继续为比赛好好准备加油呀，学习echarts的堆叠区域图，万事开头难，但是不能退缩呀www option = { ti

亦凉/ 2022年12月12日 02:27/ 0 赞/ 265 阅读

相关 Echart柱形图stack堆叠图显示总数

文章目录前言一、实现原理二、关键代码总结 -------------------- 前言博主刚好遇到这个问题，我在网上找了一圈，发现

一时失言乱红尘/ 2022年11月14日 11:50/ 0 赞/ 355 阅读

相关 vue+echarts实现一个叠堆柱状图

关于一些经常用到的参考文档：这里都罗列一下,查找起来比较方便 Element UI手册：[https://cloud.tencent.com/developer/doc/12

叁歲伎倆/ 2022年11月07日 05:50/ 0 赞/ 345 阅读

相关 vue+echarts实现一个叠堆柱状图

关于一些经常用到的参考文档：这里都罗列一下,查找起来比较方便 Element UI手册：[https://cloud.tencent.com/developer/doc/12

墨蓝/ 2022年11月05日 11:48/ 0 赞/ 294 阅读

相关 echarts 显示顺序_echarts 堆叠图 tooltip中各项指数如何实现'倒序展示'

echarts堆叠图tooltip的各项展示顺序与图上的展示顺序是不对称的，我截图了echarts官方网站的示例图，如下 ![80d2866b2600fce8a989d520

待我称王封你为后i/ 2022年11月03日 05:54/ 1 赞/ 428 阅读

相关 echarts 重叠而不堆叠

on绑定响应事件 //点击事件 daysChart.on('click', function (param) { loadOneDay(pa

太过爱你忘了你带给我的痛/ 2022年04月23日 05:22/ 0 赞/ 525 阅读

相关 echarts堆叠和平铺

echarts堆叠和平铺的设置数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。方法：设置series下面的 stack 即可

清疚/ 2022年02月05日 06:55/ 0 赞/ 482 阅读

相关 echarts折线图不堆叠设置

折线图堆叠的重要参数stack。只要将stack的值设置不相同，就不会堆叠了。实例如下，红色部分为需要修改的： option = {

男娘i/ 2021年07月26日 21:27/ 0 赞/ 998 阅读