ECharts-漏斗图

---

前言

使用三个series实现，第一个是虚化的背景漏斗那一块，第二个是实心的漏斗那一块，第三个是为了让横线旁的文字对齐所以value都是0。

---

一、效果

二、使用步骤

复制后直接在ECharts实例中粘贴使用
代码如下：

option = {
  tooltip: {
    trigger: 'item'
    // formatter: '{a} <br/>{b} : {c}%'
  },
  toolbox: {
    feature: {
      dataView: { readOnly: false },
      restore: {},
      saveAsImage: {}
    }
  },

  series: [
    {
      type: 'funnel',
      left: '5%',
      width: '60%',
      color: ['#703AC2', '#0D74C1', '#37ABC4', '#6FB788', '#E6E97E'],
      label: {
        // position: 'inside',
        formatter: '',
        show: false
        // color: '#fff'
      },
      labelLine: {
        show: false
      },
      itemStyle: {
        opacity: 0.5
      },
      gap: 4,
      maxSize: '60%',
      // height: '86%',
      top: 20,
      bottom: 30,
      sort: 'descending',
      data: [
        { value: 98, name: '易制毒' },
        { value: 78, name: '易制爆' },
        { value: 64, name: '剧毒' },
        { value: 62, name: '爆炸' },
        { value: 42, name: '精麻品' }
      ]
    },
    {
      type: 'funnel',
      left: '-5%',
      width: '80%',
      maxSize: '30%',

      // height: '86%',
      gap: 4,
      top: 20,
      bottom: 30,
      sort: 'descending',
      label: {
        formatter: ''
      },
      itemStyle: {
        opacity: 1,
        // borderColor: '#fff',
        // borderWidth: 2
      },
      labelLine: {
        length: 0
      },
      data: [
        { value: 44, name: '易制毒', num: 44, l: 16.123, kg: 5.521 },
        { value: 39, name: '易制爆', num: 39, l: 12.321, kg: 4.254 },
        { value: 33, name: '剧毒', num: 33, l: 10.254, kg: 4.012 },
        { value: 27, name: '爆炸', num: 27, l: 9.213, kg: 3.654 },
        { value: 14, name: '精麻品', num: 14, l: 8.214, kg: 3.218 }
      ]
    },
    {
      type: 'funnel',
      left: '-5%',
      width: '80%',
      maxSize: '0%',
      // height: '86%',
      gap: 4,
      top: 20,
      bottom: 30,
      sort: 'descending',
      label: {
        show: true,
        lineHeight: 18,
        textBorderColor: 'transparent',
        formatter: function (params) {
          return (
            '{f|' +
            params.name +
            '}' +
            '\n' +
            params.data.num +
            '瓶(' +
            params.data.l +
            'L、' +
            params.data.kg +
            'KG)'
          );
        },
        rich: {
          f: {
            color: '#999999'//字体颜色
          }
        }
      },
      itemStyle: {
        opacity: 1,
        borderColor: 'transparent'
        // borderWidth: 2
      },
      labelLine: {
        // show: false
        length: 220//线的长度
      },

      // labelLine: {
      //   normal: {
      //     show: true,
      //     length: 30
      //   }
      // },
      // tooltip: {
      //   show: false
      // },

      data: [
        { value: 0, name: '易制毒', num: 44, l: 16.123, kg: 5.521 },
        { value: 0, name: '易制爆', num: 39, l: 12.321, kg: 4.254 },
        { value: 0, name: '剧毒',  num: 33, l: 10.254, kg: 4.012 },
        { value: 0, name: '爆炸',  num: 27, l: 9.213, kg: 3.654 },
        { value: 0, name: '精麻品',num: 14, l: 8.214, kg: 3.218 }
      ]
    }
  ]
};

---