echarts 地图设置自定义标记
时间: 2025-05-17 19:00:58 浏览: 26
### 如何在 ECharts 地图中添加和配置自定义标记
为了在 ECharts 地图上显示自定义标记,可以通过 `series` 中的 `markPoint` 或者 `markLine` 属性来实现。下面展示的是通过 `markPoint` 添加单个或多个位置标记的例子。
#### 定义带有自定义标记的地图选项
```javascript
var option = {
series: [
{
name: '广西地图',
type: 'map',
map: 'GX', // 此名称需与之前注册的一致
label: {show: true},
markPoint: {
symbolSize: function (value, params) {
return value[2]; // 自定义大小依据第三个维度的数据
},
data: [
{name: '南宁', value: [108.329529, 22.8157], itemStyle: {color: '#dd4444'}}, // 坐标系中的坐标点
{name: '桂林', value: [110.29906, 25.2829], itemStyle: {color: '#ffec3d'}}
]
}
}
]
};
```
上述代码片段展示了如何向地图系列中加入名为 `markPoint` 的属性,并为其指定一系列数据项。每一个数据项代表一个要在地图上呈现出来的标记[^1]。
对于更复杂的场景,比如想要给这些标记加上额外的信息提示框,则可以进一步扩展:
```javascript
markPoint: {
tooltip: {
formatter: '{b}' // b 表示该点对应的名称
},
data: [
{
name: '南宁',
value: [108.329529, 22.8157],
itemStyle: {color: '#dd4444'},
label: {
show: true,
position: 'top'
}
},
...
]
}
```
此部分增加了 `tooltip` 和 `label` 设置,使得当鼠标悬停于某个特定地点之上时会弹出其名字;同时允许开发者调整标签的位置以及样式等细节。
最后,在实际项目里记得将更新后的 `option` 应用于图表实例:
```javascript
myChart.setOption(option);
```
这样就可以成功地在 ECharts 地图组件内添加并定制化地理标记了。
阅读全文
相关推荐



















