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

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

应产品需求，我需要把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(''); // 逆序后重新组合

}

},

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

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

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

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

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