echarts 地圖中的tooltip改造成多行數據


一 : 需求

  • 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/>");
    }
}			           



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM