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'
                    }
                }
            })
        )

自我踩坑 希望和各位小伙伴一起共同进步成长 欢迎交流