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

news2025/1/26 15:35:19

最近在做图表相关的需求,使用的是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版本啦。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/407780.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

JavaScript纯前端解析Excel文件

最近在开发时候遇到了这样的一个需求:需要在前端通过解析Excel将Excel中的值进行回传填入。我想在实际的开发过程中,肯定大家也会遇到这样的需求,在这介绍一个比较不错的JS工具库:js-xlsx,及该库的简单使用方法。 1、…

Three.js-设置环境纹理及加载hdr环境贴图

目录 1.hdr 2.环境纹理(全景) 3.CubeTextureLoader加载立方体环境纹理 4.RGBELoader环境纹理加载 1.hdr HDR全称High-Dynamic Range(高动态光照渲染),通过HDR,显示器或相机可以很好的表现超出其亮度范围…

vue3 antd项目实战——Form表单的提交与校验【v-model双向绑定input输入框、form表单数据,动态校验规则】

vue3 ant design vue项目实战——Form表单【v-model双向绑定数据实现form表单数据的提交】上期文章回顾【UI界面渲染】场景复现(源代码附在文章最后)实现需求1.表单数据及其类型的定义2.表单及各部分数据的双向绑定3.表单提交功能4.校验输入内容不为空5.…

vue-数据绑定

目录 1 数据绑定 2 绑定方式 2.1 单向绑定 2.2 双向绑定 1 数据绑定 Vue中有两种数据绑定方式: 1 单向绑定(v-bind):数据只能从data流向页面。 2 双向绑定(v-modle):数据不仅能从data流向页面,还能从页…

VSCode开发:使用nvm切换node版本

为什么要切换node版本,是因为npm run dev(vant app)时,报了Error [ERR_REQUIRE_ESM]:Must use import to load ES Module这样的错。我使用的node版本是12.16.3,切换到16.15.1就没有这个问题了。 1. 安装nvm前记得要删…

【node进阶】深度解析express框架---编写接口|解决跨域问题

✅ 作者简介:一名普通本科大三的学生,致力于提高前端开发能力 ✨ 个人主页:前端小白在前进的主页 🔥 系列专栏 : node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 🍀 学习格言: ☀️ 打不倒你的会使你更强&a…

Vuex 学习

什么是vuex: 专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。 原理…

clone下来的vue项目出现“An unknown git error occurred”,vue全局挂载axios及配置全局请求和响应拦截,uni-app的全局请求和响应拦截,对请求方法的封装

文章目录前言一、如何解决clone下来的vue项目出现“An unknown git error occurred”?二、vue全局挂载axios并设置全局的请求和响应拦截1.先下载安装好axios,这个就不用多说了2,vue2中的全局挂载:3,在vue3中我们又应该怎么全局挂载axios呢&am…

vue中使用百度地图

vue中使用百度地图 之前写过一篇vue调用百度地图的文章,但是写得不是很清晰,所以重新整理一篇;申请百度地图ak 这个我在之前的那篇文章已经讲过,就不再细说,链接如下:vue调用百度地图 初始化地图 引入地图…

同一页面实现recycleView三种布局【recycleView + adapter】

文章目录🥭🥭简介🥭🥭效果图🥭🥭代码🍎🍎三个Adapter修饰器🍎🍎主界面函数 && FuritBean🍎🍎布局文件🥭&#x1f…

js获取dom元素宽高

一,前言 1.对于css盒子模型,我们使用width和height等来定义dom元素的宽高,而有时我们需要在js中获取元素的宽高进行一些操作。 2.dom操作提供了相应的属性来实现这一点 二,clientWidth和clientHeight 1.clientWidth和clientHe…

js监听页面或元素scroll事件,滚动到底部或顶部

基本原理&#xff1a; 1、滚动到底部 元素的滚动距离 元素的可视距离 元素的滚动条总距离2、滚动到顶部 元素的滚动距离 0监听页面滚动 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv&…

Flask:使用SocketIO实现WebSocket与前端Vue进行实时推送(gevent-websocket、flask-socketio、flask不出现running on 127..问题)

前言 本文旨在记录使用Flask框架过程中与前端Vue对接过程中&#xff0c;存在WebSocket总是连接失败导致前端取不到数据的问题。以及在使用WebSocket相关功能的库包gevent-websocket之后&#xff0c;导致运行Flask项目之后&#xff0c;控制台没有显示running on 127.0.0.1:5000…

Vue复刻华为官网(三)

文章目录1 底部列表1.1 思路1.2 代码1.3 效果图1.3.1 搜索框1.3.2 商标2 公司信息2.1 思路2.2 代码2.3 效果图3 上升按钮3.1 思路3.2 代码3.3 效果图4 图标完善4.1 思路4.2 安利图标库1 底部列表 1.1 思路 如上图&#xff0c;这整个的大盒子&#xff0c;又可以被分为上中下三个…

[JavaScript你真的以为这么简单吗]JavaScript高级

✅作者简介&#xff1a;大家好,我是Philosophy7&#xff1f;让我们一起共同进步吧&#xff01;&#x1f3c6; &#x1f4c3;个人主页&#xff1a;Philosophy7的csdn博客 &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 承认自己的无知&#xff0c;乃是开启智慧的大…

three.js中坐标系转换以及camera的position、lookAt与up属性理解

为了更好的理解camera的position、lookAt与up属性&#xff0c;文章最开始我们先来阐述three.js的坐标系转换的概念。 1.监听event的事件获得屏幕坐标 文章的最开始首先讨论在哪里进行点击事件的监听的问题&#xff0c;当鼠标触发点击事件时&#xff0c;event会输出点击位置相对…

使用JS监听键盘按下事件

事件说明 我们将键盘按下后事件的所有属性和方法打印出来&#xff08;这里以按下1为例&#xff09; document.onkeydown function(event){console.log(event);} 这里面有几个需要注意的属性 key:按下按键的名称 keyCode:按下按键的键码 altKey、ctrlKey、shiftKey&#xf…

Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本(项目演示、涉及知识点、源码分享)

基于 Vue3.x Vant UI 的多功能记账本&#xff08;一&#xff09; 文章目录基于 Vue3.x Vant UI 的多功能记账本&#xff08;一&#xff09;Vue3.x 实现多功能记账本1、前言2、项目演示3、涉及知识点4、写到最后&#xff08;附源码&#xff09;Vue3.x 实现多功能记账本 1、前…

文件在线浏览之微软office在线预览及隐藏的坑和其他更优解决办法

一 微软也已经免费提供在线版本office预览啦 https://view.officeapps.live.com/op/view.aspx?srcURLsrc后面的URL是网上能访问到的文件地址&#xff0c;比如http://abc.com/file/demo.xlsx 直接访问&#xff1a;https://view.officeapps.live.com/op/view.aspx?srchttp:/…

js模板字符串

js模板字符串模板字符串&#xff08;模板字面量&#xff09;在模板字符串中插入变量在模板字符串中插入表达式模板字符串中可以换行模板字符串中可以调用函数模板字符串支持嵌套使用模板字符串&#xff08;模板字面量&#xff09; ES6 中引入了模板字符串&#xff0c;让我们省…