echarts实现蝴蝶图

 效果图如下：

option代码如下：

{
      title: {
        text: '蝴蝶图',
      },
      legend: {
        show: true,
        top: 'bottom',
        left: 'center',
        data: ["1月销量", "2月销量"],
      },
      // 蝴蝶图相当于是对称的条形柱状图，需要构建左右两个grid
      grid: [
        {
          show: false,
          left: "12%",
          // 左侧grid，距离右侧50%，保证占有一半的距离
          right: "50%",
          containLabel: false,
        },
        {
          show: false,
          right: "12%",
          // 右侧grid，距离左侧50%，保证占有一半的距离
          left: "50%",
          containLabel: false,
        },
      ],
      xAxis: [
        {
          gridIndex: 0,
          type: "value",
          // 翻转x轴
          inverse: true,
          position: "bottom",
          splitLine: {
            show: true,
          },
          name: "1月销量",
          nameLocation: "middle",
          nameGap: 30,
        },
        {
          gridIndex: 1,
          type: "value",
          // 翻转x轴
          inverse: false,
          position: "bottom",
          splitLine: {
            show: true,
          },
          name: "2月销量",
          nameLocation: "middle",
          nameGap: 30,
        },
      ],
      yAxis: [
        {
          gridIndex: 0,
          type: "category",
          position: "left",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
          },
          data: ["保时捷", "凯迪拉克", "别克", "吉普", "大众", "奔驰"],
        },
        {
          gridIndex: 1,
          type: "category",
          position: "right",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
          },
          data: ["保时捷", "凯迪拉克", "别克", "吉普", "大众", "奔驰"]
        },
      ],
      series: [
        {
          name: "1月销量",
          type: "bar",
          // 关键点，这里需要设置xAxisIndex和yAxisIndex，对应第1个grid
          xAxisIndex: 0,
          yAxisIndex: 0,
          itemStyle: {
            normal: {
              color: 'rgba(112, 147, 238, 1)',
            },
          },
          data: [{
            name: "保时捷",
            value: 12,
          },
            {
              name: "凯迪拉克",
              value: 20,
            },
            {
              name: "别克",
              value: 10,
            },
            {
              name: "吉普",
              value: 22,
            },
            {
              name: "大众",
              value: 15,
            },
            {
              name: "奔驰",
              value: 18,
            }],
        },
        {
          name: "2月销量",
          type: "bar",
          // 关键点，这里需要设置xAxisIndex和yAxisIndex，对应第2个grid
          xAxisIndex: 1,
          yAxisIndex: 1,
          itemStyle: {
            normal: {
              color: 'rgba(76, 97, 130,1)',
            },
          },
          data: [{
            name: "保时捷",
            value: 12,
          },
            {
              name: "凯迪拉克",
              value: 20,
            },
            {
              name: "别克",
              value: 10,
            },
            {
              name: "吉普",
              value: 22,
            },
            {
              name: "大众",
              value: 15,
            },
            {
              name: "奔驰",
              value: 18,
            }],
        },
      ],
      // 中间分割线
      graphic: [
        {
          type: 'rect',
          z: 100,
          left: 'center',
          top: 'middle',
          shape: {
            height: 180,
          },
          style: {
            stroke: '#000',
            lineWidth: 1,
            lineDash: [1, 2],
          }
        }
      ],
    }