echarts柱状图实现部分高亮效果

说在前面

有时候，我们可能会有某种特殊的需求，即在某种判断条件下，只给某几个柱状图进行高亮显示，下面给大家看看如何实现功能。

开门见山

实现的核心就是series的itemStyle可以每条数据单独编辑。

比如我们希望柱状图二者差值大于5时进行预警展示：

data.forEach((item) => {
    let a = item.value1 - item.value2
    if (a > 5 || a<-5) {
        this.chartOption.series[0].data.push({
            value: item.value1,
            isSlant: item.isSlant,
            itemStyle: {
                shadowColor: 'rgba(255, 255, 0)',
                shadowBlur: 10,
                borderColor: 'rgba(255, 255, 0,0.9)',
                borderWidth: 1
            }
        });
    } else {
        this.chartOption.series[0].data.push({
            value: item.value1,
            isSlant: item.isSlant,
        });
    }
})

实现效果如下：

说到最后

以上。