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;

  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值