ECharts柱状图关闭鼠标hover时的高亮样式详解

 更新时间:2023年04月27日 10:27:14   作者:TuTu_wenjuan  
为了方便使用,echarts的饼图中给加入了默认的hover高亮效果,下面这篇文章主要给大家介绍了关于ECharts柱状图关闭鼠标hover时的高亮样式的相关资料,需要的朋友可以参考下

最近在做图表相关的需求,使用的是echarts来画图。

今天算是遇到一个比较坑的点了吧,就是两根柱状图重叠对比,设计图把某根柱状图的颜色设计得比较浅,因为echarts的柱状图本身hover到柱子上的时候,会有个高亮状态,画出来的图形本身是这样的:

 鼠标hover上去的时候,因为预算的那根柱子的背景色设计得比较前,鼠标hover的时候,提示正常展示了,但是被echarts本身hover的时候高亮状态,导致柱子看不见了:

因为影响到了图表的效果,所以想要关闭echarts的高亮状态 ,查文档,发现echarts是有给我们提供属性来控制高亮是否展示的:

 只需要把series.emphasis.disabled设置为ture,即可关闭hover时的高亮。

option = {
  series: [
    {
      name: '预算数据',
      type: 'bar',
      barWidth: '60%',
      color: '#EAF6FE',
      emphasis: {
        disabled: true,
        focus: 'none'
      },
      data: [100, 520, 200, 350, 400, 370, 260]
    },
    {
      name: '实际数据',
      type: 'bar',
      barWidth: '60%',
      color: '#60BBFD',
      barGap: '-100%',
      emphasis: {
        disabled: true,
        focus: 'none'
      },
      data: [10, 52, 200, 334, 390, 330, 220]
    }
  ]
};

 配置好这个属性之后,鼠标移动到柱子上的时候,图表也能不被影响,可以正常查看。

但是需要注意的一个点是,这个属性,只有5.3.0之后的版本才支持,5.3.0之前的版本配置了是不会生效的!所以,如果是5.3.0之前的版本,你可以选择联系UI修改一下图表的配色 or 升级你们项目的echarts版本啦。

总结

到此这篇关于ECharts柱状图关闭鼠标hover时的高亮样式的文章就介绍到这了,更多相关ECharts柱状图关闭高亮内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js中递归函数的使用介绍

    js中递归函数的使用介绍

    所谓的递归函数就是在函数体内调用本函数。使用递归函数一定要注意,处理不当就会进入死循环。递归函数只有在特定的情况下使用 ,比如阶乘问题
    2012-10-10
  • swiper.js插件实现pc端文本上下滑动功能示例

    swiper.js插件实现pc端文本上下滑动功能示例

    这篇文章主要介绍了swiper.js插件实现pc端文本上下滑动功能,结合实例形式分析了swiper.js插件的具体引用与相关使用技巧,需要的朋友可以参考下
    2018-12-12
  • 微信小程序实现弹幕墙(祝福墙)

    微信小程序实现弹幕墙(祝福墙)

    这篇文章主要为大家详细介绍了微信小程序实现弹幕墙、祝福墙效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • webpack踩坑之路图片的路径与打包

    webpack踩坑之路图片的路径与打包

    这篇文章主要介绍了webpack踩坑之路图片的路径与打包,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • stream.js 一个很小、完全独立的Javascript类库

    stream.js 一个很小、完全独立的Javascript类库

    stream.js 是一个很小、完全独立的Javascript类库,它为你提供了一个新的Javascript数据结构:streams
    2011-10-10
  • JS与SQL方式随机生成高强度密码示例

    JS与SQL方式随机生成高强度密码示例

    这篇文章主要介绍了JS与SQL方式随机生成高强度密码,结合实例形式分析了javascript方式与SQL方式生成高强度密码的相关操作技巧,需要的朋友可以参考下
    2018-12-12
  • 浅谈JavaScript 执行环境、作用域及垃圾回收

    浅谈JavaScript 执行环境、作用域及垃圾回收

    下面小编就为大家带来一篇浅谈JavaScript:执行环境、作用域及垃圾回收。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 纯JavaScript基于notie.js插件实现消息提示特效

    纯JavaScript基于notie.js插件实现消息提示特效

    这篇文章主要介绍了纯JavaScript基于notie.js插件实现消息提示特效,可以制作Alert提示框,确认框和带输入的消息框,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 微信小程序实现皮肤功能(夜间模式)

    微信小程序实现皮肤功能(夜间模式)

    这篇文章主要给大家介绍了关于利用微信小程序实现皮肤功能,也就是实现夜间模式的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-06-06
  • 详解ES6数组方法find()、findIndex()的总结

    详解ES6数组方法find()、findIndex()的总结

    这篇文章主要介绍了详解ES6数组方法find()、findIndex()的总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05

最新评论