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