echarts 地图标记引导线文字
时间: 2023-07-08 20:35:16 浏览: 303
要在 ECharts 地图中添加标记引导线和文字,你可以使用 `geo` 组件中的 `itemStyle` 属性来设置标记的样式,使用 `series` 组件中的 `markLine` 属性来设置引导线的样式,使用 `series` 组件中的 `label` 属性来设置文字的样式。
下面是一个简单的例子,展示如何在 ECharts 地图中添加标记引导线和文字:
```javascript
option = {
// 设置地图的样式
geo: {
map: 'china',
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
// 添加标记
series: [{
type: 'scatter',
coordinateSystem: 'geo',
data: [{
name: '北京',
value: [116.46, 39.92]
}, {
name: '上海',
value: [121.48, 31.22]
}],
symbolSize: 10,
label: {
normal: {
show: true,
formatter: function(params) {
return params.data.name;
},
position: 'right',
textStyle: {
color: '#fff',
fontSize: 14
}
}
},
itemStyle: {
normal: {
color: '#F06C00'
}
}
}, {
// 添加引导线
type: 'lines',
coordinateSystem: 'geo',
data: [{
fromName: '北京',
toName: '上海',
coords: [
[116.46, 39.92],
[121.48, 31.22]
]
}],
symbol: ['none', 'arrow'],
symbolSize: 10,
lineStyle: {
normal: {
color: '#fff',
width: 1,
opacity: 0.6,
curveness: 0.2
}
},
// 添加文字
label: {
normal: {
show: true,
formatter: function(params) {
return params.data.fromName + ' -> ' + params.data.toName;
},
position: 'middle',
textStyle: {
color: '#fff',
fontSize: 14
}
}
}
}]
};
```
在上面的例子中,我们首先设置了地图的样式,然后添加了两个标记:北京和上海。接着,我们使用 `lines` 类型的系列添加了一条从北京到上海的引导线,并在引导线中间添加了文字,文字内容为“北京 -> 上海”。
你可以根据自己的需求,调整标记、引导线和文字的样式和位置。
阅读全文