連続するステップやコンバージョンパイプライン across で段階的な脱落を追跡する際、ファンネルチャートは標準的な視覚的ツールです。値を段階ごとに狭まるまたは広がる積み重ねられた台形ブロックとして表示することで、ファンネルチャートはユーザーがコンバージョンのボトルネック、脱落率、プロセスの効率性を一目で把握できる—たとえば営業パイプラインの段階、eコマースのチェックアウトフロー、またはリード生成のファンネルなど。
ファンネルチャートの仕組み
Apache EChartsでは、ファンネルチャートはtype: 'funnel'を使用して描画されます。各データオブジェクトにはnameと数値型のvalueが含まれます。エンジンはデータを最大から最小（またはその逆）に自動的に並べ替え、各台形の幅をシリーズ内の最大値に対してスケーリングします。
1. 必須の設定
基本的なファンネルチャートを構築するには、シリーズデータ配列内にカテゴリステージを指定し、type: 'funnel':
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
top: '5%',
left: 'center',
data: ['問い合わせ', '提案', '見積もり', '交渉', '取引']
},
series: [
{
name: '営業ファンネル',
type: 'funnel',
left: '10%',
top: '18%',
bottom: '10%',
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: '取引' }
]
}
]
};
高度な構造技術
ファンネルチャートは、ピラミッドレイアウト、カスタムステージの配置、または二重ファンネルの重ね合わせを用いてカスタマイズでき、異なるコンバージョンチャネルを比較するのに適しています。
1. 逆ピラミッドレイアウトとカスタム配置
を変更してsort: 'ascending'逆ピラミッドを作成するか、またはfunnelAlignを調整して、段階を左端または右端に揃える：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c}%'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'コンバージョンピラミッド',
type: 'funnel',
left: '15%',
top: '18%',
bottom: '10%',
width: '70%',
sort: 'ascending', // 最小の段階を上に、最大の段階を下に描画
funnelAlign: 'center',
label: {
show: true,
position: 'right'
},
data: [
{ value: 20, name: 'ステージ1：認知' },
{ value: 40, name: 'ステージ2：関心' },
{ value: 60, name: 'ステージ3：意思決定' },
{ value: 80, name: 'ステージ4：行動' }
]
}
]
};
レイアウトとステージのスタイルを微調整する
ギャップの追加、角の丸み、カスタムラベルフォーマッターの使用により、コンバージョンステージ間のクリーンな間隔が確保されます。
1. カスタムステージ間隔とパーセンテージラベル
制御する ギャップ台形間の間隔を調整し、カスタムラベルフォーマッターを使用して各ステージ間のパーセンテージ保持率を強調する：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ユーザー'
},
series: [
{
name: 'ユーザーのオンボーディング',
type: 'funnel',
left: '10%',
top: '10%',
bottom: '10%',
width: '80%',
gap: 6, // ステージ間の明確な分離を追加
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2,
borderRadius: 4
},
label: {
show: true,
position: 'inside',
formatter: '{b}n{c} ({d}%)',
color: '#fff',
fontSize: 12
},
data: [
{ value: 5000, name: 'アプリ訪問' },
{ value: 3400, name: '登録' },
{ value: 2100, name: 'プロフィール設定' },
{ value: 1200, name: '初回アクション' },
{ value: 800, name: '購読済み' }
]
}
]
};
戦略的なベストプラクティス
- ステージを順次に保つ：ファンネルチャートは順次的なフローロジックに依存しています。データ項目が実際のステップバイステップのプロセスを表していることを確認してください。関連のないカテゴリではなく。
- 使用する
ギャップ明確な視覚的なステージ境界を確保するため：小さなギャップ台形間に小さな（例：4px～6px）ギャップを設定することで、隣接する色が一つのブロックに混ざり合うのを防ぎます。 - ステージのパーセンテージを表示する： 原始的な数値とステップごとのパーセンテージ（例：ラベルフォーマッターで
{d}%を使用）を組み合わせることで、ユーザーは各マイルストーンでの脱落率を即座に評価できます。