echarts柱状图鼠标移入柱子突然消失了

已于 2022-06-29 09:28:10 修改
阅读量720 收藏 1
点赞数 3
文章标签： echarts 前端 javascript
于 2022-05-28 15:23:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45966674/article/details/125018735
版权

这个是个比较坑的问题
我之前这样写的

series: [{
   barWidth:'20',
   name: '部门',
   type: 'bar',
   data:  ydata,
   color: 'rgba(69,114,167)'
}]

其中color: 'rgba(69,114,167)'是不规范的
要写成color: ‘rgba(69,114,167,1)’
简单说 就是如果你用的RGB 那就要在后面写明透明度
简单说 就是后面加个 ,1 就完事了

瑞晟技术服务中心-耿瑞
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts 全局触发click点击事件（Label及柱状）
日常笔记/总结/系列知识梳理
06-09 6561
// 基于准备好的dom，初始化echarts实例 let myChart = this.$echarts.init(document.getElementById('myChart')); 前言 需求要点击Echart处理事件，通过myChart.on可实现，但只能点击柱状图才能触发，点击label(即：坐标文本)无法触发；通过myChart.getZr().on可全局监听Echart图，但无法准确的获取当前点击柱状的index；由此见下文 Echart图 Echart对象 option = {
使用echarts实现双向柱状图
09-02
1、文件夹下载下来后直接双击html文件即可看到效果； 2、项目中多次使用，保证稳定； 3、代码中有详细的介绍说明； 4、可以单独拿出来作为插件使用； 5、echarts基本图例里面不存这个图形; 6、有问题欢迎留言，看到会解答；
echarts柱状图
11-11
里面包含了echarts的柱状图和饼状图的一些动态获取数据的demo属于一个简洁明了的小demo方便参考，如果需要其他的功能，介意自己努力练习
echart柱状图的柱子不见了？
lin18824161857的博客
01-20 5528
背景：需要用到echarts的柱状图，然后效果是这样的 （我不会告诉你这个效果就是解决好问题以后才出现的） 过程： 首先要说一下我为什么会有这个问题，第一二开的页面只能在app端查看，后来因为这个死穴所以才导致这个问题卡 了差不多两三个钟。而且很无解，明明在本地测试可以，一到线上修改就不能显示柱子。给你们看一下我当初看到 的样子，（我又不会告诉你这个效果是我调回去然后页面显示出来的效...
vue echarts 光标进入图表 折线 或 均线 消失了
tenc1239的博客
07-08 460
解决: 不要color: 'gred' 换成别的颜色。
echarts 关于柱状图鼠标滑过背景时柱子消失问题
温柔雨哥的博客
08-13 2850
最近遇到一个很有头疼的问题，当我的鼠标触摸柱状图的时候他就消失问题。 改了关于 tooltip的属性，发现，只有悬浮的样式的改变，并没无法解决悬浮消失的问题，后来经过各种改动，测试，发现，原来是颜色出了问题，要把颜色换成rgba 我的原始是这样的 这样写是不规范的。 rgba 应该显式声明透明度值。 然后就好了。没错，只需这样！ ...
解决echarts柱状图鼠标指上时柱子消失或闪动
Betty_666的博客
04-11 779
主要原因是使用rgba会出现透明的样式，对颜色切换为具体数值即可。
[echarts]柱状图的点击事件
热门推荐
bbt953的博客
11-14 1万+
柱状图的点击事件
echarts 柱状图渐变色背景
05-14
该案例设置 echarts 柱状图渐变色，同样也可以应用折线图、圆形图等。效果说明：https://blog.csdn.net/qq_36437172/article/details/106115048
echarts柱状图滚动轮播显示
02-02
场景：echarts中的柱状图当在数据过多时会挤压柱子，所以想实现数据项过多时，进行数据项的轮播显示。 代码：初始显示n个，超出数据定时滑动实现柱子轮播
echarts漂亮的柱状图按月统计
07-20
基于echarts实现的漂亮的柱状图按月统计，彩色样式。
【前端】数组的常用处理函数
lcukyNwa的博客
04-22 388
item------->每个元素值 (必)index----->索引（可选）arr-------- >当前数组（可选）推荐vscode的一款插件来写以下的demo，该插件可以直接在js文件中显示结果，搜 Quokka.js用这个插件去新建一个js文件，直接就运行在node上了forEach不会返回一个新的数组，里面改值会影响原数组，其他方法不影响原数组map可以返回新数组 用于映射，如每个元素都加倍或执行其他转换操作every返回一布尔值，需数组中全部满足。
【解决NodeJS项目无法在IDEA中调试的问题】使用JetBrains IDEA 2023 调试nodejs项目
宅斗士的博客
04-23 345
项目采用Ant Design Pro + React，使用前后端分离开发方式，后端可以很容易的打断点调试，但是前端用到了React脚手架，在IDEA中加了调试断点，但是没有什么用处。
C++ WebServer的细节理解
我的博客
04-22 592
在非阻塞模式下，如果 I/O 操作不能立即完成（例如，因为没有数据可读 或 写缓冲区满），系统不会让调用进程阻塞等待，而是立即返回一个错误（通常为 EAGAIN 或 EWOULDBLOCK）。先查询文件描述符 fd 当前的标志，然后将 O_NONBLOCK 标志加入其中，并通过 F_SETFL 来更新文件描述符，最终实现将该文件描述符切换为非阻塞模式。这意味着，如果没有待处理的连接请求（即没有客户端尝试连接到服务器），accept() 会一直阻塞，直到有新的连接请求到达或发生其他特定条件（如超时）为止。
SpringBoot项目打包分离高阶操作
Record Little
04-23 573
虽然传输jar包 比较大，但是安全性、稳定性比较高，不需要关注pom.xml 添加了新的依赖、更新了版本号等等影响版本功能的操作。关注maven的特性， profiles即可满足， 根据不同的activation 状态，激活不同的build操作。每次修改一小部分代码或仅仅更新某个依赖jar包时，都需要重新进行整个项目的构建、打包、上传和部署。但是当你的项目趋于稳定，只有业务上的逻辑变更时，如果使用分离版本，可以加快迭代、更新的速度。弊端： 需要配置IDE命令，修改依赖时需要同时修改2处。
webman 事务回滚失效问题记录
juan9872的博客
04-21 707
webman是一款基于workerman开发的高性能HTTP服务框架。webman用于替代传统的php-fpm架构，提供超高性能可扩展的HTTP服务。你可以用webman开发网站，也可以开发HTTP接口或者微服务。除此之外，webman还支持自定义进程，可以做workerman能做的任何事情，例如websocket服务、物联网、游戏、TCP服务、UDP服务、unix socket服务等等。
vue实现录音并转文字功能，包括PC端web，手机端web
最新发布
byebukesi的博客
04-26 329
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
echarts柱状图鼠标移入遮罩层
09-08
要在 Echarts 柱状图上添加鼠标移入遮罩层，你可以使用 Echarts 的事件处理函数来实现。具体的步骤如下： 1. 首先，你需要在 Echarts 的配置项中定义一个鼠标移入事件的处理函数。可以通过 `series.bar` 或 `series.custom` 属性中的 `itemStyle` 来定义。 ```javascript option = { // ... 其他配置项 series: [ { type: 'bar', itemStyle: { // 定义鼠标移入时的样式 emphasis: { color: 'rgba(0,0,0,0.5)' // 设置遮罩层颜色 } }, // ... 其他配置项 } ] }; ``` 2. 然后，在 Echarts 的 `chart.on` 函数中添加鼠标移入事件监听器，并在监听器中处理相应的逻辑。 ```javascript chart.on('mouseover', function (params) { // 在这里可以添加你想要的鼠标移入事件的逻辑，比如显示遮罩层等操作 }); ``` 3. 最后，将配置项和事件处理函数应用到 Echarts 图表中： ```javascript var chart = echarts.init(document.getElementById('chart'));chart.setOption(option); ``` 这样当鼠标移入柱状图时，会触发鼠标移入事件的处理函数，并根据配置项中定义的样式改变柱状图的外观，实现遮罩层效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值