工作中会遇到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.net/184823.html原文链接：https://javaforall.net
