echarts饼图,鼠标移入扇区取消扇区放大效果

在使用echarts的饼图类图表时,我们用上动画属性就自动的会有鼠标移入对应图形放大的一个效果。如图:

  只想保留图表的加载动画和更新动画等等,并不想要这个放大的效果有两个办法:

1、在series数据的每一项添加属性silent并设置为ture (silent:ture);意思是图形是否不响应和触发鼠标事件

 这个方法虽然实现了单个扇区不放大但是存在一个很大的问题,就是我们的提示文字也不会触发,就是第一张图里的黑色提示框。

2、这个方法能保留我们的tooltip(提示弹窗)也能实现我们想要的效果推荐使用此方法,但也要注意版本问题每个属性从那个版本才支持以及属性意义的官方介绍如下图,缩放设置在同样在series数据的每一项使用emphasis属性.属性配置如下:

emphasis:{
            disable:false,  //是否关闭扇区高亮效果
            scale:false,    //扇区是否缩放
            scaleSize:0,    //放大的尺寸,这里为了保证不放大扇区设置的,可要可不要
        }

因为我的series是根据dataset里的sourse添加的所以代码源码不太清楚,源码和vue数据结构如下可以大概看看

 

let emphasis = {
    disable:false,  //是否关闭扇区高亮效果
    scale:false,    //扇区是否缩放
    scaleSize:0,    //放大的尺寸,这里为了保证不放大扇区设置的,可要可不要
}
series_obj['emphasis'] = emphasis;

### ECharts 鼠标移入放大效果设置 默认情况下,ECharts配置了 `hoverAnimation` 属性来控制鼠标移入时的效果。为了启用并自定义这种效果,在初始化表选项时应确保未禁用此功能。 当希望实现鼠标移入扇区后的放大效果时,默认行为通常已经满足需求,因为官方文档指出如果启用了动画属性,则会自动应用相应的交互特效[^1]。然而,若发现没有预期中的放大现象,需确认如下几点: - **检查全局或局部是否关闭了悬浮动画**:确保在 `series` 中没有显式地将 `hoverAnimation` 设定为 `false`。 - **验证版本兼容性**:不同版本间可能存在差异,建议查阅所使用的具体版本说明以获取最准确的行为描述。 下面给出一段用于展示如何正确开启及调整鼠标放大效果的代码片段: ```javascript option = { tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left', }, series: [ { name: '访问来源', type: 'pie', // 启用悬停动画 hoverAnimation: true, radius: ['40%', '55%'], data: [ { value: 1048, name: '搜索引擎' }, { value: 735, name: '直接访问' }, { value: 580, name: '邮件营销' }, { value: 484, name: '联盟广告' }, { value: 300, name: '视频广告' } ] } ] }; ``` 通过上述配置可以正常获得鼠标指针进入某个区域后触发的视觉反馈——即轻微缩放效果,从而增强用户体验和数据可视化表现力。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值