echarts axisPointer如何让Y轴的部分自动跟随点?
时间: 2023-07-05 10:04:31 浏览: 59
可以通过设置 `axisPointer` 的 `label` 属性中的 `formatter` 来实现Y轴部分自动跟随点的效果。具体步骤如下:
1. 在 `yAxis` 中设置 `boundaryGap: false`,这样Y轴会从0开始绘制,而不是从数据范围的最小值开始。
2. 在 `tooltip` 中设置 `trigger: 'axis'`,这样当鼠标悬浮在数据点上时,会显示对应的数值。
3. 在 `axisPointer` 中设置 `label` 的 `formatter` 属性为一个函数,该函数返回一个字符串,该字符串表示该点在Y轴上的数值。
下面是示例代码:
```javascript
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
boundaryGap: false // Y轴从0开始绘制
},
tooltip: {
trigger: 'axis'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
name: 'data',
// 设置axisPointer的label formatter
itemStyle: {
normal: {
color: '#00bfff'
}
},
lineStyle: {
normal: {
color: '#00bfff'
}
},
areaStyle: {
normal: {
color: '#00bfff',
opacity: 0.1
}
}
}],
axisPointer: {
label: {
formatter: function(params) {
return params.value.toFixed(2); // 返回Y轴上的数值
}
}
}
};
```
这样,当鼠标悬浮在数据点上时,会显示该点在Y轴上的数值。