echarts中国地图如何标记散点图[通俗易懂]

全栈程序员站长

发布于 2022-11-10 16:22:32

2.6K0

发布于 2022-11-10 16:22:32

工作中会遇到echarts在地图上面标记点位，后端数据传给城市名和坐标轴给你以后，如何添加到echarts上面渲染呢 echarts需要的数据例子

{ 
   
       name: "深圳",
       value: [114.271522, 22.753644]
}

name是城市名,value是坐标轴

拿到数据后 找到echarts的配置属性->series 代码如下

    series: [
// 常规地图
{ 

type: 'map',
mapType: 'china',
aspectScale: 0.85,
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: '138%',
zoom: 1, //当前视角的缩放比例
// roam: true, //是否开启平游或缩放
scaleLimit: { 
 //滚轮缩放的极限控制
min: 1,
max: 2
},
itemStyle: { 

normal: { 

areaColor: '#0c274b',
borderColor: '#1cccff',
borderWidth: 1.5
},
emphasis: { 

areaColor: '#02102b',
label: { 

color: "#fff"
}
}
},
},
{ 

name: '天燃气',
type: 'scatter',
coordinateSystem: 'geo',
data: [{ 
 //庐阳区
name: '首都',
value: [116.24, 41.55, 100],
type: 'ranqi',
}, ],
symbol: iconRQ,
symbolSize: 20,
label: { 

normal: { 

show: false,
},
emphasis: { 

show: false
}
},
},
// 区域散点图
{ 

type: 'effectScatter',
coordinateSystem: 'geo',
symbolSize: 5,
rippleEffect: { 
 //坐标点动画
period: 3,
scale: 5,
brushType: 'fill'
},
label: { 

normal: { 

show: true,
position: 'right',
formatter: '{b}',
color: '#b3e2f2',
fontWeight: "bold",
fontSize: 18
}
},
data: [{ 

name: "深圳",
value: [114.271522, 22.753644]
},
{ 

name: "南京",
value: [118.78, 32.04]
},
{ 

name: "重庆",
value: [106.54, 29.59]
},
{ 

name: "北京",
value: [116.24, 39.55, 100]
},
{ 

name: "荆州",
value: [113.41, 29.59]
}
],
itemStyle: { 
 //坐标点颜色
normal: { 

show: true,
color: '#fff',
shadowBlur: 10,
shadowColor: '#fff'
},
emphasis: { 

areaColor: '#f00'
}
},
},
// 线 和 点
{ 

type: 'lines',
zlevel: 1, //设置这个才会有轨迹线的小尾巴
effect: { 

show: true,
period: 10,
trailLength: 0.7,
color: '#fff',
symbol: 'arrow',
symbolSize: 6
},
lineStyle: { 

normal: { 

color: '#fff',
width: 1.5,
curveness: 0.2,
shadowColor: '#fff',
}
},
data: [{ 

fromName: 1,
toName: 1,
coords: [
[114.271522, 22.753644],
[116.24, 39.55],
]
},
{ 

fromName: 1,
toName: 1,
coords: [
[114.271522, 22.753644],
[118.78, 32.04],
]
},
{ 

fromName: 1,
toName: 1,
coords: [
[114.271522, 22.753644],
[106.54, 29.59],
]
}
],
}
]

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/184823.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年10月7日，如有侵权请联系 cloudcommunity@tencent.com 删除

https