echarts 折线图 鼠标滑入
时间: 2023-07-08 14:47:02 浏览: 149
要在 Echarts 折线图中实现鼠标滑入时的交互效果,可以使用 `tooltip` 配置项来设置提示框,当鼠标滑动到数据点上时,可以显示对应的数值和其他信息。例如:
```javascript
option = {
// ... 其他配置项
tooltip: {
trigger: 'axis', // 设置触发类型为坐标轴轴触发
formatter: '{b}日销量:{c}件' // 设置提示框内容格式
},
xAxis: {
type: 'category',
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
series: [{
name: '销量',
type: 'line',
data: [120, 200, 150, 80, 70, 110, 130]
}]
};
```
这个示例中,我们设置了一个 `tooltip`,当鼠标滑动到数据点上时,会显示对应日期和销量的信息。你可以根据需要调整 `formatter` 的格式,添加更详细的信息,比如显示数值单位、添加其他辅助信息等。
除了 `tooltip`,Echarts 还提供了其他的交互功能,比如数据区域缩放、数据视图、图例联动等,可以根据实际需要进行配置。
阅读全文