echart条型统计图,鼠标 hover 在label上,显示tooltip
时间: 2024-04-11 12:25:56 浏览: 193
echarts 甘特图,tooltip 轮播
您可以使用 ECharts 的 tooltip 组件来实现鼠标悬停在标签上显示 tooltip 的效果。下面是一个示例代码:
```javascript
// 导入 ECharts
import echarts from 'echarts';
// 初始化图表
const chart = echarts.init(document.getElementById('chart'));
// 定义数据
const data = [
{ name: 'A', value: 100 },
{ name: 'B', value: 200 },
{ name: 'C', value: 300 },
{ name: 'D', value: 400 },
{ name: 'E', value: 500 }
];
// 配置选项
const option = {
tooltip: {
trigger: 'axis', // 设置触发类型为坐标轴
axisPointer: { // 坐标轴指示器配置项
type: 'shadow' // 设置指示器类型为阴影
}
},
xAxis: {
type: 'category',
data: data.map(item => item.name) // x 轴数据
},
yAxis: {
type: 'value'
},
series: [{
type: 'bar',
data: data.map(item => item.value), // y 轴数据
label: {
show: true, // 显示标签
position: 'top' // 标签位置
}
}]
};
// 渲染图表
chart.setOption(option);
```
这段代码创建了一个简单的柱状图,并使用了 tooltip 组件来实现鼠标悬停在标签上显示 tooltip 的效果。您可以根据实际需求进行修改和调整。
阅读全文