echarts 对称条形图（x轴左右对称柱状图）的实现

对称条形图（x轴左右对称柱状图）的实现"/>

echarts 对称条形图（x轴左右对称柱状图）的实现

echarts要实现对称条形图的话（注意，x轴是对称的），没有现成的图，要用两个grid来画图，拼接在一起，下面是配置项：

let data1 = [320, 302, 341, 374, 120, 132, 101];
let data2 = [390, 450, 420, 134, 190, 230, 210];option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {data: ['Profit', 'Expenses', 'Income']},grid: [{left: '3%',right: '50%',bottom: '3%',// containLabel: true},{left: '50%',right: '3%',bottom: '3%',// containLabel: true}],xAxis: [{type: 'value',position: 'bottom',inverse: true,gridIndex: 0},{type: 'value',position: 'bottom',gridIndex: 1}],yAxis: [{type: 'category',gridIndex: 0,axisTick: {show: false},data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},{type: 'category',gridIndex: 1,show: false,axisTick: {show: false},data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}],series: [{name: 'Income',type: 'bar',xAxisIndex: 0,yAxisIndex: 0,data: [320, 302, 341, 374, 390, 450, 420]},{name: 'Expenses',type: 'bar',xAxisIndex: 1,yAxisIndex: 1,data: [120, 132, 101, 134, 190, 230, 210]}]
};

这里有几点注意事项：

• 配置了两个grid后，就要配置两个xAxis和两个yAxis，并且要修改对应的gridIndex
• series每一项都要配置对应的xAxisIndex和yAxisIndex
• 要想让两个坐标系紧密贴在一起，对齐，不能把grid的containLabel设置为true