一 : 需求
- echarts地圖中的tooltip默認提示是顯示總數的,需要改造成多行數據,每個series一條
二 : 需求分析
- 個人意見:合情合理的需求,為啥echarts不提供這么一個參數搞定呢,看了文檔,沒有發現這么一個參數,找同事一起找還是沒找到
- 折騰結果:既然沒提供參數,自己解決吧,這么小個輪子還是可以自己造的,而且人家也提供了formater方法接口,來唄
- 解決方案:通過formater自己組裝一個tooltip不是難事
三 : 原理
查看文檔,先熟悉下tooltip的formater配置,接收一個參數,管他是什么,console.log
先弄出來看看,應該有可用的信息給我拼一個tooltip吧.
在console找到輸出信息,是一個數組,從里面挑可以用的
找到可用數據,下面就是拼數據啦
注意: valueMap是個數字做key的object,而數字是 legend數組里的index,如果你在中間關掉一個legend,這里的數字就不是連續的
四 : 代碼實現
分析得差不多了,貼代碼吧!
注意: 我的代碼不能直接貼上去用,這只是展示一下而已,你需要根據自己的需求自己改一下,謝謝!!
//這里是我的數據
//配置字段,我的數據時動態的,所以需要從這里面去匹配字段
var seriesDataKeys = [{key:"CMCCREQS",value:"中國移動"},{key:"CTCCREQS",value:"中國電信"},{key:"CUCCREQS",value:"中國聯通"},{key:"OTHERREQS",value:"其他運營商"},{key:"REGIONREQS",value:"當地查詢數"},{key:"REQS",value:"總查詢次數"}];
//從配置里面取 legend 數組
var legendData = $.map(seriesDataKeys,function(e,i){
return e.value;
});
//省略了其他配置
tooltip : {
trigger: 'item',
formatter: function(p){
//參數打出來看看,找到合適的素材
//console.log(p);
//切開字符串,但是字符串最后是一個 空格, 所以會多一個元素
var keyLises = p[0].split(" ");
//刪掉多余的那個元素.我們的key就准備好了
keyLises.pop();
//取出values 准備拼接
var values = p.data.valueMap;
//用來放結果的數組
var ret = [];
//把keyList做循環,拼上對應的數值放到結果數組里
$.each(keyLises,function(i,e){
//根據名字找下標,這是一個自執行的函數,根據名字去找到對應的index ,比如: "中國移動" 找到 0 .(其實這個可以提取出來的,但是我比較懶,而且也就這一個地方用,所以就寫成了自動執行)
//其實你只要找到對應的index就可以了,也不一定要用我這個坑爹方法,我只是貼了工程代碼,懶得換而已啦
var valueIndex = (function(key){
for(var i = 0; i <seriesDataKeys.length;i++){
if (seriesDataKeys[i].value == key) return i;
}
})(e);
//拼接名字和數字,放到數組里
ret.push(e + ":" + values[valueIndex]);
});
//用"<br/>"把數組里的元素都鏈接起來(這樣就不用拼接的時候加換行了,而且不用處理最后一個元素多一個換行的問題,很是好用)
return ret.join("<br/>");
}
}