echars地图获取鼠标点击位置的参数
时间: 2023-09-26 16:04:54 浏览: 247
如果你要在 Echarts 地图上获取鼠标点击位置的参数,可以通过以下步骤实现:
1. 在 Echarts 的 option 中配置地图的 series 数据,设置 mapType 和 selectedMode 参数,例如:
```
series: [{
name: '地图',
type: 'map',
mapType: 'china',
selectedMode: 'single',
...
}]
```
2. 给 Echarts 的 div 容器绑定 click 事件,获取鼠标点击位置相对于容器的坐标,例如:
```
var myChart = echarts.init(document.getElementById('myChart'));
myChart.on('click', function(params) {
var mouseX = params.event.offsetX;
var mouseY = params.event.offsetY;
...
});
```
3. 在 click 事件中使用 Echarts 提供的 API 获取地图上点击位置的相关信息,例如:
```
var geoCoord = myChart.convertFromPixel({x: mouseX, y: mouseY}, 'geo');
var name = geoCoord && geoCoord[2];
var value = myChart.getOption().series[0].data.filter(function(item) {
return item.name === name;
})[0].value;
...
```
其中,convertFromPixel 方法可以将鼠标点击位置的像素坐标转换为地理坐标,getOption 方法可以获取当前 Echarts 实例的 option 配置信息,通过 filter 方法可以根据地图区域的名称获取该区域的数据值等信息。
阅读全文