eCharts隐藏鼠标悬浮高亮效果(鼠标悬浮区块突出)

在使用eCharts的饼图过程中会出现以下默认情况:

就是当鼠标悬浮到某一区块时,该区块会默认呈高亮状态并突出,在有些情况下是很有必要的,但是在默写特殊情况下这种突出会将影响网页的整体美观,那么就需要将其隐藏起来,如何隐藏呢?其实很简单,只需要在series内添加hoverAnimation:false,即可,代码如下所示:

 series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            hoverAnimation:false, //鼠标悬浮是否有区域弹出动画,false:无  true:有
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: f
在使用 ECharts 地图时,如果希望取消鼠标悬浮(hover)带来的高亮效果,可以通过配置 `emphasis` 状态的样式以及关闭 `mouseover` 时的高亮行为来实现。 ECharts 提供了多种方式来控制地图区域在不同状态下的样式表现。默认情况下,当鼠标悬停在地图区域上时,会自动应用强调状态(emphasis)的样式,通常表现为颜色加深或边框加粗等效果。要禁用这种行为,可以通过以下方式进行设置: ### 1. 禁用 emphasis 状态的视觉映射 在 `series` 配置项中,通过设置 `emphasis` 的 `itemStyle` 和 `areaColor` 来使其与正常状态一致,从而避免视觉上的变化。 ```javascript option = { geo: { map: 'yourMapName', type: 'map' }, series: [{ type: 'map', data: [], emphasis: { itemStyle: { areaColor: '#fff' // 设置为与默认颜色相同 } } }] }; ``` ### 2. 关闭 mouseover 时的高亮行为 ECharts 提供了全局的行为控制接口,可以通过 `blur` 和 `focus` 模式来管理图表元素的状态交互。可以将所有系列的 `blur` 模式设为 `'self'` 或 `'none'`,以防止其他元素被高亮。 ```javascript option = { focusNodeAdjacency: false, blurNodeAdjacency: true, series: [{ type: 'map', data: [], blur: { itemStyle: { areaColor: '#fff' // 保持与默认状态一致 } }, emphasis: { itemStyle: { areaColor: '#fff' } } }] }; ``` ### 3. 使用 `mouseover` 事件阻止默认行为 如果上述方法仍无法完全满足需求,还可以通过监听 `mouseover` 事件并手动干预渲染逻辑来彻底屏蔽高亮效果。 ```javascript myChart.on('mouseover', function(params) { if (params.componentType === 'series') { myChart.dispatchAction({ type: 'blur' }); } }); ``` 以上方法可以有效控制 ECharts 地图组件中由于鼠标悬停引发的高亮行为[^2]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值