tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
borderWidth: 1,
borderColor: '#ccc',
padding: 10,
textStyle: {
color: '#000'
},
position: function (pos, params, el, elRect, size) {
const obj = {
top: 10
};
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
return obj;
}
// extraCssText: 'width: 170px'
},
position: function (pos, params, el, elRect, size) 这个里面的 pos, params, el, elRect, size 都是什么 ? 为什么在对象里 定义方法? 这个方法是怎么被使用的?
为啥不去看下官方文档嘞
不知道你这个问题是否已经解决, 如果还没有解决的话:首先，我们来解释一下函数position(pos, params, el, elRect, size)中各个参数的含义和用法：
函数position(pos, params, el, elRect, size)的作用是为地图上的某个地区设置位置信息并返回这个位置信息。pos表示鼠标的位置，params表示被选中的地区的相关数据，el表示被选中的地区的DOM元素，elRect表示被选中的地区的位置和大小信息，size表示地图的大小。一般来说，这个函数会将地区的位置信息设置为鼠标位置的上方一定距离的位置，并返回这个位置信息。
下面是一个示例代码，演示了position函数的用法：
function position(pos, params, el, elRect, size) {
const distance = 20; // 设置地区位置距离鼠标的距离
const left = pos.x;
const top = pos.y - distance;
// 设置地区位置
el.style.left = left + 'px';
el.style.top = top + 'px';
// 返回地区位置信息
return { left, top };
}
使用时，可以在初始化地图的时候，将position函数传递给echarts的实例对象的事件监听函数，例如：
const myChart = echarts.init(document.getElementById('chart'));
// 其他初始化操作
// 监听鼠标移动事件
myChart.on('mousemove', function (params) {
const pos = params.event && params.event.event && params.event.event.targetTouches ? {
x: params.event.event.targetTouches[0].clientX,
y: params.event.event.targetTouches[0].clientY
} : {
x: params.event.clientX,
y: params.event.clientY
};
const el = params.event.target; // 当前被选中的地区的DOM元素
const elRect = el.getBoundingClientRect(); // 获取当前被选中的地区的位置和大小信息
const size = myChart.getDom().getBoundingClientRect(); // 获取地图的大小
// 设置地区位置
const positionInfo = position(pos, params, el, elRect, size);
// 其他操作，比如更新浮窗的内容，根据positionInfo设置浮窗的位置等等
});
这样，当鼠标移动到地图上的某个地区时，会根据鼠标的位置和地区的位置信息，设置地区的位置，并返回这个位置信息。你可以根据实际情况来更新浮窗的内容，根据positionInfo设置浮窗的位置等等。