漏斗图(Funnel Chart)实现

漏斗图(Funnel Chart)实现

漏斗图是一种常见的数据可视化图表，用于展示流程中各个阶段的转化率或数量变化。它通过梯形的面积大小直观反映数据在不同阶段的递减情况，常用于销售转化分析、用户行为路径追踪等场景。ECharts提供了强大的漏斗图支持，能够灵活配置样式、标签和交互效果。

漏斗图基本配置

在ECharts中创建漏斗图需要设置series的type为'funnel'。以下是一个最简单的漏斗图配置示例：

option = {
  title: {
    text: '销售转化漏斗',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c}%'
  },
  series: [
    {
      name: '转化率',
      type: 'funnel',
      left: '10%',
      top: 60,
      bottom: 60,
      width: '80%',
      min: 0,
      max: 100,
      minSize: '0%',
      maxSize: '100%',
      sort: 'descending',
      gap: 2,
      label: {
        show: true,
        position: 'inside'
      },
      data: [
        { value: 100, name: '访问量' },
        { value: 80, name: '点击量' },
        { value: 60, name: '加入购物车' },
        { value: 40, name: '生成订单' },
        { value: 20, name: '完成支付' }
      ]
    }
  ]
};

漏斗图样式定制

ECharts允许对漏斗图的各个部分进行深度样式定制：

颜色设置

可以通过itemStyle配置每个梯形的颜色：

series: [{
  // ...其他配置
  itemStyle: {
    color: function(params) {
      // 自定义颜色
      const colorList = ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae'];
      return colorList[params.dataIndex];
    },
    borderWidth: 1,
    borderColor: '#fff'
  }
}]

标签显示

标签的显示位置和格式可以灵活调整：

label: {
  show: true,
  position: 'inside',
  formatter: function(params) {
    return `${params.name}\n${params.value}%`;
  },
  fontSize: 14,
  color: '#fff'
},
labelLine: {
  length: 10,
  lineStyle: {
    width: 1,
    type: 'solid'
  }
}

多系列漏斗图

ECharts支持在同一图表中展示多个漏斗系列，便于对比分析：

series: [
  {
    name: '2022年',
    type: 'funnel',
    data: [
      { value: 100, name: '访问量' },
      { value: 75, name: '点击量' },
      { value: 50, name: '订单' }
    ]
  },
  {
    name: '2023年',
    type: 'funnel',
    data: [
      { value: 120, name: '访问量' },
      { value: 90, name: '点击量' },
      { value: 65, name: '订单' }
    ]
  }
]

动态排序漏斗图

通过配置sort属性可以控制漏斗图的排序方式：

series: [{
  sort: 'ascending', // 可选值: 'ascending', 'descending', 'none'
  // ...其他配置
}]

漏斗图交互功能

ECharts为漏斗图提供了丰富的交互功能：

高亮效果

emphasis: {
  label: {
    fontSize: 16,
    fontWeight: 'bold'
  },
  itemStyle: {
    shadowBlur: 10,
    shadowOffsetX: 0,
    shadowColor: 'rgba(0, 0, 0, 0.5)'
  }
}

数据筛选

可以通过legend组件实现系列筛选：

legend: {
  data: ['2022年', '2023年']
},
series: [
  {
    name: '2022年',
    // ...配置
  },
  {
    name: '2023年',
    // ...配置
  }
]

漏斗图与其它图表组合

漏斗图可以与其他图表类型组合使用，形成更丰富的数据展示：

option = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['转化率', '增长率']
  },
  grid: [
    {
      left: '55%',
      top: '10%',
      width: '40%',
      height: '40%'
    }
  ],
  xAxis: [
    {
      type: 'category',
      data: ['访问量', '点击量', '订单'],
      gridIndex: 0
    }
  ],
  yAxis: [
    {
      type: 'value',
      gridIndex: 0
    }
  ],
  series: [
    {
      name: '转化率',
      type: 'funnel',
      data: [
        { value: 100, name: '访问量' },
        { value: 80, name: '点击量' },
        { value: 60, name: '订单' }
      ]
    },
    {
      name: '增长率',
      type: 'bar',
      xAxisIndex: 0,
      yAxisIndex: 0,
      data: [10, 15, 20]
    }
  ]
};

漏斗图高级应用

自定义形状

通过funnelAlign和shape属性可以调整漏斗图的形状：

series: [{
  funnelAlign: 'left',
  shape: 'diamond', // 可选: 'funnel', 'diamond', 'triangle', 'pyramid'
  // ...其他配置
}]

动画效果

可以配置丰富的动画效果：

series: [{
  animation: true,
  animationDuration: 1000,
  animationEasing: 'cubicInOut',
  animationDelay: function(idx) {
    return idx * 200;
  }
}]

漏斗图数据处理

数据转换

在数据传入前可以进行预处理：

function processData(rawData) {
  return rawData.map(item => {
    return {
      name: item.stage,
      value: item.count,
      // 可以添加额外字段
      rate: item.rate + '%'
    };
  });
}

const chartData = processData([
  { stage: '访问量', count: 1000, rate: 100 },
  { stage: '点击量', count: 800, rate: 80 }
]);

动态更新

可以通过setOption方法动态更新数据：

function updateChart(newData) {
  myChart.setOption({
    series: [{
      data: newData
    }]
  });
}

漏斗图性能优化

对于大数据量的漏斗图，可以采取以下优化措施：

series: [{
  large: true, // 开启大数据量优化
  largeThreshold: 1000, // 数据量大于1000时启用优化
  progressive: 200, // 渐进式渲染
  progressiveThreshold: 3000, // 数据量大于3000时启用渐进式渲染
  // ...其他配置
}]

漏斗图国际化

支持多语言配置：

option = {
  title: {
    text: i18n.t('funnel.title')
  },
  tooltip: {
    formatter: params => {
      return `${i18n.t(params.name)}: ${params.value}%`;
    }
  },
  series: [{
    data: [
      { value: 100, name: i18n.t('funnel.stage1') },
      { value: 80, name: i18n.t('funnel.stage2') }
    ]
  }]
};

漏斗图响应式设计

确保漏斗图在不同设备上都能良好显示：

function resizeChart() {
  const width = window.innerWidth;
  const option = {
    series: [{
      width: width > 768 ? '80%' : '95%',
      left: width > 768 ? '10%' : '2.5%'
    }]
  };
  myChart.setOption(option);
  myChart.resize();
}

window.addEventListener('resize', resizeChart);