多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
#### **通过万能组件配置正负条形图** **案例效果** ![](https://img.kancloud.cn/a2/80/a280e5e7121d35f5cba9913d5371c588_872x732.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', label: { show: true, position: 'inside' }, data: [200, 170, 240, 244, 200, 220, 210] }, { 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] } ] }; ~~~