这里series[0]应该是从yAxis[1]的上届向下的柱状图。
配置项如下
option = {
title: {
show: true,
trigger: 'item'
},
tooltip: {
trigger: 'none'
},
grid: [{
height: 160,
}, {
top: 260,
}],
xAxis: [{
gridIndex: 1,
data: ['OURS', 'ICBC', 'HSBC', 'DBS', 'BOC', 'INB', 'CMB', 'SPOB'],
splitLine: true,
position: 'top',
interval: 1
}, {
gridIndex: 1,
min: 0,
max: 100,
show: false
}, {
gridIndex: 0,
data: ['OURS', 'ICBC', 'HSBC', 'DBS', 'BOC', 'INB', 'CMB', 'SPOB'],
splitLine: true,
position: 'bottom',
axisLabel: {
show: false
}
}, {
gridIndex: 0,
min: 0,
max: 100,
show: false
}],
yAxis: [{
gridIndex: 1,
max: 9390,
min: 9350,
interval: 1,
splitLine: {
lineStyle: {
opacity: 0.2
}
}
}, {
name: 'offer',
gridIndex: 1,
max: 0,
min: 40,
inverse: true,
show: false
}, {
name: 'spread',
gridIndex: 0,
//show: false,
max: 0,
min: 20
}],
series: [{
name: 'offer',
type: 'bar',
yAxisIndex: 1,
xAxisIndex: 0,
barGap: '-100%',
//barWidth: '80%',
data: [
9390 - 9373,
9390 - 9374,
9390 - 9378,
9390 - 9378,
9390 - 9372,
9390 - 9371,
9390 - 9383,
9390 - 9382
],
tooltip: {
formatter: ''
},
itemStyle: {
normal: {
color: '#338833',
opacity: 0.9
}
},
z: 3
}, {
name: 'bid',
type: 'bar',
yAxisIndex: 0,
xAxisIndex: 0,
data: [9366, 9368, 9367, 9362, 9360, 9360, 9369, 9369],
//barWidth: '80%',
itemStyle: {
normal: {
color: '#883333',
opacity: 0.9
}
},
z: 3
}, {
name: 'mybid',
type: 'line',
yAxisIndex: 0,
xAxisIndex: 1,
data: [
[0, 9366],
[100, 9366]
],
itemStyle: {
normal: {
opacity: 0
}
},
tooltip: {
trigger: 'none'
},
stack: 'band',
lineStyle: {
normal: {
opacity: 0.1
}
}
}, {
name: 'myoffer',
type: 'line',
yAxisIndex: 0,
xAxisIndex: 1,
data: [
[0, 7],
[100, 7]
],
stack: 'band',
lineStyle: {
normal: {
opacity: 0.1
}
},
itemStyle: {
normal: {
opacity: 0
}
},
tooltip: {
trigger: 'none'
},
areaStyle: {
normal: {
color: '#fff',
opacity: 0.3
}
},
z: 4
},{
name: 'spread',
type: 'bar',
yAxisIndex:2,
xAxisIndex:2,
data: [
9373-9366,
9374-9368,
9378-9367,
9378-9362,
9372-9360,
9371-9360,
9383-9369,
9382-9369,
]
}, {
name: 'mySpread',
type: 'line',
yAxisIndex: 2,
xAxisIndex: 3,
data: [
[0, 7],
[100, 7]
],
lineStyle: {
normal: {
opacity: 0.2
}
},
itemStyle: {
normal: {
opacity: 1
}
},
tooltip: {
trigger: 'none'
},
areaStyle: {
normal: {
color: '#fff',
opacity: 0.3
}
},
z: 2
}]
};