當探索兩個連續變量之間的關係或相關性時，散點圖（或稱散點圖）是主要的分析工具。透過根據數值 X 和 Y 坐標在二維網格上繪製資料點，散點圖有助於揭示群集、異常值、趨勢與相關性在複雜資料集中的表現，例如行銷支出與潛在客戶產生之間的關係，或員工經驗與薪資之間的關係。
散點圖的運作原理
與以類別為導向的柱狀圖或折線圖不同，散點圖在兩個維度上都使用數值軸。在 Apache ECharts 中，設定type: 'scatter'會預期資料以兩個元素的數值座標陣列格式輸入[x, y]或資料物件對應至數值xAxis與yAxis設定。
1. 基本設定
要建立基本的散點圖，請在兩個軸上定義type: 'value'並在您的系列資料陣列中提供數值座標對：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
formatter: 'X: {c0}rnY: {c1}'
},
xAxis: {
type: 'value',
name: '廣告支出（千美元）'
},
yAxis: {
type: 'value',
name: '轉換次數'
},
series: [
{
type: 'scatter',
symbolSize: 12,
data: [
[10.0, 8.04],
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.03, 7.24],
[12.0, 4.26],
[7.08, 4.82],
[5.02, 5.68]
]
}
]
};
進階結構技術
散點圖可以結合動態大小以表示第三個變數（氣泡圖），或顯示多類別群集覆疊。
1. 變動點大小（氣泡效果）
將自訂函數或資料值對應傳遞給symbolSize以將第三個定量指標編碼為點的大小：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
formatter: function (param) {
return '支出：$' + param.data[0] + 'k
' +
'收入：$' + param.data[1] + 'k
' +
'ROAS：' + param.data[2] + '倍';
}
},
xAxis: {
type: 'value',
name: '支出'
},
yAxis: {
type: 'value',
name: '收入'
},
series: [
{
name: '活動',
type: 'scatter',
symbolSize: function (data) {
return data[2] * 5; // 根據第三個變數調整氣泡大小
},
data: [
[15, 120, 8.0],
[25, 180, 7.2],
[10, 50, 5.0],
[40, 380, 9.5],
[30, 210, 7.0]
],
itemStyle: {
color: '#5470c6',
opacity: 0.7
}
}
]
};
微調佈局與樣式
控制標記的不透明度並加入目標趨勢線，可防止密集群集轉變為實心的視覺塊。
1. 半透明標記與群集樣式
應用邊框線條與半透明的項目填充，可讓高密度群集中的重疊資料點保持可見：
ECharts
Edit ECharts in VPasCode
option = {
grid: {
left: '10%',
right: '10%',
containLabel: true
},
xAxis: {
type: 'value',
scale: true // 自動縮放軸的最小/最大值以緊密適配資料
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
type: 'scatter',
symbolSize: 16,
itemStyle: {
color: 'rgba(84, 112, 198, 0.6)',
borderColor: '#5470c6',
borderWidth: 2
},
data: [
[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0],
[155.8, 53.6], [170.0, 59.0], [159.1, 47.6], [166.0, 69.8],
[176.2, 66.8], [160.2, 75.2], [172.5, 55.2], [170.9, 54.2]
]
}
]
};
戰略性最佳實務
- 啟用
scale: true於數值軸上： 設定scale: true在兩個數值軸上都設定為 true，使圖表自動縮放至相關資料範圍，而非強制將原點設在(0,0). - 使用填充透明度來處理重疊： 當繪製數百個點時，將填充不透明度降低至約 0.4–0.6，使密集重疊區域自然呈現較暗的視覺效果。
- 提供具上下文的軸標籤： 始終以測量單位（例如「千美元」或「毫秒延遲」）明確標示 X 軸和 Y 軸，使數值一目了然，無需查看工具提示。