版权声明:转载请声明原地址 https://blog.csdn.net/dk2290/article/details/82260044
在Echarts3的折线图的使用过程中,想使初始化出来的图表更人性化,就比如说有这么个需求,在Echarts折线图中,鼠标悬浮在左侧某一个点时,悬浮框悬停在点的右侧;鼠标悬停在右侧某一个点时,悬浮框悬停在点的左侧。
下面是具体实现思路:
首先明确一点,我们需要借助tooltip.position属性。理想的思路是我们在回调函数中获取鼠标每次悬停的坐标,然后再判断这个坐标是否处于此容器(也就是这个Echarts折线图)的左侧或者右侧;判断命中后我们再改变tooltip的位置,并返回给函数。
OK。我们先放Echarts官方API中对tooltip属性的说明看看:
ooltip.position
类型
Array, Function
默认值
null
位置指定,传入{Array},如[x, y], 固定位置[x, y];传入{Function},如function([x, y]) {return [newX,newY]},默认显示坐标为输入参数,用户指定的新坐标为输出返回。
现在提供关键代码部分:
tooltip : {
textStyle:{
align:'left'
},
trigger: 'item',
//自定义echarts tooltip的显示位置,当鼠标移动到图表的左部时tip显示在右边,当鼠标移动到图表的右部时tip显示在左边
position:function(position){
//获取容器的宽度
var chartsWidth = $("#threadtrend").width();
//判断悬停点落在容器的哪测
if(position[0] < (chartsWidth/2)){
position[0] = position[0];
}else{
position[0] = position[0] - 130;
}
return [position[0], position[1]];
},
formatter:'日期:{b0}'+'<br>'+'名称:{a0}'+'<br>'+'病毒个数:{c0}个'
}
效果图:
左侧时:
右侧时:
上面的代码已经很详细了,我再稍微解释下参数的含义。首先position
这个参数代表的是鼠标移动时的坐标点。position[0]
代表此坐标点的X坐标,position[1]
代表Y坐标。
最后返回的参数也必须类似position
一样,是一个包含X坐标和Y坐标的数组。