var x_data1 = ['0', '1', '2', '3', '4', '5', '6']; // 橫座標
var jstr = [5, 6, 40, 100, 58, 99]; //進場數據
var cstr = [36, 11, 22, 69, 115, 196]; //出場數據
var option = {
backgroundColor: '#8B4513',
tooltip: {
trigger: 'axis',
axisPointer: { // 座標軸指示器,座標軸觸發有效
type: 'shadow' // 默認爲直線,可選爲:'line' | 'shadow'
},
formatter: function(params) {
// 重定義marker值
var marker1 = "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(2,242,180,1);'></span>";
var marker2 = "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(2,209,223,1);'></span>";
var res = "時間:" + params[0].name + ":00<br/>";
var index = x_data1.indexOf(params[0].name); //定位到懸浮的名稱在橫座標的位置
for (var i = 0; i < params.length; i++) { //只有一個系列
res += marker1 + "進場數:" + jstr[index] + "輛<br/>";
res += marker2 + "出場數:" + cstr[index] + "輛<br/>";
}
return res;
},
},
grid: [
// 0 進場數
{
top: '20%',
left: '15%',
right: '15%',
height: '30%',
},
// 1 出場數
{
top: '60%',
left: '15%',
right: '15%',
height: '30%',
}
],
calculable: true,
xAxis: [{
name: 'h',
nameLocation: 'end',
nameTextStyle: {
color: '#fff',
fontSize: 12,
},
gridIndex: 0, // 對應前面grid的索引位置(第一個)進場
type: 'category',
axisLabel: {
show: true,
textStyle: {
color: function(value) { // x軸顏色的設定
return value >= 4 ? 'gray' : 'white'; // 橫座標預警值
},
fontSize: 20,
},
margin: 18,
},
axisTick: {
show: false,
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: '#2B70A6' // x軸顏色
}
},
data: x_data1,
splitLine: {
show: false,
lineStyle: {
color: "rgba(52,135,200,.4)",
width: 1,
type: "solid"
}
},
}, {
gridIndex: 1, // 對應前面grid的索引位置(第二個)出場
position: 'top',
type: 'category',
axisTick: {
show: false,
alignWithLabel: true
},
axisLabel: {
show: false,
},
axisLine: {
lineStyle: {
color: '#2B70A6' // x軸顏色
}
},
data: x_data1,
splitLine: {
show: false,
lineStyle: {
color: "rgba(52,135,200,.4)",
width: 1,
type: "solid"
}
},
}],
yAxis: [{
// show : false,//隱藏了y軸
type: 'value',
gridIndex: 0,
name: '進場',
nameLocation: 'center',
nameTextStyle: {
color: '#fff',
fontSize: 20,
},
nameGap: 1,
nameRotate: 0,
axisTick: {
show: false,
// alignWithLabel: true
},
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
splitLine: {
show: false,
lineStyle: {
color: "rgba(52,135,200,.4)",
width: 1,
type: "solid"
}
},
}, {
// show : false,//隱藏了y軸
type: 'value',
gridIndex: 1,
name: '出場',
nameLocation: 'center',
nameTextStyle: {
color: '#fff',
fontSize: 20,
},
nameGap: 1,
nameRotate: 0,
inverse: true,
axisLine: { // y軸
show: false
},
axisLabel: {
show: false,
},
axisTick: { // y軸刻度線
show: false,
alignWithLabel: false
},
splitLine: {
show: false,
lineStyle: {
color: "rgba(52,135,200,.4)",
width: 1,
type: "solid"
}
},
}],
series: [{
name: '進場數',
type: 'bar',
barWidth: 20,
xAxisIndex: 0, // 對應前面x的索引位置(第一個)
yAxisIndex: 0, // 對應前面y的索引位置(第一個)
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: 'rgba(2,242,180,1)'
},
{
offset: 1,
color: 'rgba(2,242,180,.2)'
}
]
)
},
},
data: jstr
}, {
name: '出場數',
type: 'bar',
barWidth: 20,
xAxisIndex: 1, // 對應前面x的索引位置(第二個)
yAxisIndex: 1, // 對應前面y的索引位置(第二個)
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: 'rgba(2,209,223,1)'
},
{
offset: 1,
color: 'rgba(2,209,223,.2)'
}
]
)
},
},
data: cstr
}]
};