echarts 堆疊圖 tooltip如何實現'倒序展示'

今天做了echarts的層疊圖，官網給的實例是躺着來的，項目經理讓我讓他站起來，我想着，這也不是很難嘛，不過是把x,y調換位置。

 

 

 於是我就做成了這種效果

 

 

 新的問題出現了，tooltip方向反了啊喂，項目經理讓我改回去，我哭了，尼瑪，官網沒有這個解釋啊，怎么辦？百度，谷歌。。。發現做這個的太少了。一個偶然的機會我發現了一個鈎子方法：position:(point, params, dom, rect, size)=>{}，一看，欣喜若狂，只要可以直接對dom操作，什么不能實現啊，於是就有了這段代碼：直接從html層面進行倒置

option = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐標軸指示器，坐標軸觸發有效
                    type : 'shadow'        // 默認為直線，可選為：'line' | 'shadow'
                },
                position:(point, params, dom, rect, size)=>{
                  var pattern = /(<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#[a-z0-9]+;"><\/span>.*?: [,|0-9]+)/g
                  var matchs = dom.innerHTML.match(pattern);
                  var str = matchs.join('');
                  var dateStr = dom.innerHTML.replace(str,"");
                  dom.innerHTML = dateStr + matchs.reverse().join("");
                }
            },

 

示例html:

11月20號<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#0304fe;"></span>在線商城: 32,000<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#c23531;"></span>線下門店: 12,000<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#2f4554;"></span>話費充值: 22,000<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#61a0a8;"></span>油卡充值: 15,000

簡單來說就是把tooltip的html代碼分為兩部分：頭和體，很明顯可以用正則表達式把后面的span+文本提取出來嘛，我寫的正則貌似不能把一開始的文本（11月20號）提取出來，如果有大神，希望您給我寫一個完美的正則~反正我的思路已經足以解決項目經理交給我的任務啦，最后效果如下：