echarts条形图中如何实现鼠标悬停在某个柱状上时，设置该柱状的颜色，移出时恢复到原来的颜色

发布网友 发布时间：2022-04-21 15:09

我来回答

共3个回答

热心网友 时间：2023-11-13 08:01

设置itemStyle.normal.color ,这个就是你悬停后的颜色，移出后恢复追问但是我的series-itemStyle.normal.color中写的是一个function,功能是让最大值和最小值显示不同的颜色，这样怎么设置itemStyle.normal.color啊？能写段代码给我看看吗？谢谢！！

追答我刚才说错了，设置series-itemStyle.emphasis.color

热心网友 时间：2023-11-13 08:01

Echarts使用itemSytle来控制样式。

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

页面效果（原图）：

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

扩展资料：

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

itemStyle详解：

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

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

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

参考资料来源：

Echarts官网-配置文档 

热心网友 时间：2023-11-13 08:02

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