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