echarts -- 柱状图之柱状条如何显示白色侧阴影且鼠标移入时高亮

这篇具有很好参考价值的文章主要介绍了echarts -- 柱状图之柱状条如何显示白色侧阴影且鼠标移入时高亮。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

有个图表是要求柱状条的右下侧显示一个白色的侧阴影,一直没找到合适的方法, 加border或者shadowColor都达不到需求的效果。

echarts -- 柱状图之柱状条如何显示白色侧阴影且鼠标移入时高亮,Echarts,echarts,前端,javascript

因为柱状图 中series里可以包含多组数据,有几组就代表一个系列中有几个数据。这就代表series里要写七组数据。

echarts -- 柱状图之柱状条如何显示白色侧阴影且鼠标移入时高亮,Echarts,echarts,前端,javascript

对于上图的需求,我们可以在series里设置两组数据,也就是一系列里有两个柱状图,缩小其距离使其重合从而显示 为主柱状条的侧阴影。主要是设置副柱状条的宽度为1,主副柱状图直接的barGap为0就可以。其data数据和主柱状条一样。颜色就是需求的渐变侧阴影的颜色。

echarts -- 柱状图之柱状条如何显示白色侧阴影且鼠标移入时高亮,Echarts,echarts,前端,javascript

不过这样还会影响到另一个需求,就是当鼠标移入的时候柱状条颜色变换。怎么能同时改变主副两个柱状条的高亮呢?我们知道,单个柱状图高亮显示只需要设置emphasis这个属性就可以了。
两个柱状条一起变化的话,可以使用echarts的鼠标事件来解决。
先用emphasis属性设置好高亮时的颜色,然后:
echarts -- 柱状图之柱状条如何显示白色侧阴影且鼠标移入时高亮,Echarts,echarts,前端,javascript

seriesName就是series属性里对应的两组数据的name。

highlight 高亮指定的数据图形。

downplay 取消高亮指定的数据图形。

关于echarts的图表的行为事件,可以移步:echarts的dispatchAction这一篇。

 文章来源地址https://www.toymoban.com/news/detail-824259.html

到了这里,关于echarts -- 柱状图之柱状条如何显示白色侧阴影且鼠标移入时高亮的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • window鼠标文本选择项(I)显示为白色解决办法

    window鼠标文本选择项显示为白色时,容易丢失鼠标位置 解决办法: 在开始菜单搜索控制面板  进入控制面板选择鼠标选项, 如果没有找到,可以尝试把右上角的查看方式改为小图标 点击最上方的指针(这个时候你应该是window默认(系统方案)) 选择windows黑色(系统方案)

    2024年02月04日
    浏览(41)
  • 【CSS】鼠标(移入/移出)平滑(显示/隐藏)下划线

    鼠标移入内容时,下划线从 左 开始绘制到 右 侧结束 鼠标移出内容时,下划线从 左 开始擦除到 右 侧结束 我们给内容添加一个黑色背景 background: #000; 示例 效果 将黑色背景 background: #000; 替换成彩色渐变背景 background: linear-gradient(to right,#ec695c,#61c454); 示例 效果 宽度设置100个

    2024年02月09日
    浏览(53)
  • Vue中实现鼠标移入显示,移出隐藏滚动条

    实现目标:鼠标移入显示滚动条,移出隐藏滚动条。 1、 html 结构内容如下: 注意:文本内容需要溢出容器才能显示滚动条。 代码说明: 2、 css 样式: 注意:该样式存在兼容性问题,只在以 webkit 为内核的浏览器才可使用。 3、 js 功能实现: 4、效果演示 补充:实现隐藏滚

    2024年04月22日
    浏览(77)
  • css滚动条变细且隐藏,鼠标移入显示

    全局修改滚动条的样式,让滚动条变细且隐藏,只有鼠标移入到所属区域时才显示。 滚动条可设置的元素: 元素后面还可以跟一些事件:

    2024年01月19日
    浏览(43)
  • Echarts 柱状图显示百分比

    要求:每个数值显示具体百分比,计算方式为: effect_cnt/total_cnt 数据结构为:{ \\\"dt\\\": \\\"20240110\\\", \\\"effect_cnt\\\": 725, \\\"total_cnt\\\": 1387, \\\"both_effect_cnt\\\": 912, \\\"green_cnt\\\": 650 }, 打印 formatter 的 params 里面只有 “effect_cnt” 的值,如果要进行计算,需要 params 里面包含 “total_cnt” 

    2024年01月20日
    浏览(42)
  • el-table溢出隐藏 鼠标移入显示tooltip逻辑

    文件 element-ui/packages/table/src/table-body.js 截取部分代码 记录点 鼠标事件 mouseenter / mouseleave (新), mouseover / mouseout (旧) 新的鼠标移入移出事件,去掉了冒泡和捕获的特性 mouseenter:鼠标第一次移动到元素区域时触发 (新) mouseleave:移出时触发(新) mousemove:在元素上移

    2024年02月10日
    浏览(54)
  • el-button实现按钮,鼠标移入显示,移出隐藏

    2023.8.18今天我学习了 如何实现鼠标移入显示按钮,鼠标移出隐藏按钮。 效果如图: 鼠标移入时: 鼠标移出时:    原本我是想直接在el-button写入这两个方法,但是elementUI并不支持。 所以我在外面套了一层div

    2024年02月12日
    浏览(49)
  • vue鼠标移入显示弹窗,移出隐藏弹窗,记录一下

    鼠标移入A弹出B , 移出A隐藏B, A : B :  逻辑 :

    2024年02月04日
    浏览(45)
  • Element UI 之table表格表头过长使用点点…显示,并添加鼠标移入悬浮显示

    需求 鼠标移入表头 关键点: 1.样式中添加:(如果在scope中会不起作用) 2.在需要悬浮显示的表头文字过长处添加 3.methods中添加: 实现 转载处:https://blog.csdn.net/qq_43519782/article/details/116647539

    2024年02月12日
    浏览(50)
  • Qt 鼠标移入QLabel、离开QLabel、点击QLabel显示不同的效果

    通过Qt建立一个窗口应用,经常会出现以下的应用场景:即鼠标移入、离开以及点击一个QLabel时,QLabel相应的样式发生改变,发生诸如“ 边框加粗 ”、“ 背景色改变 ”、“ 显示文本 ”等变化,本案例通过编写一个继承于QLabel的MyLabel类实现上述需求。通过重写enterEvent、le

    2024年02月13日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包