柱形圖:超過預警值,柱子顏色變化

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'
                }
            }
        }
    ]
};

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章