Echarts 鼠标hover时柱状图设置背景色

在使用echarts时，有时需要给柱状图设置背景，有以下几种情况

1. hover时设置背景色

只需要在tooltip里设置axisPointer即可

tooltip: {trigger: 'axis',showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位msaxisPointer: {type: 'shadow',shadowStyle: {color: 'rgba(74, 211, 164, 0.15)',width: '1'}}},

设置渐变背景色

  tooltip: {trigger: 'axis',showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位msaxisPointer: {type: 'shadow',shadowStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(0,253,255,0.6)'},{offset: 1,color: 'rgba(73,201,229,0)'}]),width: 'auto'}}},

设置背景色

  series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar',showBackground: true,backgroundStyle: {color: 'rgba(180, 180, 180, 0.2)'}}]

Echarts 鼠标hover时柱状图设置背景色相关推荐

如何在鼠标hover时改变标注的样式
如何在鼠标hover时改变标注的样式? ---------------- 教程 ----------------------- 首先创建1张地图 //初始化地图对象,加载地图 var map ...
.net dataGridView当鼠标经过时当前行背景色变色；然后【给GridView增加单击行事件，并获取单击行的数据填充到页面中的控件中】...
1.首先在前台dataGridview属性中增加onRowDataBound属性事件 2.然后在后台Observing_RowDataBound事件中增加代码 protected void Obser ...
el-table单元格内容较多时隐藏，鼠标hover时显示并且显示的内容可以换行 el-table提示框样式优化
目录一.el-table内容较多时隐藏,hover时换行显示二.总结一.el-table内容较多时隐藏,hover时换行显示 1.在需要隐藏的列el-table-column中加上属性 :s ...
echarts 鼠标经过时改变折线拐点的小圆圈样式
series: [ {type: 'line', // symbol:'circle', // 折线点设定为实心点 symbolSize: 9, // 设定折线点的大小 label: {normal: ...
鼠标 hover时盒子阴影效果，凸起效果_ box-shadow的应用
盒子阴影 <div class="test-shadow"></div> <style>.test-shadow{background-colo ...
html海南地图插件,Echarts 地图（map）插件之鼠标HOVER和tooltip自定义数据
在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择, 这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据: 一.鼠标HOVER时的事件: 参照官方文档 ...
自定义QListWidget实现item被hover时改变图标样式（模仿网易云音乐选项列表）（方法一）
环境配置 :MinGW + QT 5.12 效果图: 这里需要说明一下:QListWidget是鼠标press时item就会被选中,自定义的TestListWidget类重写了mousePressEv ...
layui使用tips_使用layer.tips实现鼠标悬浮时触发事件提示消息实现
代码: 你瞅啥!?过来试试! 方法一: function show(id) { layer.tips("左边么么哒", "#"+id+"", ...
鼠标hover出现遮罩
鼠标移动到图片上显示遮罩,并且显示一些文字效果: 鼠标没有悬停鼠标悬停分析: 遮罩层主要是以半透明黑色背景为主,加上文字和四根修饰线条,这就是鼠标hover到图片上以后要显示的内容. 先将遮罩内 ...

Echarts 鼠标hover时柱状图设置背景色

1. hover时设置背景色

Echarts 鼠标hover时柱状图设置背景色相关推荐

最新文章

热门文章