（本文档仅供参考）
想实现下面的双柱图的效果，通过加一个折线图，这个折线图是两个指标值的差值，效果图如下：
差值是D4单元格减去C4单元格，然后基于这些数据作图，如下：
可以使用扩展属性实现，如下：
{
// //鼠标提示
// "tooltip": {
// "show": true,
// "backgroundColor": "#87cefa",
// "formatter": "function(a){ debugger;return a.seriesName+'</br>'+a.data.displayValue}"
// },
grid: [{
show: false,
left: '10%',
top: '15%',
width: '40%',
containLabel: true,
bottom: 60
}, {
show: false,
left: '6%',
top: 120,
bottom: 60,
width: '0%',
}, {
show: false,
left: '50%',
top: '15%',
bottom: 60,
containLabel: true,
width: '40%',
}],
xAxis: [{
type: 'value',
inverse: true,
axisLabel: {
show: true,
color: '#979797',
margin: 0
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
}
}, {
gridIndex: 1,
show: true,
axisLabel: {
color: '#979797',
margin: 0
},
splitLine: {
lineStyle: {
color: '#979797',
type: 'dashed'
}
}
}, {
gridIndex: 2,
type: 'value',
axisLabel: {
show: true,
color: '#979797',
margin: 0
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
}
}],
yAxis: [{
type: 'category',
inverse: false,
position: 'right',
axisLabel: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#979797'
}
},
axisTick: {
show: false
},
}, {
type: 'category',
inverse: false,
gridIndex: 1,
position: 'left',
axisLabel: {
align: 'left',
padding: [8, 0, 0, 0],
fontSize: 12,
fontWeight: 500,
},
axisLine: {
show: false,
lineStyle: {
color: '#979797'
}
},
axisTick: {
show: false
},
}, {
scale: false,
type: 'category',
inverse: false,
gridIndex: 2,
position: 'left',
axisLabel: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#979797'
}
},
axisTick: {
show: false
},
}],
"series": [{
"name": "指标1",
"type": "bar",
"barWidth": 20,
"itemStyle": {
"normal": {
"color": "#ff6600"
},
"emphasis": {
"color": "#ff9900"
}
},
// "stack": "default"
}, {
"name": "指标2",
"type": "bar",
"barWidth": 20,
//控制现在在右边
xAxisIndex: 2,
yAxisIndex: 2,
"itemStyle": {
"normal": {
"color": "#ffcc33"
},
"emphasis": {
"color": "#ffff99"
}
},
// "stack": "default"
}, {
"name": "差值",
"type": "line",
//控制显示在右边
xAxisIndex: 2,
yAxisIndex: 2,
// "stack": "default"
//线圆润显示
smooth: true,
//去掉线上的点
symbol: 'none',
//设置线的样式
"lineStyle": {
"normal": {
"color": "red",
"width": 2,
// shadowColor: 'rgba(0, 0, 0, 0.3)', //设置折线阴影
// shadowBlur: 15,
// shadowOffsetY: 20,
}
},
//面积图渐变设置，可以自行调整颜色
"areaStyle": {
"color": {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [{
"offset": 0,
"color": "rgba(255,0,0,0.5)"
}, {
"offset": 0.34,
"color": "rgba(238,0,0,0.35)"
}, {
"offset": 1,
"color": "rgba(238,0,0,0.20)"
}]
}
}
}]
} |