ECharts 散点图：绘制基础散点图及其配置
散点图是一种用于展示数据分布情况的图表，适合于揭示变量之间的关系。在 ECharts 中，绘制散点图非常简单且灵活，本文将带您深入了解如何绘制基本散点图，并学习如何配置散点图的尺寸、颜色和数据点形状。
一、散点图的基础知识
散点图通过在二维坐标系中绘制数据点来显示变量之间的关系。每个数据点的坐标对应于两个变量的值，通常用于探究数据的分布特征及其潜在的关联。
二、安装 ECharts
在开始之前，请确保在项目中引入 ECharts。可以通过 CDN 进行引入：
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
三、绘制基本散点图
1. 定义 HTML 结构
首先，定义一个用于展示散点图的 <div> 容器：
<div id="scatterChart" style="width: 600px; height: 400px;"></div>
2. 配置散点图的 option
以下是一个基础散点图的配置示例：
var scatterChart = echarts.init(document.getElementById('scatterChart'));
var scatterOption = {
title: {
text: '散点图示例',
left: 'center',
textStyle: {
color: '#333',
fontSize: 20
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: ({c[0]}, {c[1]})'
},
xAxis: {
type: 'value',
name: 'X轴',
nameLocation: 'middle',
nameGap: 30
},
yAxis: {
type: 'value',
name: 'Y轴',
nameLocation: 'middle',
nameGap: 30
},
series: [
{
name: '散点数据',
type: 'scatter',
data: [
[10, 20], [20, 35], [30, 15], [40, 40],
[50, 20], [60, 25], [70, 30], [80, 45]
],
itemStyle: {
color: '#FF5733', // 设置数据点颜色
opacity: 0.8 // 设置透明度
},
symbolSize: function (data) {
return data[1] / 2; // 根据Y值动态设置点的大小
}
}
]
};
scatterChart.setOption(scatterOption);
3. 完整的 HTML 代码示例
以下是完整的 HTML 文件代码，包含基本散点图的创建和渲染：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts 散点图示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<h1>使用 ECharts 绘制散点图</h1>
<div id="scatterChart" style="width: 600px; height: 400px;"></div>
<script>
var scatterChart = echarts.init(document.getElementById('scatterChart'));
var scatterOption = {
title: {
text: '散点图示例',
left: 'center',
textStyle: {
color: '#333',
fontSize: 20
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: ({c[0]}, {c[1]})'
},
xAxis: {
type: 'value',
name: 'X轴',
nameLocation: 'middle',
nameGap: 30
},
yAxis: {
type: 'value',
name: 'Y轴',
nameLocation: 'middle',
nameGap: 30
},
series: [
{
name: '散点数据',
type: 'scatter',
data: [
[10, 20], [20, 35], [30, 15], [40, 40],
[50, 20], [60, 25], [70, 30], [80, 45]
],
itemStyle: {
color: '#FF5733', // 设置数据点颜色
opacity: 0.8 // 设置透明度
},
symbolSize: function (data) {
return data[1] / 2; // 根据Y值动态设置点的大小
}
}
]
};
scatterChart.setOption(scatterOption);
</script>
</body>
</html>
四、配置散点图的尺寸、颜色和形状
1. 配置数据点的大小
您可以通过 symbolSize 属性来自定义数据点的大小。可以根据数据值动态设置点的大小：
symbolSize: function (data) {
return data[1] / 2; // 根据Y值动态设置点的大小
}
2. 配置数据点的颜色
您可以使用 itemStyle 属性中的 color 来设置数据点的颜色。也可以使用回调函数根据数据动态设置颜色：
itemStyle: {
color: function (data) {
return data[1] > 30 ? '#FF5733' : '#3398DB'; // 根据Y值动态设置颜色
}
}
3. 配置数据点的形状
ECharts 支持多种数据点形状，可以通过 symbol 属性来定义。常用的形状包括 'circle'、'rect'、'triangle' 等。例如：
series: [
{
name: '散点数据',
type: 'scatter',
symbol: 'rect', // 设置点的形状为矩形
// 其他配置...
}
]
五、完整示例
以下是一个包含尺寸、颜色和形状配置的散点图完整示例：
<div id="scatterChart" style="width: 600px; height: 400px;"></div>
<script>
var scatterChart = echarts.init(document.getElementById('scatterChart'));
var scatterOption = {
title: {
text: '散点图示例',
left: 'center',
textStyle: {
color: '#333',
fontSize: 20
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: ({c[0]}, {c[1]})'
},
xAxis: {
type: 'value',
name: 'X轴',
nameLocation: 'middle',
nameGap: 30
},
yAxis: {
type: 'value',
name: 'Y轴',
nameLocation: 'middle',
nameGap: 30
},
series: [
{
name: '散点数据',
type: 'scatter',
data: [
[10, 20], [20, 35], [30, 15], [40, 40],
[50, 20], [60, 25], [70, 30], [80, 45]
],
symbol: 'circle', // 设置点的形状为圆形
itemStyle: {
color: function (data) {
return data[1] > 30 ? '#FF5733' : '#3398DB'; // 根据Y值动态设置颜色
},
opacity: 0.8
},
symbolSize: function (data) {
return data[1] / 2; // 根据Y值动态设置点的大小
}
}
]
};
scatterChart.setOption(scatterOption);
</script>
六、总结
本文详细介绍了如何使用 ECharts 绘制散点图，包括基本散点图的创建以及如何配置数据点的尺寸、颜色和形状。散点图可以有效地展示数据分布和变量之间的关系，ECharts 提供了丰富的配置选项，使得您能够灵活地进行数据可视化。希望这篇博客对您学习 ECharts 有所帮助！