...条形图中如何实现鼠标悬停在某个柱状上时,设置该柱状的颜色...

发布网友发布时间：2023-12-27 05:37

我来回答

共3个回答

热心网友时间：2024-02-26 21:20

设置itemStyle.normal.color ,这个就是你悬停后的颜色，移出后恢复

热心网友时间：2024-02-26 21:19

Echarts使用itemSytle来控制样式。

提供了正常状态normal和悬停状态emphasis，题主要的效果即在emphasis中加入控制颜色的方法即可，代码如下图所示：

页面效果（原图）：

页面效果（鼠标悬停后）：

扩展资料：

提供代码下载链接（只有七天有效期）: https://pan.baidu.com/s/1-KWHV2ndAXlUzzKrvei9mg 提取码: i7qr

itemStyle详解：

图形样式，可设置图表内图形的默认样式和强调样式（悬浮时样式）：

itemStyle: {
normal: {
...
},
emphasis: {
...
}
}

其中normal和emphasis属性为对象，通过有效设置itemStyle的normal和emphasis选项可实现个性化的显示策略，比如希望饼图文字标签默认隐藏，并在鼠标悬浮时通过一条红色的视觉引导线显示在饼图外部区域，可以如下设置：

参考资料来源：

Echarts官网-配置文档

热心网友时间：2024-02-26 21:14

series: [
{
'name': '销量图例',
'type': 'bar',
'data': values,
itemStyle:{
//normal:{color:'yellow'}, //柱形的颜色(默认玫红/深红色)
emphasis:{color:'red'} //鼠标悬停变色
}
}
]