根據項目需求柱狀圖始終顯示24小時的資料，跨天後兩天的資料用不同的顔色表示。
主要是對圖表裡 series.itemStyle的color的設定。
完整源碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>根據橫坐标顯示不同顔色</title>
<style>
.main {
width: 856px;
height: 640px;
border: 1px solid #ccc;
margin: 110px auto 0 auto;
}
</style>
</head>
<body>
<!-- 放置圖示 -->
<div id="main" class="main"></div>
<!-- 引入相關檔案 -->
<script src="js/jquery-2.1.4.min.js"></script>
<!-- 引入 ECharts 檔案 -->
<script src="js/echarts.js"></script>
<script>
// 基于準備好的dom，初始化echarts執行個體
var echart = echarts.init(document.getElementById('main'));
var datax = ['2019-10-17 21:00','2019-10-17 22:00','2019-10-17 23:00','2019-10-18 00:00', '2019-10-18 01:00', '2019-10-18 02:00', '2019-10-18 03:00', '2019-10-18 04:00', '2019-10-18 05:00', '2019-10-18 06:00',
'2019-10-18 07:00', '2019-10-18 08:00', '2019-10-18 09:00', '2019-10-18 10:00:00', '2019-10-18 11:00', '2019-10-18 12:00', '2019-10-18 13:00', '2019-10-18 14:00', '2019-10-18 15:00', '2019-10-18 16:00', '2019-10-18 17:00',
'2019-10-18 18:00', '2019-10-18 19:00', '2019-10-18 20:00']
var datas= ['92', '72', '80', '92', '60', '89', '82', '68', '98', '86', '79', '84', '76', '87', '62', '72', '82', '98', '86', '79', '87', '74', '82', '62']
// 指定相關的配置項和資料
var option = {
title: {
text: '柱狀圖'
},
//滑鼠滑過展示資料
tooltip: {
show: true,
trigger: 'item',
backgroundColor: 'rgba(0,0,0,.3)',
textStyle: {
color: 'rgb(255,255,255)',
},
formatter: '{b}<br>{c}'
},
color: ['#289df5',''],
grid: {
top: '15%',
left: '24',
right: '6%',
bottom: '15',
containLabel: true
},
// X軸樣式
xAxis: {
type: 'category',
axisLine: {
show: false
},
axisTick: {
length: 0 // 刻度線的長度
},
axisLabel: {
interval: 0, // 坐标軸刻度标簽的顯示間隔，在類目軸中有效。
textStyle: {
color: '#00c5d7'
},
show: true,
textStyle: {
fontSize: 12
},
formatter: function (value, index) {
// 格式化成月/日，隻在第一個刻度顯示年份
var date = new Date(value)
return (date.getHours()) + '時'
}
},
name: '(時)',
nameTextStyle: {
padding: [24, 0, 0, 0],
color: '#00c5d7'
},
nameGap: 0,
data: datax,
axisTick: {
alignWithLabel: true
}
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
axisTick: {
length: 0 // 刻度線的長度
},
splitLine: {
lineStyle: {
// color: ["#051d5f"],
color: ['#094386'],
width: 1,
type: 'solid'
}
},
axisLabel: {
textStyle: {
color: '#a3a4b2'
}
}
},
series: [{
name: ' ',
type: 'bar',
smooth: false,
itemStyle : {
normal : {
//color:'#8cd5c2', //改變柱子的顔色
color: function(params){
var date = new Date(datax[params.dataIndex])
var curHours = (date.getHours())
var maxDate = new Date((datax[datax.length - 1]))
var maxHours = (maxDate.getHours())
if (parseInt(curHours) >= 1 && parseInt(curHours) <= parseInt(maxHours)) {
return '#fbc01b'
}else{
return '#289df5'
}
}
}
},
data: datas,
}],
};
echart.setOption(option);
// echart圖表自适應
window.addEventListener("resize", function() {
echart.resize();
});
</script>
</body>
</html>