数据可视化——ECharts笔记整理

1.1 ECharts的介绍
Echarts是一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

1.2 ECharts的特点

丰富的可视化类型

• 折线图、柱状图、饼图、K线图
• 只有你想不到，没有它做不到

多种数据格式支持

• key-value数据格式
• 二维表
• TypedArray格式

流数据的支持

• 流数据的动态渲染
• 增量渲染技术

移动端优化
跨平台使用
绚丽的特性
三维可视化
……

小结
ECharts能满足绝大多数可视化图表实现

• 兼容性强
• 使用方便
• 功能强大

实现数据可视化的最佳选择之一

2.1 ECharts的基本使用

5分钟上手ECharts

• 步骤1：引入echarts.js文件
• 步骤2：准备一个呈现图表的盒子
• 步骤3：初始化echarts实例对象
• 步骤4：准备配置项
• 步骤5：将配置项设置给echarts实例对象

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

<!--步骤1：引入echarts.js文件-->
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
			//步骤3：初始化echarts实例对象
			//参数，dom，决定图表最终呈现的位置
			var mCharts = echarts.init(document.querySelector('div'));
			
			//步骤4：准备配置项
			var option = {
				xAxis:{
					type:'category',
					data:['小橙','小蓝','小青'],
				},
				yAxis:{
					type:'value'
				},
				series:[
				{
					name:'数学',
					type:'bar',
					data:[70,90,87]
				}
				]
			}
			//步骤5：将配置项设置给echarts实例对象
			mCharts.setOption(option);
		</script>

2.3 小结
快速上手ECharts的步骤

• 引入
• 准备
• 设置

配置项的使用

• 除了配置项会变化之外，其他的代码都是固定的
• 配置项的学习和使用应该参照官方文档和示例

2.4 ECharts的基本使用

相关配置

• xAxis:直角坐标系中的x轴
• yAxis：直角坐标系中的y轴
• series：系列列表。每个系列通过type决定自己的图表类型

//参数，dom，决定图表最终呈现的位置
			var mCharts = echarts.init(document.querySelector('div'));
			
			//步骤4：准备配置项
			var option = {
				title:{
					text:'成绩',
					link:'https://www.baidu.com',
					textStyle:{
						color:'red'
					}
				},
				xAxis:{
					type:'category',//类目轴
					data:['小橙','小蓝','小青'],
				},
				yAxis:{
					type:'value' //数值轴
				},
				series:[
				{
					name:'数学',
					type:'line',
					data:[70,90,87]
				}
				]
			}
			//步骤5：将配置项设置给echarts实例对象
			mCharts.setOption(option);

3. ECharts常用图表

7大图表

• 图表1：柱状图
• 图表2：折线图
• 图表3：散点图
• 图表4：饼图
• 图表5：地图
• 图表6：雷达图
• 图表7：仪表盘图

3.1 柱状图
图表1：柱状图
期末数学成绩如下：
小红：88
小橙：92
小黄：63
小绿：77
小青：94
小蓝：80
小紫：72

实现步骤

• Echarts最基本的代码结构：
  引入js文件，DOM容器，初始化对象，设置option

• x轴数据
  数组1：[‘小红’,‘小橙’,‘小黄’,‘小绿’,‘小青’,‘小蓝’,‘小紫’]

• y轴数据：
  数组2：[88,92,63,77,94,80,72]

• 图标类型：
  在series下设置type:bar

//步骤3：初始化echarts实例对象
			//参数，dom，决定图表最终呈现的位置
			var mCharts = echarts.init(document.querySelector('div'));
			var xDataArr = ['小红','小橙','小黄','小绿','小青','小蓝','小紫'];
			var yDataArr = [88,92,63,77,94,80,72,86];
			//步骤4：准备配置项
			var option = {
				
				xAxis:{
					type:'category',//类目轴
					data:xDataArr,
				},
				yAxis:{
					type:'value' //数值轴
				},
				series:[
				{
					name:'数学',
					type:'bar',
					data:yDataArr
				}
				]
			}
			//步骤5：将配置项设置给echarts实例对象
			mCharts.setOption(option);

常见效果

• 标记：最大值 最小值 平均值
  MarkPoint
  markLine

• 显示：数值显示 柱宽度 横向柱状图
  label
  barWidth
  更改x轴和y轴的角色

var option = {
				
				xAxis:{
					type:'value',
					
				},
				yAxis:{
					type:'category' ,
					data:xDataArr
				},
				series:[
				{
					name:'数学',
					type:'bar',
					markPoint:{
						data:[
						{
							type:'max',name:'最大值'
						},
						{
							type:'min',name:'最小值'
						}
						]
					},
					markLine:{
						data:[
						{
							type:'average',name:'平均值'
						}
						]
					},
					label:{
						show:true,
						rotate:60,
						position:'top'
					},
					barWidth:'30%',
					data:yDataArr
					
				}
				]
			}

小结

基本的柱状图

• 基本的代码结构
• x轴和y轴的数据
• series中的type设置为bar

柱状图常见效果

• 最大值\最小值 MarkPoint
• 平均值 markLine
• 数值的显示 label
• 柱的宽度 barWidth

柱状图的特点

• 柱状图描述的是分类数据，呈现的是每一个分类中有多少，通过柱状图，可以很清晰的看出每个分类数据的排名情况。

通用配置

通用配置指的就是任何一种类型的图表都能使用的配置

• 标题：titile
• 提示：tooltip
• 工具按钮：toolbox
• 图例：legend

通用配置titile

• 文字样式

  textStyle

• 标题边框
  borderWidth、borderColor、borderRadius

• 标题位置
  left 、 top 、 right 、 bottom

var option = {
				title:{
					text:'成绩展示',
					textStyle:{
						color:'red'
					},
					borderWidth:5,
					borderColor:'pink',
					borderRadius:5,
					left:50,
					top:10
				},
				xAxis:{
					type:'category' ,
					data:xDataArr
				},
				yAxis:{
					type:'value',
				},
				series:[
				{
					name:'数学',
					type:'bar',
					data:yDataArr
					
				}
				]
			}

通用配置tooltip
      tooltip：提示框组件，用于配置鼠标滑过或点击图表时的显示框

• 触发类型：trigger
  item 、 axis
• 触发时机：triggerOn
  mouseover 、 click
• 格式化：formatter
  字符串模板 、 回调函数

var option = {
				title:{
					text:'成绩展示',
					textStyle:{
						color:'red'
					},
					borderWidth:5,
					borderColor:'pink',
					borderRadius:5,
					left:50,
					top:10
				},
				tooltip:{
				//	trigger:'item'
					trigger:'axis',
					triggerOn:'click',
				//	formatter:'{b} 的成绩是{c}'
					formatter:function(arg){
						return arg[0].name +' 的分数是：'+ arg[0].data;
					}
				},
				xAxis:{
					type:'category' ,
					data:xDataArr
				},
				yAxis:{
					type:'value',
				},
				series:[
				{
					name:'数学',
					type:'bar',
					data:yDataArr
					
				}
				]
			}

通用配置toolbox
      toolbox：ECharts提供的工具栏

• 内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具
• 显示工具栏按钮feature
  saveAsImage 、 dataView 、 restore 、 dataZoom、magicType

var option = {
				title:{
					text:'成绩展示',
					textStyle:{
						color:'red'
					},
					borderWidth:5,
					borderColor:'pink',
					borderRadius:5,
					left:50,
					top:10
				},
				tooltip:{
				//	trigger:'item'
					trigger:'axis',
					triggerOn:'click',
				//	formatter:'{b} 的成绩是{c}'
					formatter:function(arg){
						return arg[0].name +' 的分数是：'+ arg[0].data;
					}
				},
				toolbox:{
					feature:{
						saveAsImage:{},//导出图片
						dataView:{},//数据视图
						restore:{}, //重置
						dataZoom:{}, //区域缩放
						magicType:{
							type:['bar','line']
						}//动态图表类型的切换
					}
				},
				xAxis:{
					type:'category' ,
					data:xDataArr
				},
				yAxis:{
					type:'value',
				},
				series:[
				{
					name:'数学',
					type:'bar',
					data:yDataArr
					
				}
				]
			}

通用配置legend
      legend：图例，用于筛选系列，需要和series配合使用

• legend中的data是一个数组
• legend中的data的值需要和series数组中某组数据的name值一致

var mCharts = echarts.init(document.querySelector('div'));
			var xDataArr = ['小红','小橙','小黄','小绿','小青','小蓝','小紫'];
			var yDataArr1 = [88,92,63,77,94,80,72,86];
			var yDataArr2 = [93,60,85,90,77,92,75,88];
			//步骤4：准备配置项
			var option = {
				title:{
					text:'成绩展示',
					textStyle:{
						color:'red'
					},
					borderWidth:5,
					borderColor:'pink',
					borderRadius:5,
					left:50,
					top:10
				},
				tooltip:{
				//	trigger:'item'
					trigger:'axis',
					triggerOn:'click',
				//	formatter:'{b} 的成绩是{c}'
					formatter:function(arg){
						return arg[0].name +' 的分数是：'+ arg[0].data;
					}
				},
				toolbox:{
					feature:{
						saveAsImage:{},//导出图片
						dataView:{},//数据视图
						restore:{}, //重置
						dataZoom:{}, //区域缩放
						magicType:{
							type:['bar','line']
						}//动态图表类型的切换
					}
				},
				legend:{
					data:['数学','语文']
				},
				xAxis:{
					type:'category' ,
					data:xDataArr
				},
				yAxis:{
					type:'value',
				},
				series:[
				{
					name:'数学',
					type:'bar',
					data:yDataArr1
				},
				{
					name:'语文',
					type:'bar',
					data:yDataArr2
				}
				]
			}

3.2 折线图

图表2：折线图
方便面销量如下：
1月：3000
2月：2800
3月：900
4月：1000
5月：800
6月：700
7月：1400
8月：1300
9月：900
10月：1000
11月：800
12月：600

实现步骤

• Echarts最基本的代码结构：
  引入js文件，DOM容器，初始化对象，设置option

• x轴数据
  数组1：[‘1月’,‘2月’,‘3月’,‘4月’,‘5月’,‘6月’,‘7月’,‘8月’,‘9月’,‘10月’,‘11月’,‘12月’]

• y轴数据：
  数组2：[3000,2800,900,1000,800,700,1400，1300,900，1000，800,600]

• 图标类型：
  在series下设置type:line

var mCharts = echarts.init(document.querySelector('div'));
			var xDataArr = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
			var yDataArr = [3000,2800,900,1000,800,700,1400,1300,900,1000,800,600];
			
			//步骤4：准备配置项
			var option = {
				xAxis:{
					type:'category' ,
					data:xDataArr
				},
				yAxis:{
					type:'value',
				},
				series:[
				{
					name:'方便面',
					type:'line',
					data:yDataArr
				}
				]
			}
			//步骤5：将配置项设置给echarts实例对象
			mCharts.setOption(option);

常见效果

• 标记：最大值 最小值 平均值 标注区间
  markPoint 、 markLine 、 markArea

• 线条控制：平滑 风格
  smooth 、 lineStyle

• 填充风格
  areaStyle

• 紧挨边缘
  boundaryGap

• 缩放：脱离0值比例
  scale

• 堆叠图

3.3 散点图

图表3：散点图

散点图可以帮助我们推断出变量间的相关性
比如身高和体重的关系

实现步骤

• ECharts最基本的代码结构：
  引入js文件，DOM容器，初始化对象，设置option
• x轴数据和y轴的数据：二维数组
  数组1：[[身高1，体重1],[身高2,体重2],[身高3,体重3]…]
• 图表类型：
  在series下设置type：scatter
  xAxis和yAxis的type都要设置为value
• 调整：
  将坐标轴都设置为脱离0值比例，scale

var data = [
					{"sex":"female","height":162.2,"weight":59},
					{"sex":"male","height":178.8,"weight":75},
					{"sex":"female","height":158.3,"weight":45},
					{"sex":"female","height":156.8,"weight":38},
					{"sex":"male","height":123.5,"weight":32},
					{"sex":"male","height":188.8,"weight":80},
					{"sex":"female","height":185.3,"weight":76},
					{"sex":"male","height":159.2,"weight":46},
					{"sex":"female","height":177.2,"weight":56},
			];
			var axisData = [];
			for(var i=0;i<data.length;i++){
				var height = data[i].height;
				var weight = data[i].weight;
				var newArr = [height,weight];
				axisData.push(newArr);
			}
			var mCharts = echarts.init(document.querySelector("div"));
			var option ={
				xAxis:{
					type:'value',
					scale:true
				},
				yAxis:{
					type:'value',
					scale:true
				},
				series:[
					{
						type:'scatter',
						data:axisData
					}
				]
			}
			mCharts.setOption(option);

常见效果

• 气泡图效果
  散点的大小不同 symbolSize
  散点的颜色不同 itemStyle.color

var data = [
				{"sex":"female","height":162.2,"weight":59},
				{"sex":"male","height":178.8,"weight":75},
				{"sex":"female","height":158.3,"weight":45},
				{"sex":"female","height":156.8,"weight":38},
				{"sex":"male","height":123.5,"weight":32},
				{"sex":"male","height":188.8,"weight":80},
				{"sex":"female","height":185.3,"weight":76},
				{"sex":"male","height":159.2,"weight":46},
				{"sex":"female","height":177.2,"weight":56},
				{"sex":"male","height":178.8,"weight":100},
				{"sex":"female","height":152.3,"weight":45},
				{"sex":"female","height":126.8,"weight":38},
				{"sex":"male","height":193.5,"weight":120},
				{"sex":"male","height":155.8,"weight":80},
				{"sex":"female","height":165.3,"weight":76},
				{"sex":"male","height":159.2,"weight":46},
				{"sex":"female","height":167.2,"weight":88},
			];
		var axisData = [];
		for(var i=0;i<data.length;i++){
			var height = data[i].height;
			var weight = data[i].weight;
			var newArr = [height,weight];
			axisData.push(newArr);
		}
		var mCharts = echarts.init(document.querySelector("div"));
		var option ={
			xAxis:{
				type:'value',
				scale:true
			},
			yAxis:{
				type:'value',
				scale:true
			},
			series:[
				{
				type:'scatter',
				data:axisData,
				//symbolSize:20
				symbolSize:function(arg){
					var height = arg[0]/100;
					var weight = arg[1];
					//bmi = 体重kg/(身高m*身高m) 大于28，就代表肥胖
					var bmi = weight / (height * height);
					if(bmi > 28){
						return 20;
					}
					return 5
				},
				itemStyle:{
					color:function(arg){
						var height = arg.data[0]/100;
						var weight = arg.data[1];
						//bmi = 体重kg/(身高m*身高m) 大于28，就代表肥胖
						var bmi = weight / (height * height);
						if(bmi > 28){
							return 'red';
						}
						return 'gold'
						}
				}
				}
			]
			}
			mCharts.setOption(option);

• 涟漪动画效果
  type:effectScatter
  showEffectOn:‘emphasis’
  rippleEffect:{}

var data = [
				{"sex":"female","height":162.2,"weight":59},
				{"sex":"male","height":178.8,"weight":75},
				{"sex":"female","height":158.3,"weight":45},
				{"sex":"female","height":156.8,"weight":38},
				{"sex":"male","height":123.5,"weight":32},
				{"sex":"male","height":188.8,"weight":80},
				{"sex":"female","height":185.3,"weight":76},
				{"sex":"male","height":159.2,"weight":46},
				{"sex":"female","height":177.2,"weight":56},
				{"sex":"male","height":178.8,"weight":100},
				{"sex":"female","height":152.3,"weight":45},
				{"sex":"female","height":126.8,"weight":38},
				{"sex":"male","height":193.5,"weight":120},
				{"sex":"male","height":155.8,"weight":80},
				{"sex":"female","height":165.3,"weight":76},
				{"sex":"male","height":159.2,"weight":46},
				{"sex":"female","height":167.2,"weight":88},
			];
		var axisData = [];
		for(var i=0;i<data.length;i++){
			var height = data[i].height;
			var weight = data[i].weight;
			var newArr = [height,weight];
			axisData.push(newArr);
		}
		var mCharts = echarts.init(document.querySelector("div"));
		var option ={
			xAxis:{
				type:'value',
				scale:true
			},
			yAxis:{
				type:'value',
				scale:true
			},
			series:[
				{
				type:'effectScatter',
				showEffectOn:'emphasis',//render emphasis
				rippleEffect:{
					scale:8
				},
				data:axisData,
				//symbolSize:20
				symbolSize:function(arg){
					var height = arg[0]/100;
					var weight = arg[1];
					//bmi = 体重kg/(身高m*身高m) 大于28，就代表肥胖
					var bmi = weight / (height * height);
					if(bmi > 28){
						return 20;
					}
					return 10;
				},
				itemStyle:{
					color:function(arg){
						var height = arg.data[0]/100;
						var weight = arg.data[1];
						//bmi = 体重kg/(身高m*身高m) 大于28，就代表肥胖
						var bmi = weight / (height * height);
						if(bmi > 28){
							return 'red';
						}
						return 'pink'
						}
				}
				}
			]
			}
			mCharts.setOption(option);

小结
基本的散点图

• 基本的代码结构
• x轴和y轴的数据，是一个二维数组
• series中的type设置为scatter
• xAxis和yAxis中的type设置为value

散点图常见效果

• 气泡图
• 涟漪效果

散点图特点

• 散点图可以帮助我们推断出不同维度数据之间的相关性
• 散点图也经常用在地图的标注上

3.4 饼图

图表4：饼图
小明今年在各个网购平台的消费金额：
淘宝：11231
京东：22673
唯品会：6123
1号店：8989
聚美优品：6700

实现步骤

• ECharts最基本的代码结构：
  引入js文件，DOM容器，初始化对象，设置option
• 数据准备：
  {name:“淘宝”,value:11231},
  {name:“京东”,value:22673},
  {name:“唯品会”,value:6123},
  {name:“1号店”,value:8989},
  {name:“聚美优品”,value:6700}
• 图表类型：
  在series下设置type：pie

var mCharts = echarts.init(document.querySelector("div"));
			//pieData就是需要设置给饼图的数据，数组，数组中包含一个又一个对象，每一个对象中，需要有name和value
			var pieData =[
				{name:'淘宝',value:11231},
				{name:'京东',value:22673},
				{name:'唯品会',value:6123},
				{name:'1号店',value:8989},
				{name:'聚美优品',value:6700},
			];
			var option = {
				series:[
					{
						type:'pie',
						data:pieData
					}
				]
			}
			mCharts.setOption(option);

常见效果

• 显示数值
  label.formatter
• 圆环
  设置两个半径 radius:[‘50%’,‘75%’]
• 南丁格尔图
  roseType:‘radius’
• 选中效果
  选中模式selectedMode:single\multiple
  选中偏移量 selectedOffset：30

var mCharts = echarts.init(document.querySelector("div"));
			//pieData就是需要设置给饼图的数据，数组，数组中包含一个又一个对象，每一个对象中，需要有name和value
			var pieData =[
				{name:'淘宝',value:11231},
				{name:'京东',value:22673},
				{name:'唯品会',value:6123},
				{name:'1号店',value:8989},
				{name:'聚美优品',value:6700},
			];
			var option = {
				series:[
					{
						type:'pie',
						data:pieData,
						label:{//饼图文字的显示
							show:true,//显示文字
							//formatter:'hehe'//决定文字显示的内容
							formatter:function(arg){
//								console.log(arg)
								return arg.name + '平台' + arg.value +'元\n' + arg.percent +'%';
							}
						},
						//radius:20 //饼图的半径
						//radius:'20%' //百分比参照的是宽度和高度中较小的那一部分的一半来进行百分比设置
						//radius:['50%','75%'] //第0个元素代表的是内圆的半径 第一个元素外圆的半径
						roseType:'radius',
						//南丁格尔图 饼图的每一个区域的半径是不同的
						//selectedMode:'single'	//选中的效果，能够将选中的区域偏离圆点一小段距离
						selectedMode:'multiple',
						selectedOffset:30
					}
				]
			}
			mCharts.setOption(option);

小结
基本的饼图

• 基本的代码结构
• 数据是有name和value组成的对象所形成的数组
• series中的type设置为pie
• 无须配置xAxis和YAxis

饼图常见效果

• 显示文字的格式化
• 圆环
• 南丁格尔图
• 选中效果

饼图特点

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

3.5 地图

图表5：地图

地图图表的使用方式

• 百度地图API
  需要申请百度地图ak
• 矢量地图
  需要准备矢量地图数据

矢量地图的实现步骤

• ECharts最基本的代码结构
  引入js文件，DOM容器，初始化对象，设置option
• 准备中国的矢量地图json文件，放到json/map/的目录下
  china.json
• 使用Ajax获取china.json
  $.get(‘json/map/china.json’,function(chinaJson){})
• 在回调函数中往echarts全局对象注册地图的json数据
  echarts.registerMap(‘chinaMap’,chinaJson);
• 在geo下设置
  type:‘map’
  map:‘chinaMap’

常见配置

• 缩放拖动
  roam
• 名称显示
  label
• 初始缩放比例
  zoom
• 地图中心点
  center

<div style="width: 600px;height: 400px;"></div>
		<script type="text/javascript">
//			1.ECharts最基本的代码结构
//			2.准备中国的矢量地图json文件，放到json/map/的目录下
//			3.使用Ajax获取china.json
//			4.在回调函数中往echarts全局对象注册地图的json数据 echarts.registerMap('chinaMap',矢量地图数据)
//			5.在geo下设置typee:'map'  ,map:'chinaMap'
			var mCharts = echarts.init(document.querySelector("div"));
			$.get('json/map/china.json',function(ret){
				//ret就是中国的各个省份的矢量地图数据
				echarts.registerMap('chinaMap',ret);
				var option ={
				  geo:{
					type:'map',
					map:'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致
					roam:true,	//设置允许缩放以及拖动的效果
					label:{
						show:true //展示标签
					},
					zoom:1,  //设置初始化的缩放比例
					center:[87.617733,43.792818] //设置地图中心点的坐标
				}
			}
			mCharts.setOption(option);
			})

常见效果

• 显示某个区域
  1.加载改区域的矢量地图数据
  2.通过registerMap注册到echarts全局对象中
  3.指明geo配置下的type和map属性
  4.通过zoom放大该区域
  5.通过center定位中心点

//			1.ECharts最基本的代码结构
//			2.准备中国的矢量地图json文件，放到json/map/的目录下
//			3.使用Ajax获取china.json
//			4.在回调函数中往echarts全局对象注册地图的json数据 echarts.registerMap('chinaMap',矢量地图数据)
//			5.在geo下设置typee:'map'  ,map:'chinaMap'
			var mCharts = echarts.init(document.querySelector("div"));
			$.get('json/map/hunan.json',function(ret){
				//ret就是中国的各个省份的矢量地图数据
				console.log(ret)
				echarts.registerMap('hunan',ret);
				var option ={
				  geo:{
					type:'map',
					map:'hunan', //chinaMap需要和registerMap中的第一个参数保持一致
					label:{
						show:true //展示标签
					},
					zoom:1,  //设置初始化的缩放比例
				//	center:[111.608019,26.434516] //设置地图中心点的坐标
				}
			}
			mCharts.setOption(option);
			})

• 不同城市颜色不同
  1.显示基本的中国地图
  2.城市的空气质量数据设置给series
  3.将series下的数据和geo关联起来
       geoIndex:0、type:‘map’
  4.结合visualMap配合使用
       min 、max 、inRange 、calculable

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 mCharts = echarts.init(document.querySelector("div"));
			$.get('json/map/china.json',function(ret){
				//ret就是中国的各个省份的矢量地图数据
				echarts.registerMap('chinaMap',ret);
				var option ={
				  geo:{
					type:'map',
					map:'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致
					roam:true,	//设置允许缩放以及拖动的效果
					label:{
						show:true //展示标签
					},
				},
				series:[
					{
						data:airData,
						geoIndex:0,//将空气质量的数据和第0个geo配置关联在一起
						type:'map'
					}
				],
				visualMap:{
					min:0,
					max:300,
					inRange:{
						color:['white','gold'] //控制颜色渐变的范围
					},
					calculable:true //出现滑块
				}
			}
			mCharts.setOption(option);
			})

• 地图和散点图结合
  1.给series下增加新的对象
  2.准备好散点数据，设置给新的对象的data
  3.配置新对象的type
       type:effectScatter
  4.让散点图使用地图坐标系统
       coordinateSystem:‘geo’
  5.让涟漪的效果更加明显
       rippleEffect:{
            scale:10
        }

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 scatterData = [
		      {
		        value: [117.283042, 31.86119]
		      }
    		];
			var mCharts = echarts.init(document.querySelector("div"));
			$.get('json/map/china.json',function(ret){
				//ret就是中国的各个省份的矢量地图数据
				echarts.registerMap('chinaMap',ret);
				var option ={
				  geo:{
					type:'map',
					map:'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致
					roam:true,	//设置允许缩放以及拖动的效果
					label:{
						show:true //展示标签
					},
				},
				series:[
					{
						data:airData,
						geoIndex:0,//将空气质量的数据和第0个geo配置关联在一起
						type:'map'
					},
					{
						data:scatterData,//配置散点的坐标数据
						type:'effectScatter',
						coordinateSystem:'geo', //指明散点使用的坐标系统 geo的坐标系统
						rippleEffect:{
							scale:10 //设置涟漪动画的缩放比例
						}
					}
				],
				visualMap:{
					min:0,
					max:300,
					inRange:{
						color:['white','gold'] //控制颜色渐变的范围
					},
					calculable:true //出现滑块
				}
			}
			mCharts.setOption(option);
			})

小结

地图图表的两种使用方式

• 百度地图API
• 矢量地图数据

地图的绘制

• 加载数据
• 将数据注册给echarts全局对象
• 配置geo

常见效果

• 缩放拖动/初始缩放比例/中心点
• visualMap和地图的结合
• 散点图和地图的结合

地图特点

• 地图主要可以帮助我们从宏观的角度快速看出不同地理位置上数据的差异

3.6 雷达图

图表6：雷达图
有两台手机在5个方面的打分数据如下：
手机1
易用性80、功能90、拍照80、跑分82、续航90
手机2
易用性70、功能82、拍照75、跑分70、续航78

实现步骤

• ECharts最基本的代码结构：
  引入js文件，DOM容器，初始化对象，设置option
• 定义各个维度的最大值
  indicator：[{name:‘易用性’,max:100},…]
• 准备具体产品的数据
  data:[{name:‘手机1’,value:[80,90,80,82,90]},…]
• 图表类型：
  在series下设置type:radar

var mCharts = echarts.init(document.querySelector("div"));
			// 各个维度的最大值
		    var dataMax = [
		      {
		        name: '易用性',
		        max: 100
		      },
		      {
		        name: '功能',
		        max: 100
		      },
		      {
		        name: '拍照',
		        max: 100
		      },
		      {
		        name: '跑分',
		        max: 100
		      },
		      {
		        name: '续航',
		        max: 100
		      }
		      ];
			var option ={
				radar:{
					indicator:dataMax//配置各个维度的最大值
				},
				series:[
					{
						type:'radar',
						data:[
							{
								name:'手机1',
								value:[80,90,80,82,90]
							},
							{
								name:'手机2',
								value:[70,82,75,70,78]
							}
						]
					}
				]
			}
			mCharts.setOption(option);

常用配置

• 显示数值：
  label
• 区域面积
  areaStyle
• 绘制类型
  shape

var mCharts = echarts.init(document.querySelector("div"));
			// 各个维度的最大值
		    var dataMax = [
		      {
		        name: '易用性',
		        max: 100
		      },
		      {
		        name: '功能',
		        max: 100
		      },
		      {
		        name: '拍照',
		        max: 100
		      },
		      {
		        name: '跑分',
		        max: 100
		      },
		      {
		        name: '续航',
		        max: 100
		      }
		      ];
			var option ={
				radar:{
					indicator:dataMax,//配置各个维度的最大值
					shape:'polygon' //配置雷达图最外层的图形 circle polygon
				},
				series:[
					{
						type:'radar',
						label:{
							show:true
						},
						areaStyle:{},
						data:[
							{
								name:'手机1',
								value:[80,90,80,82,90]
							},
							{
								name:'手机2',
								value:[70,82,75,70,78]
							}
						]
					}
				]
			}
			mCharts.setOption(option);

小结

雷达图的实现步骤

• 定义各个维度的最大值
• 定义图表的类型

雷达图的特点

• 雷达图可以用来分析多个维度的数据与标准数据的对比情况

3.7 仪表盘

图表7：仪表盘图

仪表盘主要用在进度把控以及数据范围的监测

实现步骤

• ECharts最基本的代码结构：
  引入js文件，DOM容器，初始化对象，设置option
• 准备数据，设置给series下的data
  data：[{value:97}]
• 图表类型：
  在series下设置type:gauge

var mCharts = echarts.init(document.querySelector("div"));
			var option ={
				series:[
					{
						type:'gauge',
						data:[
							{
								value:97	
							}//每一个对象就代表一个指针
						]
					}
				]
			}
			mCharts.setOption(option);
			

常见效果

• 数值范围：
  max 、min
• 多个指针：
  增加data中的数组元素
• 多个指针颜色差异
  itemStyle

var mCharts = echarts.init(document.querySelector("div"));
			var option ={
				series:[
					{
						type:'gauge',
						data:[
							{
								value:97,
								itemStyle:{//指针的样式
									color:'gold' //指针的颜色
								}
							},//每一个对象就代表一个指针
							{
								value:85,
								itemStyle:{
									color:'gray'
								}
							}
						],
						min:50 //min max 控制仪表盘数值范围
					}
				]
			}
			mCharts.setOption(option);
			

小结
仪表盘的实现步骤

• 准备数据
• 定义图表的类型

仪表盘的特点

• 仪表盘可以更直观的表现出某个指标的进度或实际情况

3.8 七个图表小结
小结
各个图表的英文单词

• bar
• line
• scatter/effectScatter
• pie
• map
• radar
• gauge

使用场景

• 柱状图：柱状图描述的是分类数据，呈现的是每一个分类中有多少
• 折线图：折线图常用来分析数据随时间的变化趋势
• 散点图：散点图可以帮助我们推断出不同维度数据之间的相关性
• 饼图：饼图可以很好地帮助用户快速了解不同分类的数据的占比情况
• 地图：地图主要可以帮助我们从宏观的角度快速看出不同地理位置上数据的差异
• 雷达图：雷达图可以用来分析多个维度的数据与标准数据的对比情况
• 仪表盘：仪表盘可以更直观的表现出某个指标的进度或实际情况