在探索两个连续变量之间的关系或相关性时，散点图（或散点图）是主要的分析工具。通过基于数值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] + '千
' +
'收入: $' + param.data[1] + '千
' +
'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 轴，使数值无需查看提示框即可立即清晰理解。