echarts多列柱状漏斗图实现

上图：这个是echarts里面实现的结果，可以直接用在echarts里面看效果和调整

 

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    //图例样式调整，看需求
    data: [
      { name: '人工', itemStyle: { color: 'blue' } },
      { name: '机器人', itemStyle: { color: 'green' } }
    ],
    // top: '5%',
    // right: '5%',
    itemWidth: 20, // 设置图例宽度
    itemHeight: 20, // 设置图例高度
    // itemGap: 50, // 设置图例间距
    icon: 'horizontal',
    textStyle: {
      fontSize: 13,
      fontFamily: 'MicrosoftYaHeiUI',
      color: '#149AFD',
      lineHeight: 13
    }
  },
  grid: [
    // 一般都是三列，中间空两边漏斗，具体看需求
    {
      show: false, //是否显示坐标系网格，默认true
      left: '6%', // 容器距离左侧距离
      top: '10%',
      bottom: '3%',
      containLabel: true, // grid 区域是否包含坐标轴的刻度标签。这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。
      width: '40%'
    },
    {
      show: false,
      left: '51%',
      top: '10%',
      bottom: '8%',
      width: '0%' // 中间的只是为了空白占位
    },
    {
      show: false,
      right: '6%',
      top: '10%',
      bottom: '3%',
      containLabel: true,
      width: '40%'
    }
  ],
  xAxis: [
    {
      type: 'value', // 配合y轴实现横向展示柱状图
      show: false, // 是否显示横坐标
      inverse: true // 因为要显示成漏斗状，所以第一个柱状图需要反转
    },
    {
      gridIndex: 1, //x 轴所在的 grid 的索引
      show: false
    },
    {
      gridIndex: 2, //x 轴所在的 grid 的索引
      show: false,
      inverse: false //本身就是向右
    }
  ],
  yAxis: [
    {
      type: 'category',
      // inverse: true, // 是否翻转 主要看后端数据排序是从小到大还是从大到小，自行判断
      axisLine: {
        show: true, // y轴最边上的线是否展示
        lineStyle: {
          // 边线颜色
          color: 'rgba(20, 154, 253, 0.2000)'
        }
      },
      axisTick: {
        show: false //是否显示坐标轴刻度
      },
      axisLabel: {
        //坐标轴刻度标签
        show: true, // 是否显示标签
        interval: 0, //坐标轴刻度标签的显示间隔，在类目轴中有效,可以设置成 0 强制显示所有标签
        color: ['#0ff'],
        align: 'right', // 标签文字右对齐，这样不管文字标签多长，不会影响展示
        inside: true, //刻度标签是否朝内，默认朝外。
        verticalAlign: 'bottom', // 文字垂直对齐方式，默认自动
        lineHeight: 50,
        fontSize: 11,
        padding: [0, -330, 5, 0], //调整标签显示位置
        fontFamily: 'MicrosoftYaHeiUI'
      },
      data: [
        '我是横坐标标签1',
        '我是横坐标标签2',
        '我是横坐标标签3',
        '我是横坐标标签4',
        '我是横坐标标签5',
        '我是横坐标标签6',
        '我是横坐标标签7'
      ]
    },
    {
      gridIndex: 1,
      show: false
    },
    {
      gridIndex: 2,
      type: 'category',
      // inverse: true,
      position: 'left',
      axisLine: {
        show: true, // y轴最边上的线是否展示
        lineStyle: {
          color: 'rgba(20, 154, 253, 0.2000)'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true,
        interval: 0,
        color: ['#0f0'],
        align: 'left',
        inside: true, // y轴data的问题不挤占柱子的长度
        verticalAlign: 'bottom',
        lineHeight: 50,
        fontSize: 11,
        padding: [0, 120, 5, 0],
        fontFamily: 'MicrosoftYaHeiUI'
      },
      data: [
        '我是横坐标标签1',
        '我是横坐标标签2',
        '我是横坐标标签3',
        '我是横坐标标签4',
        '我是横坐标标签5',
        '我是横坐标标签6',
        '我是横坐标标签7'
      ]
    }
  ],
  series: [
    {
      name: '人工',
      type: 'bar',
      barWidth: 20,
      stack: '1', // 用来堆叠的标识
      label: {
        show: true,
        normal: {
          show: true,
          position: 'left', //标签位置在左边
          textStyle: {
            color: 'red',
            fontSize: 13,
            fontFamily: 'DIN-Medium',
            lineHeight: 13
          }
        }
      },
      data: [80, 120, 150, 244, 300, 400, 500]
    },
    {
      name: '机器人',
      type: 'bar',
      stack: '2',
      barWidth: 20,
      xAxisIndex: 2, // 对应图表的下标,yAxis里面有配置
      yAxisIndex: 2,
      itemStyle: {},
      label: {
        show: true,
        normal: {
          show: true,
          position: 'right', //标签位置在右边
          textStyle: {
            color: 'red',
            fontSize: 13,
            fontFamily: 'DIN-Medium',
            lineHeight: 13
          }
        }
      },
      data: [50, 170, 220, 300, 400, 500, 600]
    }
  ]
};