単一の静的合計値の相対的な割合やパーセンテージシェアを提示する際、円グラフは馴染みやすく直感的な選択です。円を比例したスライスに分割することで、円グラフは視聴者が迅速に個々の構成要素が統一された全体にどのように貢献しているかを把握できる市場シェアの分布、デバイスの好みの分割、または費用カテゴリの配分など、
円グラフのメカニズム
水平軸と垂直軸を使用するカルテシアンチャートとは異なり、円グラフはカテゴリカルデータを極座標系上の径方向の角度に直接マッピングします。Apache EChartsでは、シリーズのtypeを'pie'に設定し、各エントリに数値型のvalueと説明的なname.
1. 必須のセットアップ
基本的な円グラフを構築するには、type: 'pie'を定義し、構造化されたデータセットをdata配列内に渡します：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'アクセス元',
type: 'pie',
radius: '60%',
data: [
{ value: 1048, name: '検索エンジン' },
{ value: 735, name: '直接' },
{ value: 580, name: 'メール' },
{ value: 484, name: '連合広告' },
{ value: 300, name: '動画広告' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
高度な構造技術
円グラフは、ドーナツ型のリングレイアウトに調整したり、カスタム半径でスタイルを設定することで、主要なデータセグメントを強調できます。
1. ドーナツグラフバリアント
設定することで半径プロパティを2値の配列として指定（例：['40%', '70%']）は中心部を空洞化して、すっきりとしたドーナツチャートを作成します。これにより、カスタムの要約ラベルを表示するためのスペースが中央に確保されます：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'デバイスタイプ',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: true,
itemStyle: {
borderRadius: 8,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 20,
fontWeight: 'bold'
}
},
data: [
{ value: 1048, name: 'デスクトップ' },
{ value: 735, name: 'モバイル' },
{ value: 580, name: 'タブレット' },
{ value: 484, name: 'その他' }
]
}
]
};
レイアウトとスタイルの微調整
ラベルの呼び出し線とスライスの境界線を制御することで、小さなデータ値を扱う場合でも、円グラフの可読性を保つことができます。
1. カスタムスライスの分離とラベルの呼び出し
アイテムの境界線の幅を設定し、外部ガイド線を構成することで、隣接するスライス間でのテキストの重なりを防ぎます：
ECharts
Edit ECharts in VPasCode
option = {
series: [
{
name: '市場シェア',
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
selectedMode: 'single',
data: [
{ value: 40, name: 'ブランドA' },
{ value: 30, name: 'ブランドB' },
{ value: 15, name: 'ブランドC' },
{ value: 10, name: 'ブランドD' },
{ value: 5, name: 'その他' }
],
label: {
formatter: '{b}: {d}%'
},
labelLine: {
smooth: 0.2,
length: 10,
length2: 20
},
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2
}
}
]
};
戦略的なベストプラクティス
- スライス数を5～6個に制限する：あまりにも多くの小さなスライスは、円グラフの読みにくさを招きます。小さな値はすべて「その他」カテゴリにまとめることで、視点を明確に保ちます。
- スライスをサイズ順に並べる：最大のセグメントを12時方向から配置し、残りのスライスを時計回りに順に並べることで、視認性を高めます。
- ツールチップまたはラベルにパーセンテージを直接表示する： 常に
{d}%ラベルやツールチップのフォーマッタに含めることで、視聴者が頭の中で計算しなくても、割合の比率を即座に把握できます。