活動密度、連続的なトレンド、または2つの離散的な次元間の相関を分析する際、ヒートマップチャートは強力な視覚的ソリューションを提供します。データ値を2次元グリッド上で動的な色スケールにマッピングすることで、ヒートマップはユーザーがピーク利用時間、季節的なボトルネック、または行列関係すばやく把握できるようになります—たとえば、1時間ごとのサーバ負荷と曜日、ユーザー活動ログ、またはカテゴリ間の相関行列などです。
ヒートマップの仕組み
Apache EChartsでは、ヒートマップはtype: 'heatmap'2次元のデカルトグリッド上で動作します。各データポイントは、[xAxisIndex, yAxisIndex, value]という3要素の配列を想定しています。必須のvisualMapコンポーネントは数値を連続的または区分的な色のグラデーションにマッピングします。
1. 必須の設定
基本的なヒートマップチャートを構築するには、水平方向（xAxis）および垂直方向（yAxis）のスケールにカテゴリ軸を宣言し、[xIndex, yIndex, value]という配列をシリーズデータに渡し、visualMapコンポーネントを設定します：
ECharts
Edit ECharts in VPasCode
const hours = ['12am', '2am', '4am', '6am', '8am', '10am', '12pm', '2pm', '4pm', '6pm', '8pm', '10pm'];
const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
// データ形式: [xIndex, yIndex, value]
const data = [
[0, 0, 5], [1, 0, 1], [2, 0, 0], [3, 0, 0], [4, 0, 12], [5, 0, 24], [6, 0, 38], [7, 0, 42], [8, 0, 35], [9, 0, 20], [10, 0, 10], [11, 0, 6],
[0, 1, 3], [1, 1, 0], [2, 1, 0], [3, 1, 1], [4, 1, 15], [5, 1, 28], [6, 1, 45], [7, 1, 50], [8, 1, 40], [9, 1, 22], [10, 1, 12], [11, 1, 4],
[0, 2, 2], [1, 2, 1], [2, 2, 0], [3, 2, 0], [4, 2, 11], [5, 2, 26], [6, 2, 41], [7, 2, 48], [8, 2, 38], [9, 2, 19], [10, 2, 8], [11, 2, 3],
[0, 3, 4], [1, 3, 2], [2, 3, 0], [3, 3, 1], [4, 3, 14], [5, 3, 30], [6, 3, 49], [7, 3, 55], [8, 3, 42], [9, 3, 25], [10, 3, 15], [11, 3, 5],
[0, 4, 6], [1, 4, 3], [2, 4, 1], [3, 4, 2], [4, 4, 10], [5, 4, 20], [6, 4, 32], [7, 4, 36], [8, 4, 28], [9, 4, 18], [10, 4, 9], [11, 4, 2]
];
option = {
tooltip: {
position: 'top'
},
grid: {
height: '50%',
top: '10%'
},
xAxis: {
type: 'category',
data: hours,
splitArea: { show: true }
},
yAxis: {
type: 'category',
data: days,
splitArea: { show: true }
},
visualMap: {
min: 0,
max: 60,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%'
},
series: [
{
name: 'システム負荷',
type: 'heatmap',
data: data,
label: {
show: true
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
高度な構造技術
ヒートマップは、離散的な色の段階、明確なセル間隔、またはカレンダー座標と組み合わせることで、1年間の活動を追跡できるようにカスタマイズできます。
1. ピースワイズな色のマッピングとカスタムセル間隔
連続的な色のグラデーションではなく、ピースワイズなものを使用するvisualMap値を明確な運用バンド（例：低、中、高）にグループ化する：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: { position: 'top' },
xAxis: {
type: 'category',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'category',
data: ['製品A', '製品B', '製品C']
},
visualMap: {
type: 'piecewise',
min: 0,
max: 100,
left: 'center',
bottom: '5%',
orient: 'horizontal',
pieces: [
{ min: 80, label: '高パフォーマンス', color: '#16a34a' },
{ min: 40, max: 79, label: '中程度', color: '#f59e0b' },
{ max: 39, label: '注意が必要', color: '#dc2626' }
]
},
series: [
{
type: 'heatmap',
data: [
[0, 0, 85], [1, 0, 92], [2, 0, 78], [3, 0, 88],
[0, 1, 45], [1, 1, 55], [2, 1, 62], [3, 1, 35],
[0, 2, 25], [1, 2, 30], [2, 2, 18], [3, 2, 42]
],
label: { show: true },
itemStyle: {
borderColor: '#ffffff',
borderWidth: 2
}
}
]
};
レイアウトと色のグラデーションの微調整
読みやすい色のストップポイントを選択し、分割領域を有効にすることで、大きなマトリクスグリッドをスキャンするのが容易になります。
1. グラデーションのカスタマイズとラベルの整列
カスタムのマルチストップ色ラムプを visualMap.inRangeでプラットフォームのテーマに合わせる：
ECharts
Edit ECharts in VPasCode
option = {
grid: { containLabel: true },
xAxis: {
type: 'category',
data: ['ノード1', 'ノード2', 'ノード3', 'ノード4']
},
yAxis: {
type: 'category',
data: ['サービスX', 'サービスY', 'サービスZ']
},
visualMap: {
min: 0,
max: 100,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '0%',
inRange: {
color: ['#f0f9ff', '#0284c7', '#0f172a'] // ソフトブルーからダークスレートのグラデーション
}
},
series: [
{
type: 'heatmap',
data: [
[0, 0, 12], [1, 0, 45], [2, 0, 78], [3, 0, 95],
[0, 1, 34], [1, 1, 67], [2, 1, 89], [3, 1, 23],
[0, 2, 56], [1, 2, 78], [2, 2, 12], [3, 2, 88]
]
}
]
};
戦略的なベストプラクティス
- 常に
visualMap:視覚的凡例がないヒートマップは、ユーザーが色の意味を推測せざるを得ない状況を生み出します。常に連続的またはピースワイズなvisualMapをキャンバスの端に明確に配置する。 - グリッドの境界線を分離に使用する：以下の設定を使って薄い白い境界線を適用する：
itemStyle.borderColor: '#fff'およびborderWidth: 1または2密な行列において個々のセルが視覚的に明確に区別されるようにする。 - 高コントラストテキストを確保する： セルの数値ラベルが有効な場合（
label.show: true）、色のグラデーションの最も明るい段階と最も暗い段階の両方に対して、テキストの色が読み取り可能であることを確認する。