Echarts 鼠标hover时柱状图设置背景色
Echarts 鼠标hover时柱状图设置背景色
·
在使用echarts时,有时需要给柱状图设置背景,有以下几种情况
1. hover时设置背景色
只需要在tooltip里设置axisPointer即可
tooltip: {
trigger: 'axis',
showDelay: 0, // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
axisPointer: {
type: 'shadow',
shadowStyle: {
color: 'rgba(74, 211, 164, 0.15)',
width: '1'
}
}
},
设置渐变背景色
tooltip: {
trigger: 'axis',
showDelay: 0, // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
axisPointer: {
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)'
}
}
]
更多推荐
已为社区贡献15条内容
所有评论(0)