Echarts柱状图禁用高亮踩坑日记

最新推荐文章于 2025-06-05 14:01:47 发布

原创最新推荐文章于 2025-06-05 14:01:47 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

前端同时被 2 个专栏收录

24 篇文章

订阅专栏

emphasis

1 篇文章

订阅专栏

本文介绍了解决Echarts柱状图中不同颜色数据项在鼠标悬停时保持原有颜色的方法。通过在data中直接定义itemStyle来实现正常状态(normal)与强调状态(emphasis)的颜色设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Echarts柱状图禁用高亮解决方案

仅供参考自我记录.

使用series下的itemStyle解决

                //鼠标悬停高亮时：
                emphasis: {
                    color: 'red',//此方法适用一种柱状图颜色的时候
                }

此处的坑项目需求一旦一条data 要区分不同颜色时例如:

//data=[100.6, 100.6, 100.57, 100.56, 100.56, 100.56, 778.32, 512.32, 473.32, 394.32, 381.32]
			itemStyle: {
                    normal: { //静态的时候显示的默认样式
                        color: params => params.dataIndex > 3 ? 'pink' : 'red',
                    },
                    emphasis: {
                        // color: 'red',
                        //错误写法 emphasis里面 color 不能使用function
                        color: params => params.dataIndex > 3 ? 'pink' : 'red',                
                    }
                }

此时无法生效emphasis
针对此情况 - 第二种解决方案在数据来源出解决

        var data = [100.6, 100.6, 100.57, 100.56, 100.56, 100.56, 778.32, 512.32, 473.32, 394.32, 381.32];
        data = data.map((item, i) =>
            i > 3 ? item = ({
                value: item,
                itemStyle: {
                    normal: {
                        color: 'pink'
                    },
                    emphasis: {
                        color: 'pink'
                    }
                }
            }) : item = ({
                value: item,
                itemStyle: {
                    normal: {
                        color: 'red'
                    },
                    emphasis: {
                        color: 'red'
                    }
                }
            })
        )