柱形图：超过预警值，柱子颜色变化

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/LzzMandy/article/details/81251794

var actualData = [17, 8, 9, 10, 16, 15, 7]; //实际值
var warningData = [10, 10, 10, 10, 10, 10, 10]; //预警值
option = {
    tooltip: {
        trigger: 'axis',
    },
    legend: {
        data: ['实际值', '预警标准'],
    },
    grid: [{
        top: '10%',
        left: '30%',
        width: '50%',
        height: '40%',
        containLabel: false,
    }],
    xAxis: [{
        type: 'category',
        name: '日期',
        data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
    }],
    yAxis: [{
        type: 'value',
        name: '数量',
    }],
    series: [{
            name: '实际值',
            type: 'bar',
            barWidth: 40,
            itemStyle: {
                normal: { //这里必须加normal,否者不显示夜色变化
                    color: function(params) {//超过预警值显示红色
                        if (actualData[params.dataIndex] > warningData[params.dataIndex]) {
                            return 'pink';
                        } else {
                            return 'green';
                        }
                    }
                }
            },
            data: actualData
        },
        {
            name: '预警标准',
            type: 'line',
            data: warningData,
            itemStyle: {
                normal: {
                    color: 'red'
                }
            }
        }
    ]
};