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