echarts做双柱图
1、先看效果:
2、思路:
是横向柱图沿着Y轴方向有正负数据的效果,所以做出图的关键在于组合series;
3、上option:
option = { title: { "text": `201808`, "left": "center", "top": "5%", "textStyle": { "color": "#333333", "fontFamily": "PingFangSC-Medium", "fontSize": 14, "lineHeight": 16, "rich": { "a": { "color": '#bebebe', "fontSize": 12, }, } } }, tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, grid: { top: 80, bottom: 30 }, xAxis: { type: 'value', position: 'top', axisLine: {show: false}, axisLabel: {show: false}, axisTick: {show: false}, splitLine: {show: false}, }, yAxis: { type: 'category', axisLine: {show: false}, axisLabel: {show: false}, axisTick: {show: false}, splitLine: {show: false}, data: ['ten', 'nine', 'eight', 'seven', 'six', 'five', 'four', 'three', 'two', 'one'] }, series: [ { "name": "202008", "type": "bar", "stack": "202008人数", "color": "#FF7D00", "label": { "show": true, "position": [ "0%", "30%" ], "color": "#000", "formatter": "233(22%)" }, "data": [ 26, 141, 75, 282, 37, 26, 141, 75, 282, 37, ] }, { "name": "202008legend", "type": "bar", "stack": "202008人数", "color": "#FF7D00", "label": { "show": false }, "data": [ -26, -141, -75, -282, -37, -26, -141, -75, -282, -37, ] } ] };