ECharts 漏斗图：展示转化率数据的直观方式
漏斗图（Funnel Chart）是一种常用的数据可视化工具，特别适合展示逐渐减少的数据流，通常用于转化率分析或销售流程展示。例如，从潜在客户到实际购买的各个阶段，漏斗图通过不同宽度的图层清晰地展现每一层数据的比例变化。
本文将详细介绍如何使用 ECharts 绘制漏斗图，涵盖其配置方法、层次关系的定义和样式的调整，并提供详细的示例代码和使用技巧。
一、ECharts 安装
在开始绘制漏斗图之前，需要确保已引入 ECharts。您可以通过 CDN 方式引入，也可以通过 npm 安装。
1. 使用 CDN 引入 ECharts
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
2. 使用 npm 安装
在使用 npm 构建的项目中，您可以使用以下命令安装 ECharts：
npm install echarts --save
然后在代码中引入：
import * as echarts from 'echarts';
二、漏斗图的基础结构
漏斗图的核心是由一系列数据项组成的，每一项可以代表一个步骤、阶段或类别，通过图形的高度和宽度表现数据大小的不同。ECharts 中的漏斗图支持对数据排序、形状变化、颜色设置等操作。
三、绘制基本的漏斗图
接下来，我们将通过一个简单的漏斗图示例展示其基本用法。
1. 定义 HTML 结构
首先，定义一个用于容纳漏斗图的 div 容器：
<div id="funnelChart" style="width: 800px; height: 600px;"></div>
2. 创建基本的漏斗图配置
接下来，我们使用 ECharts 的 option 配置项创建漏斗图：
var funnelChart = echarts.init(document.getElementById('funnelChart'));
var funnelOption = {
title: {
text: '转化率分析 - 漏斗图示例',
left: 'center',
textStyle: {
color: '#333',
fontSize: 20
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c}%'
},
legend: {
left: 'left',
data: ['展现', '点击', '访问', '咨询', '订单']
},
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'
},
labelLine: {
length: 10,
lineStyle: {
width: 1,
type: 'solid'
}
},
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
emphasis: {
label: {
fontSize: 20
}
},
data: [
{ value: 60, name: '访问' },
{ value: 40, name: '咨询' },
{ value: 20, name: '订单' },
{ value: 80, name: '点击' },
{ value: 100, name: '展现' }
]
}
]
};
funnelChart.setOption(funnelOption);
3. 完整的 HTML 示例
以下是完整的 HTML 代码，结合 ECharts 漏斗图的配置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts 漏斗图示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<h1>使用 ECharts 绘制漏斗图</h1>
<div id="funnelChart" style="width: 800px; height: 600px;"></div>
<script>
var funnelChart = echarts.init(document.getElementById('funnelChart'));
var funnelOption = {
title: {
text: '转化率分析 - 漏斗图示例',
left: 'center',
textStyle: {
color: '#333',
fontSize: 20
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c}%'
},
legend: {
left: 'left',
data: ['展现', '点击', '访问', '咨询', '订单']
},
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'
},
labelLine: {
length: 10,
lineStyle: {
width: 1,
type: 'solid'
}
},
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
emphasis: {
label: {
fontSize: 20
}
},
data: [
{ value: 60, name: '访问' },
{ value: 40, name: '咨询' },
{ value: 20, name: '订单' },
{ value: 80, name: '点击' },
{ value: 100, name: '展现' }
]
}
]
};
funnelChart.setOption(funnelOption);
</script>
</body>
</html>
4. 数据和配置项解释
- title：设置图表的标题，并控制其位置和样式。
- tooltip：启用鼠标悬停提示，展示详细的转化率信息。
- legend：设置图例，便于用户识别不同的数据项。
- series：定义漏斗图的主要数据，其中每个数据项代表一个转化阶段，
value为该阶段的百分比。- sort：定义数据的排序方式，
descending表示按值从大到小排序，ascending则相反。 - gap：设置每个层级之间的间距。
- label：配置显示在漏斗图上的文本标签。
- sort：定义数据的排序方式，
四、漏斗图的样式调整
通过 itemStyle 可以自定义漏斗图每个部分的颜色、边框和透明度。此外，ECharts 还提供了动态效果，如悬停时放大效果。
1. 修改颜色和透明度
可以通过设置 itemStyle 来调整每个数据项的颜色和透明度：
itemStyle: {
color: function (params) {
var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'];
return colorList[params.dataIndex];
},
opacity: 0.8,
borderColor: '#fff',
borderWidth: 2
}
2. 添加动态效果
可以通过 emphasis 配置悬停时的数据项样式，如增大标签字体等：
emphasis: {
label: {
fontSize: 20
}
}
3. 控制图表的大小
通过 minSize 和 maxSize 来定义漏斗图的最小和最大尺寸：
minSize: '10%', // 最小值
maxSize: '100%' // 最大值
五、处理层次关系
漏斗图的核心是数据的层次关系，通常从最宽的“顶部”到最窄的“底部”。通过 sort 属性可以轻松定义数据的层次顺序。
1. 自定义排序
- descending：从大到小排序，适合展示逐级递减的转化过程。
- ascending：从小到大排序，适合表现递增的过程或反向数据流。
2. 自定义层次颜色
通过 itemStyle 的 color 属性，可以为不同层次的漏斗段设置不同颜色。也可以使用回调函数根据数据值动态生成颜色。
六、漏斗图中的交互性
ECharts 漏斗图支持丰富的交互效果，如悬停高亮、动态数据更新
等。
1. 实现数据更新
假设你想在某个操作后更新漏斗图中的数据，只需使用 setOption 方法来重新设置数据：
funnelChart.setOption({
series: [{
data: [
{ value: 70, name: '访问' },
{ value: 50, name: '咨询' },
{ value: 30, name: '订单' },
{ value: 90, name: '点击' },
{ value: 120, name: '展现' }
]
}]
});
2. 实现点击事件
ECharts 支持图表的点击事件，可以通过 on 方法监听漏斗图的点击，并执行相应的操作：
funnelChart.on('click', function (params) {
alert('你点击了: ' + params.name + '，转化率为: ' + params.value + '%');
});
七、结合其他组件使用
漏斗图可以与其他组件（如图例、数据视图、保存按钮等）结合使用，增强用户体验。
1. 启用数据视图和保存功能
通过 toolbox 可以启用保存图表和查看数据的功能：
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
saveAsImage: { show: true }
}
}
2. 添加数据缩放
如果漏斗图中数据项较多，可以通过 dataZoom 组件添加数据缩放功能：
dataZoom: {
type: 'slider',
show: true
}
八、总结
本文详细介绍了如何使用 ECharts 绘制漏斗图，涵盖了其基本配置、样式调整、交互效果和结合其他组件的使用。漏斗图是分析转化率和流程的重要工具，ECharts 提供了丰富的功能来定制和展示漏斗图，帮助用户更好地理解数据的层次和变化。