文章目录

引言
1. ECharts的基本使用
- 1.1 ECharts的快速上手
- 1.2 相关配置讲解
2. ECharts常用图表
- 2.1 图表1 柱状图
- - 2.1.1 柱状图的实现步骤
  - 2.1.2 柱状图的常见效果
  - 2.1.3 柱状图特点
  - 2.1.4 通用配置
- 2.2 图表2 折线图
- - 2.2.1 折线图的实现步骤
  - 2.2.2 折线图的常见效果
  - 2.2.3 折线图的特点
- 2.3 图表3 散点图
- - 2.3.1 散点图的实现步骤
  - 2.3.2 散点图的常见效果
  - 2.3.3 散点图的特点
  - 2.3.4 直角坐标系的常见配置
- 2.4 .图表4 饼图
- - 2.4.1 饼图的实现步骤
  - 2.4.2 饼图的常见效果
  - 2.4.3 饼图的特点
- 2.5 图表5 地图
- - 2.5.1 地图图表的使用方式
  - 2.5.2 矢量地图的实现步骤
  - 2.5.3 地图的常见配置
  - 2.5.4 地图的常见效果
- 2.6 图表6 雷达图
- - 2.6.1 雷达图的常见效果
3. 配置项小结
- 3.1 柱状图 bar
- 3.2 折线图 line
- 3.3 散点图 scatter
- 3.4 饼图 pie
- 3.5 地图 map
- 3.6 雷达图 radar
- 3.7 直角坐标系配置
- 3.8 通用配置

引言

数据可视化, 说白了, 就是把数据以更加直观的方式进行呈现. 那什么方式是更加直观的方式呢? 就是图表。

什么是ECharts？
ECharts（全称“EchoCharts”）是一个开源的、纯JavaScript实现的图表库，由百度前端团队（EFE）以及社区贡献者共同维护和开发。它提供了一整套丰富的图表类型，包括折线图、柱状图、饼图、雷达图、散点图、地图、热力图、箱线图等，用于各种数据可视化需求。

1. ECharts的基本使用

1.1 ECharts的快速上手

步骤1：引入 echarts.js 文件
echarts是一个 js 的库，所以得先引入这个库文件

<script src="js/echarts.min.js"></script>

步骤2：准备一个呈现图表的盒子
这个盒子通常来说就是我们熟悉的 div ，这个 div 决定了图表显示在哪里

<div id="main" style="width: 600px;height:400px;"></div>

步骤3：初始化 echarts 实例对象
在这个步骤中, 需要指明图表最终显示在哪里的DOM元素

var myChart = echarts.init(document.getElementById('main'))

步骤4：准备配置项
这步很关键，我们最终的效果，到底是显示饼图还是折线图，基本上都是由配置项决定的

var option = { 
	xAxis: { 
		type: 'category', 
		data: ['小明', '小红', '小王'] },
	yAxis: { 
		type: 'value' 
	},
	series: [ 
		{ 
			name: '语文', 
			type: 'bar', 
			data: [70, 92, 87], 
		} 
	] 
}

步骤5：将配置项设置给 echarts 实例对象

myChart.setOption(option)

一个图表最终呈现什么样子,完全取决于这个配置项.所以对于不同的图表, 除了配置项会发生改变之外,其他的代码都是固定不变的

1.2 相关配置讲解

xAxis
直角坐标系中的 x 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的呈现

yAxis
直角坐标系中的 y 轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去series 下找数据进行图表的绘制

series
系列列表。每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据

配置项都是以键值对的形式存在, 并且配置项有很多, ECharts 的学习大多是针对于这些配置项的, 对于配置项的学习, 大家可以不用死记硬背, 需要的时候查一查官方文档即可. 网址:https://echarts.apache.org/zh/option.html

2. ECharts常用图表

2.1 图表1 柱状图

2.1.1 柱状图的实现步骤

步骤1 ECharts 最基本的代码结构

<!DOCTYPE html>
<html lang="en">
	<head>
		<script src="js/echarts.min.js"></script>
	</head>
	<body>
		<div style="width: 600px;height:400px"></div>
		<script>
			var mCharts = echarts.init(document.querySelector("div")) var option = {}
			mCharts.setOption(option)
		</script>
	</body>
</html>

此时 option 是一个空空如也的对象

步骤2 准备x轴的数据

var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']

步骤3 准备 y 轴的数据

var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]

步骤4 准备 option , 将 series 中的 type 的值设置为: bar

var option = { 
	xAxis: { 
		type: 'category', 
		data: xDataArr 
		},
	yAxis: { 
		type: 'value' 
		},
	series: [ 
		{ 
			type: 'bar', 
			data:yDataArr 
		} 
	] 
}

注意: 坐标轴 xAxis 或者 yAxis 中的配置, type 的值主要有两种: category 和 value , 如果 type属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的呈现. 如果 type 属性配置为 value ,那么无需配置 data , 此时 y 轴会自动去 series 下找数据进行图表的绘制

最终的效果如下图:
在这里插入图片描述

2.1.2 柱状图的常见效果

标记:
- 最大值\最小值 markPoint

series: [ 
	{ 
		...... 
		markPoint: { 
			data: [ 
				{ 
					type: 'max', name: '最大值' 
				},
				{ 
					type: 'min', name: '最小值' 
				} 
			] 
		} 
	} 
]

在这里插入图片描述

- 平均值 markLine

series: [ 
	{ 
		...... 
		markLine: { 
			data: [ 
				{ 
					type: 'average', name: '平均值' 
				} 
			] 
		} 
	} 
]

在这里插入图片描述

显示
- 数值显示 label

series: [ 
	{ 
		...... 
		label: { 
			show: true, // 是否可见 
			rotate: 60 // 旋转角度 
		} 
	} 
]

在这里插入图片描述

- 柱宽度 barWidth

series: [ 
	{ 
		...... 
		barWidth: '30%' // 柱的宽度 
	} 
]

在这里插入图片描述

- 横向柱状图
  所谓的横向柱状图, 只需要让x轴的角色和y轴的角色互换一下即可. 既 xAxis 的 type 设置为value , yAxis 的 type 设置为 category , 并且设置 data 即可

var option = { 
	xAxis: { 
		type: 'value' 
	},
	yAxis: { 
		type: 'category', 
		data: xDataArr 
	},
	series: [ 
		{ 
			type: 'bar', 
			data: yDataArr 
		} 
	] 
}

在这里插入图片描述

2.1.3 柱状图特点

柱状图描述的是分类数据，呈现的是每一个分类中『有多少？』, 图表所表达出来的含义在于不同类别数据的排名\对比情况

2.1.4 通用配置

使用 ECharts 绘制出来的图表, 都天生就自带一些功能, 这些功能是每一个图表都具备的, 我们可以通过配置, 对这些功能进行设置.

标题: title

var option = { 
	title: { 
		text: "成绩", // 标题文字 
		textStyle: { 
			color: 'red' // 文字颜色 
		},
		borderWidth: 5, // 标题边框 b
		orderColor: 'green', // 标题边框颜色 
		borderRadius: 5, // 标题边框圆角 
		left: 20, // 标题的位置 
		top: 20 // 标题的位置 
	} 
}

在这里插入图片描述

提示框: tooltip
tooltip 指的是当鼠标移入到图表或者点击图表时, 展示出的提示框
- 触发类型: trigger

可选值有item\axis

- 触发时机: triggerOn

可选值有 mouseOver\click

- 格式化显示: formatter
- - 字符串模板

var option = { 
	tooltip: { 
		trigger: 'item', 
		triggerOn: 'click', 
		formatter: '{b}:{c}' 
	} 
}
//这个{b} 和 {c} 所代表的含义不需要去记, 在官方文档中有详细的描述

- - 回调函数

var option = { 
	tooltip: { 
		trigger: 'item', 
		triggerOn: 'click', 
		formatter: function (arg) { 
			return arg.name + ':' + arg.data 
		} 
	} 
}

在这里插入图片描述

工具按钮: toolbox
toolbox 是 ECharts 提供的工具栏, 内置有导出图片，数据视图, 重置, 数据区域缩放, 动态类型切换五个工具

工具栏的按钮是配置在 feature 的节点之下

var option = { 
	toolbox: { 
		feature: { 
			saveAsImage: {}, // 将图表保存为图片 
			dataView: {}, // 是否显示出原始数据 
			restore: {}, // 还原图表 
			dataZoom: {}, // 数据缩放 
			magicType: { // 将图表在不同类型之间切换,图表的转换需要数据的支持 
				type: ['bar', 'line'] 
			} 
		} 
	} 
}

在这里插入图片描述

图例: legend
legend 是图例,用于筛选类别,需要和 series 配合使用
- legend 中的 data 是一个数组
- legend 中的 data 的值需要和 series 数组中某组数据的 name 值一致

var option = { 
	legend: { 
		data: ['语文', '数学'] 
	},
	xAxis: { 
		type: 'category', 
		data: ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强'] 
	},
	yAxis: { 
		type: 'value' 
	},
	series: [ 
		{ 
			name: '语文', 
			type: 'bar', 
			data: [88, 92, 63, 77, 94, 80, 72, 86] 
		}, {
			name: '数学', 
			type: 'bar', 
			data: [93, 60, 61, 82, 95, 70, 71, 86] 
		} 
	] 
}

在这里插入图片描述

2.2 图表2 折线图

2.2.1 折线图的实现步骤

步骤1 ECharts 最基本的代码结构

<!DOCTYPE html>
<html lang="en">
	<head>
		<script src="js/echarts.min.js"></script>
	</head>
	<body>
		<div style="width: 600px;height:400px"></div>
		<script>
			var mCharts = echarts.init(document.querySelector("div")) var option = {}
			mCharts.setOption(option)
		</script>
	</body>
</html>

此时 option 是一个空空如也的对象

步骤2 准备 x 轴的数据

var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

步骤3 准备 y 轴的数据

var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]

步骤4 准备 option , 将 series 中的 type 的值设置为: line

var option = { 
	xAxis: { 
		type: 'category', 
		data: xDataArr 
	},
	yAxis: { 
		type: 'value' 
	},
	series: [ 
		{ 
			type: 'line', 
			data:yDataArr 
		} 
	] 
}

最终的效果如下:
在这里插入图片描述

2.2.2 折线图的常见效果

标记
- 最大值\最小值 markPoint

var option = { 
	series: [ 
		{ 
			...... 
			markPoint: {
				data: [ 
					{ 
						type: 'max', 
						name: '最大值' 
					}, {
						type: 'min', 
						name: '最小值' 
					} 
				] 
			} 
		} 
	] 
}

在这里插入图片描述

- 平均值 markLine

var option = { 
	series: [ 
		{ 
			...... 
			markLine: { 
				data: [ 
					{ 
						type: 'average', 
						name: '平均值' 
					} 
				] 
			} 
		} 
	] 
}

在这里插入图片描述

- 标注区间 markArea

var option = { 
	series: [ 
		{ 
			...... 
			markArea: { 
				data: [ 
					[ 
						{ 
							xAxis: '1月' 
						}, {
							xAxis: '2月' 
						}
					],
					[ 
						{ 
							xAxis: '7月' 
						}, {
							xAxis: '8月' 
						} 
					] 
				] 
			} 
		} 
	] 
}

在这里插入图片描述

线条控制
- 平滑线条 smooth

var option = { 
	series: [ 
		{ 
			...... 
			smooth: true 
		} 
	] 
}

在这里插入图片描述

- 线条样式 lineStyle

var option = { 
	series: [ 
		{ 
			...... 
			smooth: true, 
			lineStyle: { 
				color: 'green', 
				type: 'dashed' // 可选值还有 dotted solid 
			} 
		} 
	] 
}

在这里插入图片描述

填充风格 areaStyle

var option = { 
	series: [ 
		{ 
			type: 'line', 
			data: yDataArr, 
			areaStyle: { 
				color: 'pink' 
			} 
		} 
	] 
}

在这里插入图片描述

紧挨边缘 boundaryGap
boundaryGap 是设置给 x 轴的, 让起点从 x 轴的0坐标开始

var option = { 
	xAxis: { 
		type: 'category', 
		data: xDataArr, 
		boundaryGap: false 
	} 
}

在这里插入图片描述

放, 脱离0值比例
- 如果每一组数据之间相差较少, 且都比0大很多, 那么有可能会出现这种情况

var yDataArr = [3005, 3003, 3001, 3002, 3009, 3007, 3003, 3001, 3005, 3004, 3001, 3009] // 此时y轴的数据都在3000附近, 每个数之间相差不多 
var option = { 
	xAxis: {
		type: 'category', 
		data: xDataArr 
	},
	yAxis: { 
		type: 'value' 
	},
	series: [ 
		{ 
			type: 'line', 
			data: yDataArr 
		} 
	] 
}

效果如下图:
在这里插入图片描述

这显然不是我们想要的效果, 因此可以配置上 scale , 让其摆脱0值比例

- scale 配置
  scale 应该配置给 y 轴

var option = { 
	yAxis: { 
		type: 'value', 
		scale: true 
	} 
}

在这里插入图片描述

堆叠图
堆叠图指的是, 同个类目轴上系列配置相同的 stack 值后，后一个系列的值会在前一个系列的值上相加
如果在一个图表中有两个或者多个折线图, 在没有使用堆叠配置的时候, 效果如下:

<script>
	var mCharts = echarts.init(document.querySelector("div")) var xDataArr = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
	var yDataArr1 = [120, 132, 101, 134, 90, 230, 210]
	var yDataArr2 = [20, 82, 191, 94, 290, 330, 310]
	var option = {
		xAxis: {
			type: 'category',
			data: xDataArr
		},
		yAxis: {
			type: 'value',
			scale: true
		},
		series: [{
			type: 'line',
			data: yDataArr1
		}, {
			type: 'line',
			data: yDataArr2
		}]
	}
	mCharts.setOption(option)
</script>

在这里插入图片描述

使用了堆叠图之后:

var option = {
			series: [{
						type: 'line',
						data: yDataArr1,
						stack: 'all' ,// series中的每一个对象配置相同的stack值, 这个all可以任意写 
					},
					{ 
						type: 'line', 
						data: yDataArr2, 
						stack: 'all' ,// series中的每一个对象配置相同的stack值, 这个all可以任意 写 
					} ,
				] ,
			}

在这里插入图片描述

蓝色这条线的y轴起点, 不再是y轴, 而是红色这条线对应的点. 所以相当于蓝色是在红色这条线的基础之上进行绘制. 基于前一个图表进行堆叠

2.2.3 折线图的特点

折线图更多的使用来呈现数据随时间的『变化趋势』

2.3 图表3 散点图

2.3.1 散点图的实现步骤

步骤1 ECharts 最基本的代码结构

<!DOCTYPE html>
<html lang="en">
	<head>
		<script src="js/echarts.min.js"></script>
	</head>
	<body>
		<div style="width: 600px;height:400px"></div>
		<script>
			var mCharts = echarts.init(document.querySelector("div")) var option = {}
			mCharts.setOption(option)
		</script>
	</body>
</html>

此时 option 是一个空空如也的对象

步骤2 准备 x 轴和 y 轴的数据

var data = [{
	"gender": "female",
	"height": 161.2,
	"weight": 51.6
}, {
	"gender": "female",
	"height": 167.5,
	"weight": 59
}, {
	"gender": "female",
	"height": 159.5,
	"weight": 49.2
}, {
	"gender": "female",
	"height": 157,
	"weight": 63
}, {
	"gender": "female",
	"height": 155.8,
	"weight": 53.6
}, {
	"gender": "female",
	"height": 170,
	"weight": 59
}, {
	"gender": "female",
	"height": 159.1,
	"weight": 47.6
}, {
	"gender": "female",
	"height": 166,
	"weight": 69.8
}, {
	"gender": "female",
	"height": 176.2,
	"weight": 66.8
}, {
	"gender": "female",
	"height": 160.2,
	"weight": 75.2
}, {
	"gender": "female",
	"height": 172.5,
	"weight": 55.2
}, {
	"gender": "female",
	"height": 170.9,
	"weight": 54.2
}, {
	"gender": "female",
	"height": 172.9,
	"weight": 62.5
}, {
	"gender": "female",
	"height": 153.4,
	"weight": 42
}, {
	"gender": "female",
	"height": 160,
	"weight": 50
}, {
	"gender": "female",
	"height": 147.2,
	"weight": 49.8
}, ...此处省略...]

假设这个数据是从服务器获取到的, 数组中的每一个元素都包含3个维度的数据: 性别,身高,体重, 而散点图需要的数据是一个二维数组, 所以我们需要将从服务器获取到的这部分数据,通过代码生成散点图需要的数据

var axisData = []
for (var i = 0; i < data.length; i++) {
	var height = data[i].height
	var weight = data[i].weight
	var itemArr = [height, weight] axisData.push(itemArr)
}

axisData 就是一个二维数组, 数组中的每一个元素还是一个数组, 最内层数组中有两个元素, 一个代表身高, 一个代表体重

步骤3 准备配置项
- xAxis 和 yAxis 的 type 都要设置为 value
- 在 series 下设置 type:scatter

var option = {
	xAxis: {
		type: 'value'
	},
	yAxis: {
		type: 'value'
	},
	series: [{
		type: 'scatter',
		data: axisData
	}]
}

步骤4 调整配置项, 脱离0值比例
给 xAxis 和 yAxis 配置 scale 的值为 true

var option = {
	xAxis: {
		type: 'value',
		scale: true
	},
	yAxis: {
		type: 'value',
		scale: true
	},
	series: [{
		type: 'scatter',
		data: axisData,
	}]
}

在这里插入图片描述

2.3.2 散点图的常见效果

气泡图效果
要能够达到气泡图的效果, 其实就是让每一个散点的大小不同, 让每一个散点的颜色不同
- symbolSize 控制散点的大小
- itemStyle.color 控制散点的颜色

这两个配置项都支持固定值的写法, 也支持回调函数的写法
固定值的写法如下:

var option = {
	series: [{
		type: 'scatter',
		data: axisData,
		symbolSize: 25,
		itemStyle: {
			color: 'green',
		}
	}]
}

在这里插入图片描述

回调函数的写法如下:

var option = {
	series: [{
		type: 'scatter',
		data: axisData,
		symbolSize: function(arg) {
			var weight = arg[1]
			var height = arg[0] / 100 
			// BMI > 28 则代表肥胖, 肥胖的人用大的散点标识, 正常的人用小散点标识 
			// BMI: 体重/ 身高*身高 kg m
			var bmi = weight / (height * height) if (bmi > 28) {
				return 20
			}
			return 5
		},
		itemStyle: {
			color: function(arg) {
				var weight = arg.data[1]
				var height = arg.data[0] / 100
				var bmi = weight / (height * height) if (bmi > 28) {
					return 'red'
				}
				return 'green'
			}
		}
	}]
}

在这里插入图片描述

涟漪动画效果
- type:effectScatter
  将 type 的值从 scatter 设置为 effectScatter 就能够产生涟漪动画的效果
- rippleEffect
  rippleEffect 可以配置涟漪动画的大小

var option = {
	series: [{
		type: 'effectScatter',
		rippleEffect: {
			scale: 3
		}
	}]
}

在这里插入图片描述

- showEffectOn
  showEffectOn 可以控制涟漪动画在什么时候产生, 它的可选值有两个: render 和 emphasis render 代表界面渲染完成就开始涟漪动画
  emphasis 代表鼠标移过某个散点的时候, 该散点开始涟漪动画

var option = {
	series: [{
		type: 'effectScatter',
		showEffectOn: 'emphasis',
		rippleEffect: {
			scale: 3
		}
	}]
}

在这里插入图片描述

2.3.3 散点图的特点

散点图可以帮助我们推断出不同维度数据之间的相关性, 比如上述例子中,看得出身高和体重是正相关, 身高越高, 体重越重

散点图也经常用在地图的标注上

2.3.4 直角坐标系的常见配置

直角坐标系的图表指的是带有x轴和y轴的图表, 常见的直角坐标系的图表有: 柱状图折线图散点图针对于直角坐标系的图表, 有一些通用的配置

配置1: 网格 grid
grid是用来控制直角坐标系的布局和大小, x轴和y轴就是在grid的基础上进行绘制的
- 显示 grid
  show: true
- grid 的边框
  borderWidth : 10
- grid 的位置和大小
  left top right bottom
  width height

var option = {
	grid: {
		show: true, // 显示grid 
		borderWidth: 10, // grid的边框宽度 
		borderColor: 'red', // grid的边框颜色 
		left: 100, // grid的位置 
		top: 100, 
		width: 300, // grid的大小 
		height: 150 ,
	} ,
}

配置2: 坐标轴 axis
坐标轴分为x轴和y轴, 一个 grid 中最多有两种位置的 x 轴和 y 轴
- 坐标轴类型 type
  value : 数值轴, 自动会从目标数据中读取数据
  category : 类目轴, 该类型必须通过 data 设置类目数据
- 坐标轴位置
  xAxis : 可取值为 top 或者 bottom
  yAxis : 可取值为 left 或者 right

var option = {
	xAxis: {
		type: 'category',
		data: xDataArr,
		position: 'top'
	},
	yAxis: {
		type: 'value',
		position: 'right'
	}
}

配置3: 区域缩放 dataZoom
dataZoom 用于区域缩放, 对数据范围过滤, x轴和y轴都可以拥有, dataZoom 是一个数组, 意味着可以配置多个区域缩放器
- 区域缩放类型 type
  slider : 滑块
  inside : 内置, 依靠鼠标滚轮或者双指缩放
- 产生作用的轴
  xAxisIndex :设置缩放组件控制的是哪个 x 轴, 一般写0即可
  yAxisIndex :设置缩放组件控制的是哪个 y 轴, 一般写0即可
- 指明初始状态的缩放情况
  start : 数据窗口范围的起始百分比
  end : 数据窗口范围的结束百分比

var option = {
	xAxis: {
		type: 'category',
		data: xDataArr
	},
	yAxis: {
		type: 'value'
	},
	dataZoom: [{
		type: 'slider',
		xAxisIndex: 0
	}, {
		type: 'slider',
		yAxisIndex: 0,
		start: 0,
		end: 80
	}]
}

在这里插入图片描述

需要注意的是, 针对于非直角坐标系图表, 比如饼图地图等, 以上三个配置可能就不会生效了

2.4 .图表4 饼图

2.4.1 饼图的实现步骤

步骤1 ECharts 最基本的代码结构

<!DOCTYPE html>
<html lang="en">
	<head>
		<script src="js/echarts.min.js"></script>
	</head>
	<body>
		<div style="width: 600px;height:400px"></div>
		<script>
			var mCharts = echarts.init(document.querySelector("div")) var option = {}
			mCharts.setOption(option)
		</script>
	</body>
</html>

此时 option 是一个空空如也的对象

步骤2 准备数据

var pieData = [{
	value: 11231,
	name: "淘宝",
}, {
	value: 22673,
	name: "京东"
}, {
	value: 6123,
	name: "唯品会"
}, {
	value: 8989,
	name: "1号店"
}, {
	value: 6700,
	name: "聚美优品"
}]

步骤3 准备配置项在 series 下设置 type:pie

var option = {
	series: [{
		type: 'pie',
		data: pieData

在这里插入图片描述

注意:

- 饼图的数据是由 name 和 value 组成的字典所形成的数组
- 饼图无须配置 xAxis 和 yAxis

2.4.2 饼图的常见效果

显示数值
- label.show : 显示文字
- label.formatter : 格式化文字

var option = {
	series: [{
		type: 'pie',
		data: pieData,
		label: {
			show: true,
			formatter: function(arg) {
				return arg.data.name + '平台' + arg.data.value + '元\n' + arg.percent + '%'
			}
		}
	}]
}

南丁格尔图
南丁格尔图指的是每一个扇形的半径随着数据的大小而不同, 数值占比越大, 扇形的半径也就越大
- roseType:‘radius’

var option = {
	series: [{
		type: 'pie',
		data: pieData,
		label: {
			show: true,
			formatter: function(arg) {
				return arg.data.name + '平台' + arg.data.value + '元\n' + arg.percent + '%'
			}
		},
		roseType: 'radius'
	}]
}

在这里插入图片描述

选中效果
- selectedMode: ‘multiple’
  选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选 ‘single’ ， ‘multiple’ ，分别表示单选还是多选
- selectedOffset: 30
  选中扇区的偏移距离

var option = {
		series: [
			{
					type: 'pie',
					data: pieData,
					selectedMode: 'multiple', // selectedOffset: 30 
			} ,
		] ,
	}

在这里插入图片描述

圆环
- radius
  饼图的半径。可以为如下类型：
  number ：直接指定外半径值。 string ：例如， ‘20%’ ，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。 Array. ：数组的第一项是内半径，第二项是外半径, 通过 Array , 可以将饼图设置为圆环图

var option = {
	series: [{
		type: 'pie',
		data: pieData,
		radius: ['50%', '70%']
	}]
}

在这里插入图片描述

2.4.3 饼图的特点

饼图可以很好地帮助用户快速了解不同分类的数据的占比情况

2.5 图表5 地图

2.5.1 地图图表的使用方式

百度地图API : 使用百度地图的 api , 它能够在线联网展示地图, 百度地图需要申请 ak
矢量地图 : 可以离线展示地图, 需要开发者准备矢量地图数据
接下来的实现是通过矢量图的方式来实现的

2.5.2 矢量地图的实现步骤

步骤1 ECharts 最基本的代码结构

<!DOCTYPE html>
<html lang="en">
	<head>
		<script src="js/echarts.min.js"></script>
	</head>
	<body>
		<div style="width: 600px;height:400px"></div>
		<script>
			var mCharts = echarts.init(document.querySelector("div")) var option = {}
			mCharts.setOption(option)
		</script>
	</body>
</html>

此时 option 是一个空空如也的对象

步骤2 准备中国的矢量 json 文件, 放到 json/map/ 目录之下
步骤3 使用 Ajax 获取 china.json

$.get('json/map/china.json', function (chinaJson) { })

步骤4 在Ajax的回调函数中, 往 echarts 全局对象注册地图的 json 数据
echarts.registerMap(‘chinaMap’, chinaJson)

$.get('json/map/china.json', function (chinaJson) { echarts.registerMap('chinaMap', chinaJson) })

步骤5 获取完数据之后, 需要配置 geo 节点, 再次的 setOption
type : ‘map’
map : ‘chinaMap’

var mCharts = echarts.init(document.querySelector("div")) $.get('json/map/china.json', function(chinaJson) {
	echarts.registerMap('chinaMap', chinaJson) var option = {
		geo: {
			type: 'map', // map是一个固定的值
			map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致
		}
	};
	mCharts.setOption(option)
})

在这里插入图片描述

注意: 需要注意的是, 由于在代码中使用了 Ajax , 所以, 关于此文件的打开, 不能以 file 的协议打开, 应该将其置于 HTTP 的服务之下方可正常展示地图

2.5.3 地图的常见配置

缩放拖动: roam

var option = {
	geo: {
		type: 'map', // map是一个固定的值 
		map: 'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致, 
		roam: true, // 运行使用鼠标进行拖动和缩放 
	} ,
}

名称显示: label

var option = {
		geo: {
			type: 'map', // map是一个固定的值 
			map: 'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致, 
			roam: true, 
			label: { 
				show: true ,
			} ,
		} ,
	}

在这里插入图片描述

初始缩放比例: zoom
地图中心点: center

var option = {
	geo: {
		type: 'map', // map是一个固定的值 
		map: 'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致, 
		roam: true, 
		label: { 
			show: true ,
			},
		zoom: 0.8, // 地图的缩放比例, 大于1代表放大, 小于1代表缩小 
		center: [87.617733, 43.792818] ,// 当前视角的中心点，用经纬度表示 
	} ,
}

在这里插入图片描述

2.5.4 地图的常见效果

显示某个区域
- 准备安徽省的矢量地图数据
- 加载安徽省地图的矢量数据

$.get('json/map/anhui.json', function (anhuiJson) { })

- 在Ajax的回调函数中注册地图矢量数据
  echarts.registerMap(‘anhui’, anhuiJson)
- 配置 geo 的 type:‘map’ , map:‘anhui’
- 通过 zoom 调整缩放比例
- 通过 center 调整中心点

< script >
	var mCharts = echarts.init(document.querySelector("div")) $.get('json/map/anhui.json', function(anhuiJson) {
		console.log(anhuiJson) echarts.registerMap('anhui', anhuiJson) var option = {
			geo: {
				type: 'map',
				map: 'anhui',
				label: {
					show: true
				},
				zoom: 1.2,
				center: [116.507676, 31.752889]
			}
		};
		mCharts.setOption(option)
	}) < /script>

在这里插入图片描述

不同城市颜色不同
- 1.显示基本的中国地图

<!DOCTYPE html>
<html lang="en">
	<body>
		<div style="width: 600px;height:400px;border:1px solid red"></div>
		<script>
			var mCharts = echarts.init(document.querySelector("div")) $.get('json/map/china.json', function(chinaJson) {
				echarts.registerMap('chinaMap', chinaJson) var option = {
					geo: {
						type: 'map',
						map: 'chinaMap',
						roam: true,
						label: {
							show: true
						}
					}
				}
				mCharts.setOption(option)
			})
		</script>
	</body>
</html>

- 2.准备好城市空气质量的数据, 并且将数据设置给 series

var airData = [{
		name: '北京',
		value: 39.92
	}, {
		name: '天津',
		value: 39.13
	}, {
		name: '上海',
		value: 31.22
	}, {
		name: '重庆',
		value: 66
	}, {
		name: '河北',
		value: 147
	}, {
		name: '河南',
		value: 113
	}, {
		name: '云南',
		value: 25.04
	}, {
		name: '辽宁',
		value: 50
	}, {
		name: '黑龙江',
		value: 114
	}, {
		name: '湖南',
		value: 175
	}, {
		name: '安徽',
		value: 117
	}, {
		name: '山 东',
		value: 92
	}, {
		name: '新疆',
		value: 84
	}, {
		name: '江苏',
		value: 67
	}, {
		name: '浙江',
		value: 84
	}, {
		name: '江西',
		value: 96
	}, {
		name: '湖北',
		value: 273
	}, {
		name: '广西',
		value: 59
	}, {
		name: '甘肃',
		value: 99
	}, {
		name: '山西',
		value: 39
	}, {
		name: '内蒙古',
		value: 58
	}, {
		name: '陕西',
		value: 61
	}, {
		name: '吉林',
		value: 51
	}, {
		name: '福建',
		value: 29
	}, {
		name: '贵州',
		value: 71
	}, {
		name: '广东',
		value: 38
	}, {
		name: '青海',
		value: 57
	}, {
		name: '西藏',
		value: 24
	}, {
		name: '四川',
		value: 58
	}, {
		name: '宁夏',
		value: 52
	}, {
		name: '海南',
		value: 54
	}, {
		name: '台湾',
		value: 88
	}, {
		name: '香港',
		value: 66
	}, {
		name: '澳门',
		value: 77
	}, {
		name: '南海诸岛',
		value: 55
	}]......
	var option = {
		......series: [{
			data: airData
		}]
	}

- 3.将 series 下的数据和 geo 关联起来
  geoIndex: 0
  type: ‘map’

var option = {
	series: [{
		data: airData,
		geoIndex: 0,
		type: 'map'
	}]
}

- 4.结合 visualMap 配合使用
  visualMap 是视觉映射组件, 和之前区域缩放 dataZoom 很类似, 可以做数据的过滤. 只不过dataZoom 主要使用在直角坐标系的图表, 而 visualMap 主要使用在地图或者饼图中

var option = {
		geo: {
			type: 'map',
			map: 'chinaMap',
			roam: true,
			label: {
				show: true
			}
		},
		series: [{
			data: airData,
			geoIndex: 0,
			type: 'map'
		}],
		visualMap: {
			min: 0, // 最小值 
			max: 300, // 最大值 
			inRange: { 
				color: ['white', 'red'] ,// 颜色的范围 
			},
			calculable: true ,// 是否显示拖拽用的手柄（手柄能拖拽调整选中范围） 
		} ,
	}

在这里插入图片描述

地图和散点图结合
- 1.给 series 这个数组下增加新的对象
- 2.准备好散点数据,设置给新对象的 data

var scatterData = [{
		value: [117.283042, 31.86119] ,// 散点的坐标, 使用的是经纬度 
	} ,
]

- 3.配置新对象的 type
  type:effectScatter
- 让散点图使用地图坐标系统
  coordinateSystem: ‘geo’
- 让涟漪的效果更加明显
  rippleEffect: { scale: 10 }

var option = {
	series: [{
		data: airData,
		geoIndex: 0,
		type: 'map'
	}, {
		data: scatterData,
		type: 'effectScatter',
		coordinateSystem: 'geo',
		rippleEffect: {
			scale: 10
		}
	}]
}

在这里插入图片描述

2.6 图表6 雷达图

步骤1 ECharts 最基本的代码结构

<!DOCTYPE html>
<html lang="en">
	<head>
		<script src="js/echarts.min.js"></script>
	</head>
	<body>
		<div style="width: 600px;height:400px"></div>
		<script>
			var mCharts = echarts.init(document.querySelector("div")) var option = {}
			mCharts.setOption(option)
		</script>
	</body>
</html>

此时 option 是一个空空如也的对象

步骤2 定义各个维度的最大值

var dataMax = [{
	name: '易用性',
	max: 100
}, {
	name: '功能',
	max: 100
}, {
	name: '拍照',
	max: 100
}, {
	name: '跑分',
	max: 100
}, {
	name: '续航',
	max: 100
}]

步骤3 准备具体产品的数据

var hwScore = [80, 90, 80, 82, 90] 
var zxScore = [70, 82, 75, 70, 78]

步骤4 在 series 下设置 type:radar

var option = {
	radar: {
		indicator: dataMax
	},
	series: [{
		type: 'radar',
		data: [{
			name: '华为手机1',
			value: hwScore
		}, {
			name: '中兴手机1',
			value: zxScore
		}]
	}]
	3.6 .2.雷达图的常见效果
	显示数值 label
}

在这里插入图片描述

2.6.1 雷达图的常见效果

显示数值 label

var option = {
	series: [{
		type: 'radar',
		label: {
			show: true
		},
		data: [{
			name: '华为手机1',
			value: hwScore
		}, {
			name: '中兴手机1',
			value: zxScore
		}]
	}]
}

在这里插入图片描述

区域面积 areaStyle

var option = {
	series: [{
		type: 'radar',
		label: {
			show: true
		},
		areaStyle: {},
		data: [{
			name: '华为手机1',
			value: hwScore
		}, {
			name: '中兴手机1',
			value: zxScore
		}]
	}]
}

在这里插入图片描述

绘制类型 shape
雷达图绘制类型，支持 ‘polygon’ 和 ‘circle’
‘polygon’ : 多边形
‘circle’ 圆形

var option = {
	radar: {
		indicator: dataMax,
		shape: 'circle'
	},
	series: [{
		type: 'radar',
		label: {
			show: true
		},
		data: [{
			name: '华为手机1',
			value: hwScore
		}, {
			name: '中兴手机1',
			value: zxScore
		}]
	}]
}