范文杰_fe · 更新于 2020-10-30

ECharts 饼图

ECharts K 线图

ECharts 散点图

当我们的数据变得越来越复杂，需要展示和比较的内容变得越来越多，这个时候再使用简单的图形可能不能够表现出我们想展现的内容，这一节我们就来看一下在比较多数据维度的情况下比较合适的图形——散点图。散点图是用坐标系上的点表示多个事物的数值分布情况的图。

1. 简介

官方解释

散点（气泡）图。直角坐标系上的散点图可以用来展现数据的 x，y 之间的关系，如果数据项有多个维度，其它维度的值可以通过不同大小的 symbol 展现成气泡图，也可以用颜色来表现。

可以应用在直角坐标系、极坐标系、地图坐标系上。

慕课解释

散点图，又称点图，是一种将离散数据以点的形式散布在坐标系上的图表，每个数据节点通过坐标位置或散点本身的大小、颜色等视觉属性表达节点数值情况。相比于折线图，散点图更偏重于表达数据的离散分布，比如一个班的考试成绩的分布就非常适合用散点图。

2. 实例解说

2.1 直角坐标系散点图

勾画直角坐标系下的散点图，最简情况下需要配置：yAxis、xAxis、series，示例：

实例演示

预览复制

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>Echarts Example</title>
	</head>
	<body>
		<div id="main" style="width: 600px;height: 400px"></div>

		<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.common.js"></script>
		<script type="text/javascript">
			var myChart = echarts.init(document.getElementById('main'));

			var option = {
				toolbox: {
					feature: {
						saveAsImage: {},
					},
				},
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				},
				yAxis: {
					type: 'value',
				},
				series: [
					{
						data: [
							['Mon', 120],
							['Tue', 80],
							['Wed', 140],
							['Thu', 192],
							['Fri', 140],
							['Sat', 180],
							['Sun', 178],
						],
						type: 'scatter',
					},
				],
			};
			myChart.setOption(option);
		</script>
	</body>
</html>

运行案例点击 "运行案例" 可查看在线运行效果

示例效果：

图片描述

效果与折线图相似，但散点图比折线图强大的地方在于，它可以通过颜色、大小表达出更多维度的信息。简单方法，可以通过 symbolSize 属性修改点的大小，该属性接受如下值：

number: 点的像素大小值；
array: 二维数组如 [10, 30]，第一个值指定 symbol 宽度；第二个值指定 symbol 高度；
function: (value: Array|number, params: Object) => number|Array: 回调函数。

在上例基础上，修改 series 配置如下：

{
	series: [
		{
			data: [
				['Mon', 120, 224],
				['Tue', 80, 320],
				['Wed', 140, 1288],
				['Thu', 192, 64],
				['Fri', 140, 228],
				['Sat', 180, 248],
				['Sun', 178, 240],
			],
			type: 'scatter',
			symbolSize: function (data) {
				return Math.sqrt(data[2]);
			},
		},
	],
}

一是在 data 序列上增加第三个维度；二是增加 symbolSize 配置项，通过函数计算出各节点大小。示例效果：

图片描述

还可以通过散点上不同的颜色，表现多维数据，简单方法可通过 itemStyle.color 配置各节点颜色。在上例基础上，修改 series 配置如下：

{
	series: [
		{
			data: [
				['Mon', 120, 224],
				['Tue', 80, 320],
				['Wed', 140, 1288],
				['Thu', 192, 64],
				['Fri', 140, 228],
				['Sat', 180, 248],
				['Sun', 178, 240],
			],
			type: 'scatter',
			itemStyle: {
				color: function (node) {
					return `hsla(${node.data[2] % 360}, 100%, 50%, 0.8)`;
				},
			},
		},
	],
}

示例效果：

图片描述

注意，上述示例需要手动计算每个节点的颜色、大小属性，这部分逻辑在散点图内部会有更好的实现，只需配合使用 visualMap 即可，下面会有详细介绍。

2.2 极坐标散点图

极坐标配置与直角坐标相似，示例：

实例演示

预览复制

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>Echarts Example</title>
	</head>
	<body>
		<div id="main" style="width: 600px;height: 400px"></div>

		<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
		<script type="text/javascript">
			var myChart = echarts.init(document.getElementById('main'));

			var option = {
				toolbox: {
					feature: {
						saveAsImage: {},
					},
				},
				polar: {},
				angleAxis: {
					type: 'category',
					startAngle: 0,
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				},
				radiusAxis: { type: 'value' },
				series: [
					{
						coordinateSystem: 'polar',
						data: [
							[120, 'Mon'],
							[80, 'Tue'],
							[140, 'Wed'],
							[192, 'Thu'],
							[140, 'Fri'],
							[180, 'Sat'],
							[178, 'Sun'],
						],
						type: 'scatter',
					},
				],
			};
			myChart.setOption(option);
		</script>
	</body>
</html>

运行案例点击 "运行案例" 可查看在线运行效果

示例效果：

图片描述

类似的，可以通过 symbolSize 属性配置散点大小。在上例基础上，修改 series 配置：

{
	series: [
		{
			coordinateSystem: 'polar',
			data: [
				[120, 'Mon', 224],
				[80, 'Tue', 320],
				[140, 'Wed', 1288],
				[192, 'Thu', 64],
				[140, 'Fri', 228],
				[180, 'Sat', 248],
				[178, 'Sun', 240],
			],
			type: 'scatter',
			symbolSize: function (data) {
				return Math.sqrt(data[2]);
			},
		},
	],
}

示例效果：

图片描述

可以通过 itemStyle.color 属性修改散点颜色。在上例基础上，修改 series 配置：

{
	series: [
		{
			coordinateSystem: 'polar',
			data: [
				[120, 'Mon', 224],
				[80, 'Tue', 320],
				[140, 'Wed', 1288],
				[192, 'Thu', 64],
				[140, 'Fri', 228],
				[180, 'Sat', 248],
				[178, 'Sun', 240],
			],
			type: 'scatter',
			itemStyle: {
				color: function (node) {
					return `hsla(${node.data[2] % 360}, 100%, 50%, 0.8)`;
				},
			},
		},
	],
}

示例效果：

图片描述

2.3 日历坐标系散点图

日历坐标系是在日历图中通过颜色、图形、连线等方式表达数据变化，特别适用于与时间强相关的数据序列。github 上的 contributions 分布图就是典型的日历图示例：

图片描述

日历坐标系同样支持散点图，示例：

实例演示

预览复制

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>Echarts Example</title>
	</head>
	<body>
		<div id="main" style="width: 600px;height: 400px"></div>

		<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
		<script type="text/javascript">
			var myChart = echarts.init(document.getElementById('main'));

			var option = {
				toolbox: {
					feature: {
						saveAsImage: {},
					},
				},
				calendar: {
					top: 'middle',
					left: 'center',
					cellSize: 40,
					range: ['2019-02-01', '2019-03-31'],
				},
				series: [
					{
						type: 'scatter',
						coordinateSystem: 'calendar',
						symbolSize: 15,
						calendarIndex: 0,
						symbolSize: function (data) {
							return Math.sqrt(data[1]);
						},
						itemStyle: {
							color: function (node) {
								return `hsla(${node.data[1] % 360}, 100%, 50%, 0.8)`;
							},
						},
						data: [
							[1549036800000, 260],
							[new Date(2019, 1, 6), 200],
							[new Date(2019, 1, 14), 279],
							[new Date(2019, 2, 4), 847],
							[new Date(2019, 2, 10), 241],
							[new Date(2019, 2, 20), 411],
							[new Date(2019, 1, 28), 985],
						],
					},
				],
			};
			myChart.setOption(option);
		</script>
	</body>
</html>

运行案例点击 "运行案例" 可查看在线运行效果

需要注意，日历坐标系下的散点图数据 data 需要使用二维数组指定每个项的值，数组第一项指明数据所在的时间，通常使用 Date 对象或时间戳；第二项指明数据值。上例效果：

图片描述

3. 涟漪效果

ECharts 中的散点图支持带涟漪特效动画效果，不过被实现为另外一种图表类型 series.type = effectScatter。涟漪特效会在数据点上周期执行动画效果，类似于：

图片描述

实际上，虽然图表类型不同，effectScatter 完全继承了 scatter 的配置项 —— 也就意味着 effectScatter 支持所有 scatter 的功能。完整配置请参考官网，其中与涟漪效果有关的配置项有：

配置名	类型	默认值	说明
effectType	string	ripple	特效类型，目前只支持涟漪特效’ripple’。
showEffectOn	string	render	配置何时显示特效，可选 `render`、`emphasis`
rippleEffect.color	string		涟漪的颜色，默认为散点的颜色。
rippleEffect.period	number		动画的周期，单位为秒
rippleEffect.scale	number		动画中波纹的最大缩放比例。
rippleEffect.brushType	string	fill	波纹的绘制方式，可选 `stroke` 和 `fill`。

如果散点图中数据量比较大，而又希望读者重点关注某系列数据时，可以配合使用基础散点图与涟漪散点图，利用涟漪图的动画效果吸引用户的注意力，例如：

实例演示

预览复制

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>Echarts Example</title>
	</head>
	<body>
		<div id="main" style="width: 600px;height: 400px"></div>
		<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
		<script type="text/javascript">
			// 随机生成数据
			function generateData(cats) {
				const random = (min, max) => Math.round(Math.random() * (max - min) + min);
				const series = [
					{ name: '我司', type: 'effectScatter' },
					{ name: '竞品1', type: 'scatter' },
					{ name: '竞品2', type: 'scatter' },
					{ name: '竞品3', type: 'scatter' },
				];
				return series.map((serie) => ({
					...serie,
					data: cats.map((cat) => [cat, random(100, 10000)]),
				}));
			}
			const myChart = echarts.init(document.getElementById('main'));
			const cats = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
			const series = generateData(cats);
			var option = {
				xAxis: { type: 'category', data: cats },
				yAxis: { type: 'value' },
				series: series,
				legend: { data: series.map((s) => s.name) },
			};
			myChart.setOption(option);
		</script>
	</body>
</html>

运行案例点击 "运行案例" 可查看在线运行效果

示例效果：

图片描述

还可以通过 rippleEffect 项定制涟漪效果，例如上例基础上修改涟漪图配置为：

{
	type: 'effectScatter',
	rippleEffect: {
		period: 2,
		scale: 5,
		brushType: 'stroke'
	}
},

示例效果：

图片描述

4. 大数据优化

ECharts 4 之后，如果需要渲染的图形数据太多而出现卡顿时，可以通过设置 large = true 开启渐进渲染功能。原理上，当数据量达到几千、几万时，如果要一次性渲染这么多图形可能会造成页面卡顿甚至假死，ECharts 通过将需要渲染的数据按特定算法分成多个批次，每次渲染一个批次的数据量，尽可能快地渲染出一部分数据，减少卡顿感。下列属性用于配置渐进渲染的功能细节：

配置名	类型	默认值	说明
large	boolean	false	是否开启大数据量优化
largeThreshold	number	2000	启动绘制优化的阈值，在 `large = true` 的情况下，若数据量超过该值则启动绘制优化
progressive	number	400	渐进式渲染时每一帧绘制图形数量
progressiveThreshold	number	3000	启用渐进式渲染的图形数量阈值，在单个系列的图形数量超过该阈值时启用渐进式渲染

启动渐进渲染的功能很简单，只需要设置 large = true，当数据量超过 largeThreshold 设定的阈值时，ECharts 就会启动渐进渲染功能，例如下例中渲染 500000 数据：

实例演示

预览复制

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>Echarts Example</title>
	</head>
	<body>
		<button id="btnStart" type="button">开始渲染</button>
		<div id="main" style="width: 800px;height: 400px"></div>
		<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
		<script type="text/javascript">
			// 生成随机数据
			function genData(len, offset) {
				const lngRange = [-10.781327, 131.48];
				const latRange = [18.252847, 52.33];

				const result = new Array(len);

				for (let i = 0; i < len; i++) {
					const x = +Math.random() * 10;
					const y = +Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random() + (offset || 0) / 10;
					result[i] = [x, y];
				}
				return result;
			}

			const data = genData(500000);

			const chart = echarts.init(document.getElementById('main'));
			const option = {
				xAxis: { type: 'value' },
				yAxis: { type: 'value' },
				series: [
					{
						data: data,
						type: 'scatter',
						large: true,
						largeThreshold: 1000,
						progressive: 100,
						symboleSize: 3,
					},
				],
			};
			document.getElementById('btnStart').addEventListener('click', function () {
				chart.setOption(option);
			});
		</script>
	</body>
</html>

运行案例点击 "运行案例" 可查看在线运行效果

示例效果：

图片描述

5. 小结

图片描述
本节结合实例讲述 Echarts 各种坐标系下的散点图，包括直角坐标系、极坐标系、日历坐标系、地图坐标系。同时结合实例解说散点图的涟漪效果、大数据优化方面的功能。

ECharts 饼图

ECharts K 线图

我要提出意见反馈

我的购物车

已加入门课程

购物车里空空如也

ECharts 入门教程

前端开发

JavaScript

JavaScript 入门教程

TypeScript 入门教程

Vue 入门教程

Ajax 入门教程

ES6-10 入门教程

Yarn 入门教程

ECharts 入门教程

HTML & CSS

CSS3 入门教程

雪碧图入门教程

移动端布局教程

Html5 入门教程

Sass 入门教程

HTML 入门教程

canvas 入门教程

uni-app 入门教程

服务端相关

服务器

Nginx 入门教程

HTTP 入门教程

Docker 入门教程

Shell 入门教程

Linux 入门教程

开发工具

Gradle 入门教程

Vim 编辑器教程

RESTful 规范教程

Dreamweaver 教程

Markdown 入门教程

Maven 入门教程

Eclipse 编辑器教程

GitHub 入门教程

Android Studio 编辑器教程

PyCharm 编辑器教程

Sublime Text 使用教程

Postman 教程

Git入门教程

热门服务端语言

C 语言入门教程

Go 入门教程

Kotlin 教程

Ruby 入门教程

ThinkPHP 入门教程

Java

基础应用

Java 入门教程

Android 入门教程

算法入门教程

数据结构入门教程

Lambda 表达式教程

Java 并发原理入门教程

设计模式入门教程

Java并发工具

JVM 入门教程

RabbitMQ 入门教程

网络编程入门教程

后端通用面试教程

框架应用

Spring Boot 入门教程

Spring 入门教程

Hibernate 入门教程

MyBatis 入门教程

Spring MVC 入门教程

Swagger 入门教程

Zookeeper 入门教程

Netty 教程

Spring Security

微服务

Spring Cloud Hystrix

Python

基础应用

Python 入门语法教程

Python 原生爬虫教程

Python 进阶应用教程