echarts 多个series_请教：如何让echarts的地图悬浮框出现多组series数据？
是这样的，我们一个项目，需要echarts地图功能，别的都调整好了，但是却遇到一个很麻烦的问题：地图的悬浮框默认只显示一组数据，我尝试了很多办法也没能让设置的两组数据都呈现在悬浮框中，下面是我的代码。ps：在tooltip中我输出了params，发现输出的也是第一组数据。
$.get('data/hangzhou.json', function (hangzhoujson) { //图标的json数据
echarts.registerMap('hangzhou', hangzhoujson); //图标
chart.setOption({
title: {
text: '杭州市各区县并网点个数分布',
subtext: '拱墅区、西湖区、上城区、下城区、江干区、滨江区数据统一为主城区数据',
textStyle:{
color:'#fff'
}
},
legend:{
orient: 'vertical',
left: 'left',
data:['并网个数1','并网个数2']
},
tooltip: { //显示悬浮窗口
trigger: 'item',
/*formatter:function(params, ticket, callback){
// return params.name+':'+params.value
// console.log(params);
},*/
},
visualMap: {
min: 0,
max: 1000,
text:['High','Low'],
realtime: true,
calculable: true,
inRange: {
color: ['lightskyblue','yellow', 'orangered']
},
textStyle:{
color:'#fff'
}
},
series: [{
name:'并网个数1',
type: 'map', //图标类型
map: 'hangzhou', //图标省份，哪一个省份就写省份名称
aspectScale:1, //地图宽高比
roam: true, //是否开启鼠标缩放和地图拖动。默认不开启。如果只想要开启缩放或者拖动，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
layoutCenter:['50%','50%'], //地图中心点位置['50%','50%']代表在最中间
layoutSize: '100%', //地图大小，此处设置为100%
label: {
normal: {
show: true //是否显示默认名称
},
emphasis: {
show: true //鼠标悬浮是否显示默认地理名称
}
},
data:[{ name:'拱墅区',value:337},
{ name:'临安市',value:37},
{ name:'富阳区',value:737},
{ name:'余杭区',value:237},
{ name:'下城区',value:97},
{ name:'上城区',value:137},
{ name:'西湖区',value:257},
{ name:'江干区',value:217},
{ name:'滨江区',value:17},
{ name:'萧山区',value:837},
{ name:'桐庐县',value:437},
{ name:'建德市',value:77},
{ name:'淳安县',value:7}]
},{
name:'并网个数2',
type: 'map', //图标类型
map: 'hangzhou', //图标省份，哪一个省份就写省份名称
aspectScale:1, //地图宽高比
roam: true, //是否开启鼠标缩放和地图拖动。默认不开启。如果只想要开启缩放或者拖动，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
layoutCenter:['50%','50%'], //地图中心点位置['50%','50%']代表在最中间
layoutSize: '100%', //地图大小，此处设置为100%
label: {
normal: {
show: true //是否显示默认名称
},
emphasis: {
show: true //鼠标悬浮是否显示默认地理名称
}
},
data:[{ name:'拱墅区',value:127},
{ name:'临安市',value:327},
{ name:'富阳区',value:521},
{ name:'余杭区',value:27},
{ name:'下城区',value:167},
{ name:'上城区',value:197},
{ name:'西湖区',value:417},
{ name:'江干区',value:207},
{ name:'滨江区',value:117},
{ name:'萧山区',value:37},
{ name:'桐庐县',value:757},
{ name:'建德市',value:27},
{ name:'淳安县',value:71}]
}]
});
});
上面代码出现的效果如下：
我的第二组数据并没有出现在悬浮框中。
请问如何才能实现多组数据都出现在悬浮框内呢？
已经找到问题所在，昨天在网上查找了一下相关的资料，发现了解决方案，在此自问自答，希望能帮到有需要的朋友：
1、 通过option.series获取到全部数据系列
2、 在tooltip(控制悬浮框的属性)的formatter属性中使用回调来返回需要展示的字符格式
3、在回调中遍历series和series.data，通过判断当前数据是否属于当前地区来拼装字符串
下面是解决方案的代码：
var chart = echarts.init(document.getElementById('mapChart'));
var countyInfo;
$.get('../../distributedHome/getHomeData.action',function(data){
setChart();
});
function setChart(){
$.get('data/hangzhou.json', function (hangzhoujson) { //图标的json数据
echarts.registerMap('hangzhou', hangzhoujson); //图标
var option={
title: {
text: '杭州市各区县并网点个数分布',
subtext: '拱墅区、西湖区、上城区、下城区、江干区、滨江区数据统一为主城区数据',
textStyle:{
color:'#fff'
}
},
legend:{
orient: 'vertical',
left: 'left',
data:['并网个数1','并网个数2']
},
tooltip: { //显示悬浮窗口
trigger: 'item',
formatter:function(params){
//定义一个res变量来保存最终返回的字符结果,并且先把地区名称放到里面
var res=params.name+'
';
//定义一个变量来保存series数据系列
var myseries=option.series;
//循环遍历series数据系列
for(var i=0;i //在内部继续循环series[i],从data中判断：当地区名称等于params.name的时候就将当前数据和名称添加到res中供显示 for(var k=0;k //console.log(myseries[i].data[k].name); //如果data数据中的name和地区名称一样 if(myseries[i].data[k].name==params.name){ //将series数据系列每一项中的name和数据系列中当前地区的数据添加到res中 res+=myseries[i].name+':'+myseries[i].data[k].value+' } } } //返回res //console.log(res); return res; }, }, visualMap: { min: 0, max: 1000, text:['High','Low'], realtime: true, calculable: true, inRange: { color: ['lightskyblue','yellow', 'orangered'] }, textStyle:{ color:'#fff' } }, series: [{ name:'并网个数1', type: 'map', //图标类型 map: 'hangzhou', //图标省份，哪一个省份就写省份名称 aspectScale:1, //地图宽高比 roam: true, //是否开启鼠标缩放和地图拖动。默认不开启。如果只想要开启缩放或者拖动，可以设置成 'scale' 或者 'move'。设置成 true 为都开启 layoutCenter:['50%','50%'], //地图中心点位置['50%','50%']代表在最中间 layoutSize: '100%', //地图大小，此处设置为100% label: { normal: { show: true //是否显示默认名称 }, emphasis: { show: true //鼠标悬浮是否显示默认地理名称 } }, data:[{ name:'拱墅区',value:337}, { name:'临安市',value:37}, { name:'富阳区',value:737}, { name:'余杭区',value:237}, { name:'下城区',value:97}, { name:'上城区',value:137}, { name:'西湖区',value:257}, { name:'江干区',value:217}, { name:'滨江区',value:17}, { name:'萧山区',value:837}, { name:'桐庐县',value:437}, { name:'建德市',value:77}, { name:'淳安县',value:7}] },{ name:'并网个数2', type: 'map', //图标类型 map: 'hangzhou', //图标省份，哪一个省份就写省份名称 aspectScale:1, //地图宽高比 roam: true, //是否开启鼠标缩放和地图拖动。默认不开启。如果只想要开启缩放或者拖动，可以设置成 'scale' 或者 'move'。设置成 true 为都开启 layoutCenter:['50%','50%'], //地图中心点位置['50%','50%']代表在最中间 layoutSize: '100%', //地图大小，此处设置为100% label: { normal: { show: true //是否显示默认名称 }, emphasis: { show: true //鼠标悬浮是否显示默认地理名称 } }, data:[{ name:'拱墅区',value:127}, { name:'临安市',value:327}, { name:'富阳区',value:521}, { name:'余杭区',value:27}, { name:'下城区',value:167}, { name:'上城区',value:197}, { name:'西湖区',value:417}, { name:'江干区',value:207}, { name:'滨江区',value:117}, { name:'萧山区',value:37}, { name:'桐庐县',value:757}, { name:'建德市',value:27}, { name:'淳安县',value:71}] },{ name:'并网个数3', type: 'map', //图标类型 map: 'hangzhou', //图标省份，哪一个省份就写省份名称 aspectScale:1, //地图宽高比 roam: true, //是否开启鼠标缩放和地图拖动。默认不开启。如果只想要开启缩放或者拖动，可以设置成 'scale' 或者 'move'。设置成 true 为都开启 layoutCenter:['50%','50%'], //地图中心点位置['50%','50%']代表在最中间 layoutSize: '100%', //地图大小，此处设置为100% label: { normal: { show: true //是否显示默认名称 }, emphasis: { show: true //鼠标悬浮是否显示默认地理名称 } }, data:[{ name:'拱墅区',value:127}, { name:'临安市',value:327}, { name:'富阳区',value:521}, { name:'余杭区',value:27}, { name:'下城区',value:167}, { name:'上城区',value:197}, { name:'西湖区',value:417}, { name:'江干区',value:207}, { name:'滨江区',value:117}, { name:'萧山区',value:37}, { name:'桐庐县',value:757}, { name:'建德市',value:27}, { name:'淳安县',value:71}] }] } chart.setOption(option); }); window.οnresize=function(){ chart.resize(); } }
';