首页 前端知识 echarts饼图,鼠标移入扇区取消扇区放大效果

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

2024-04-15 09:04:29 前端知识 前端哥 754 55 我要收藏

在使用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;

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4962.html
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!