可以通过 ECharts 的 tooltip 和 axisPointer 配置来实现这个需求。下面是一个示例代码：
```javascript
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['数据一', '数据二', '数据三']
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '数据一',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '数据二',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '数据三',
type: 'line',
data: [150, 232, 201, 154, 190, 330, 410]
}
]
};
// 给 legend 添加鼠标悬浮事件
var legend = option.legend.data;
for (var i = 0; i < legend.length; i++) {
var seriesIndex = i;
var seriesName = legend[i];
var axisIndex = 0;
var yAxisIndex = 0;
var yAxisName = 'y轴名称';
// 给 legend 添加鼠标悬浮事件
option.legend.selected[seriesName] = false;
option.legend.selectedMode = 'single';
option.legend.itemStyle = {
color: '#333'
};
option.legend.tooltip = {
show: true,
backgroundColor: '#fff',
borderColor: '#ccc',
borderWidth: 1,
textStyle: {
color: '#333'
},
formatter: function(params) {
// 添加警戒线
option.yAxis[axisIndex].axisLabel = {
formatter: function(value, index) {
if (value == params.value) {
return '{value|' + value + '}\n{line1|}\n{line2|}\n{line3|}\n';
} else {
return value;
}
},
rich: {
value: {
lineHeight: 20
},
line1: {
height: 1,
width: '100%',
backgroundColor: '#f00'
},
line2: {
height: 1,
width: '100%',
backgroundColor: '#f00'
},
line3: {
height: 1,
width: '100%',
backgroundColor: '#f00'
}
}
};
// 返回 tooltip 内容
return seriesName;
}
};
}
```
上面的代码中，我们给 legend 添加了鼠标悬浮事件，当鼠标悬浮在某个 legend 上时，会触发 tooltip 的显示。在 tooltip 的 formatter 函数中，我们可以设置要显示的内容，这里我们添加了三条红色的警戒线，用于标记当前鼠标悬浮的数据点。同时，我们还可以通过设置 yAxis[axisIndex].axisLabel 来修改 y 轴的显示内容，这里我们添加了三行空白，用于留出空间显示警戒线。
2万+
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
