#### **通过万能组件配置双向对比条形图** **案例效果** ![](https://img.kancloud.cn/a9/96/a996114403159f9eaae133bbad428f1c_876x726.png) **代码实现** ``` option = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: { data: [ '支出', '收入'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'value' } ], yAxis: [ { type: 'category', axisTick: { show: false }, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] } ], series: [ { name: '收入', type: 'bar', stack: '总量', label: { show: true }, data: [320, 302, 341, 374, 390, 450, 420] }, { name: '支出', type: 'bar', stack: '总量', label: { show: true, position: 'left' }, data: [-120, -132, -101, -134, -190, -230, -210] } ] }; ```