阅读提示:本文共计约2466个文字,预计阅读时间需要大约6分钟,由作者免费logo设计编辑整理创作于2023年11月06日00时06分04秒。
在 Echarts 中,可以通过设置 series.pie.label.formatter
和 series.pie.label.show
属性来实现饼图鼠标移入 Label 不提示 Tooltip,只有在移入图表时才触发 Tooltip 的功能。具体配置如下:
- 在
option
对象中添加series
数组,并为其添加一个子数组来定义饼图的数据和样式。 - 在子数组中设置
label.formatter
为空字符串(''
),表示移入 Label 时不显示 Tooltip。 - 在子数组中设置
label.show
为false
,表示默认隐藏 Label。 - 在子数组中设置
label.emphasis.show
为true
,表示鼠标悬停在图表上时显示 Label。 - 根据需要自定义
emphasis
下的其他样式,例如颜色、字体大小等。
下面是一个简单的示例代码:
option = {
series: [{
type: 'pie',
data: [
{ value: 10, name: '类别1' },
{ value: 20, name: '类别2' },
{ value: 25, name: '类别3' },
{ value: 15, name: '类别4' }
],
label: {
formatter: '', // 移入 Label 时不显示 Tooltip
show: false // 默认隐藏 Label
},
emphasis: {
label: {
show: true // 悬停在图表上时显示 Label
}
}
}]
};
通过以上配置,当鼠标悬停在饼图上时,会显示 Tooltip;而鼠标移入 Label 时,不会显示 Tooltip。
![Echarts饼图实现鼠标移入Label时不显示Tooltip,只在移入图表时触发Tooltip的解决方案](https://yunkanjia.com/uploads/images//92ccba27283f4c4db572245cf44d13cf.jpeg)