【前端】echarts地图怎样设置多个浮层
问题描述
问题出现的环境背景及自己尝试过哪些方法
怎样在地图上根据经纬度显示这些浮层用的是echarts地图的那个方法
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
var series = [{type: 'custom',
coordinateSystem: 'geo',
itemStyle: {
normal: {
opacity: 0.5
}
},
animation: false,
silent: true,
data: [0],
z: -10
},
{
name: "交通事件",
type: 'custom',//配置显示方式为用户自定义
coordinateSystem: 'geo',
zlevel: 3,
itemStyle: {
normal: {
color: '#46bee9',
position:[10,20]
}
},
renderItem: function (params, api) {//具体实现自定义图标的方法
return {
type: 'image',//指定渲染类型
style: {
image: iconData.icon1,
x: api.coord([
icon[params.dataIndex].value[0], icon[params.dataIndex]//图形在地图上显示的位置
.value[1]
])[0],
y: api.coord([
icon[params.dataIndex].value[0], icon[params.dataIndex]
.value[1]
])[1]
},
position:[-20,-20]//图形偏移
}
},
data: icon,
tooltip: { //显示悬浮窗口
trigger: 'item',
formatter:function(params, ticket, callback){
console.log(params);
return params.name+':'+params.value
}
},
}]
这是地图打点方法
你期待的结果是什么？实际看到的错误信息又是什么？
回答
在tooltip（控制悬浮框的属性）的formatter属性中使用回调来返回需要展示的字符格式
在回调中遍历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+'<br />';
//定义一个变量来保存series数据系列
var myseries=option.series;
//循环遍历series数据系列
for(var i=0;i<myseries.length;i++){
//在内部继续循环series[i],从data中判断：当地区名称等于params.name的时候就将当 前数据和名称添加到res中供显示
for(var k=0;k<myseries[i].data.length;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+'<br />';
}
}
}
//返回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.onresize=function(){
chart.resize();
}
}
以上是 【前端】echarts地图怎样设置多个浮层 的全部内容， 来源链接： utcz.com/a/81733.html
