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