echarts数据可视化详解，一篇带你入门数据可视化

echarts基本使用

相关配置讲解

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

---

案例配置项

var option={
					xAxis:{
						type:'category',//类目轴
						data:['小明','小红','小王']
					},
					yAxis:{
						type:'value'//数值轴
					},
					series:[{
						name:'语文',
            //bar: 柱状图
            //line:折线图
            //pie: 饼图
						type:'bar',
						data:[70,92,87]
					}],
				}

---

echarts常用图表

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

柱状图

实现步骤

• echarts最基本的代码结构：

  引入js文件，DOM容器，初始化对象，设置option

• x轴数据：[‘张三’,‘李四’,‘王五’,‘闰土’,‘小明’,‘茅台’,‘二妞’,‘大强’]

• y轴数据: [88,92,63,77,94,80,72,86]

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

---

 var myChart = echarts.init(document.getElementById('main'));
				var xDataArr=['张三','李四','王五','闰土','小明','茅台','二妞','大强']
				var yDataArr=[88,92,63,77,94,80,72,86]
				var option={
					xAxis:{
						type:'category',
						data:xDataArr
					},
					yAxis:{
						type:'value'
					},
					series:[{
						name:'语文',
						type:'bar',
						data:yDataArr
					}],
				}
				myChart.setOption(option)

常见效果

• 最大值、最小值、平均值（markPoint、markLine）

  var option={
    xAxis:{
      type:'category',
      data:xDataArr
    },
    yAxis:{
      type:'value'
    },
    series:[{
      name:'语文',
      type:'bar',
      markPoint:{
        data:[
          {
            type:'max',
            name:'最大值'
          },{
            type:'min',
            name:'最小值'
          }
        ]
      },
      markLine:{
        data:[
          {
            type: 'average',
            name:'平均线'
          }
        ]
      },
      data:yDataArr
    }],
  }
  

• 显示：数值显示 柱宽度 横向柱状图（label、barWidth、对xAxis和yAxis变换）

  label数值显示

  var option={
  					xAxis:{
  						type:'category',
  						data:xDataArr
  					},
  					yAxis:{
  						type:'value'
  					},
  					series:[{
  						name:'语文',
  						type:'bar',
  						label:{
  							show:true
  						},
  						data:yDataArr
  					}],
  				}
  

barWidth柱宽度

var option={
					xAxis:{
						type:'category',
						data:xDataArr
					},
					yAxis:{
						type:'value'
					},
					series:[{
						name:'语文',
						type:'bar',
						barWidth:'30%',
						data:yDataArr
					}],
				}

横向柱状图

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

---

通用配置

所有图表都能使用的配置

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

title 标题

文字样式

testStyle

var option={
					title:{
						text:"语文成绩",
						textStyle:{
							color:"red"
						}
					},
					xAxis:{
						type:'category',
						data:xDataArr
					},
					yAxis:{
						type:'value',
					},
					series:[{
						name:'语文',
						type:'bar',
						data:yDataArr
					}],
				}

标题边框

borderWidth、borderColor、borderRaduis

var option={
					title:{
						text:"语文成绩",
						textStyle:{
							color:"red"
						},
						borderWidth:5,
						borderColor:"green",
						borderRadius:5
					},
					xAxis:{
						type:'category',
						data:xDataArr
					},
					yAxis:{
						type:'value',
					},
					series:[{
						name:'语文',
						type:'bar',
						data:yDataArr
					}],
				}

标题位置

left、top、right、bottom

var option={					title:{						text:"语文成绩",						textStyle:{							color:"red"						},						left:"50%",						top:10					},					xAxis:{						type:'category',						data:xDataArr					},					yAxis:{						type:'value',					},					series:[{						name:'语文',						type:'bar',						data:yDataArr					}],				}

tooltip 提示框

鼠标滑过或者点击时的提示

触发类型

trigger(item、axis)

var option={					tooltip:{						trigger:"item"					},					xAxis:{						type:'category',						data:xDataArr					},					yAxis:{						type:'value',					},					series:[{						name:'语文',						type:'bar',						data:yDataArr					}],				}

触发时机

t riggerOn(mouseover、click)

var option={					tooltip:{						trigger:"item",						triggerOn:"click"					},					xAxis:{						type:'category',						data:xDataArr					},					yAxis:{						type:'value',					},					series:[{						name:'语文',						type:'bar',						data:yDataArr					}],				}

格式化

formatter

var option={					tooltip:{						trigger:"item",						triggerOn:"click",						formatter:"{b} : {c}"            //formatter:function(arg){							//console.log(arg);//是一个对象							//return arg.name+'的分数'+arg.data						}					},					xAxis:{						type:'category',						data:xDataArr					},					yAxis:{						type:'value',					},					series:[{						name:'语文',						type:'bar',						data:yDataArr					}],				}

toolbox 工具栏

Echarts提供的工具栏

内置有五个工具:

• 导出图片
• 数据视图
• 动态类型切换
• 数据区域缩放
• 重置

显示工具栏按钮

feature

只需要在feature对象下面添加属性即可

导出图片

saveAsImage

var option={					toolbox:{						feature:{							saveAsImage:{},//导出图片						}					},					xAxis:{						type:'category',						data:xDataArr					},					yAxis:{						type:'value',					},					series:[{						name:'语文',						type:'bar',						data:yDataArr					}],				}

数据视图

dataView

var option={					toolbox:{						feature:{							saveAsImage:{},//导出图片							dataView:{}//数据视图						}					},					xAxis:{						type:'category',						data:xDataArr					},					yAxis:{						type:'value',					},					series:[{						name:'语文',						type:'bar',						data:yDataArr					}],				}

重置

restore

var option={					toolbox:{						feature:{							saveAsImage:{},//导出图片							dataView:{},//数据视图							restore:{}//重置						}					},					xAxis:{						type:'category',						data:xDataArr					},					yAxis:{						type:'value',					},					series:[{						name:'语文',						type:'bar',						data:yDataArr					}],				}

区域缩放

dataZoom

var option={					toolbox:{						feature:{							saveAsImage:{},//导出图片							dataView:{},//数据视图							restore:{},//重置							dataZoom:{}//区域缩放						}					},					xAxis:{						type:'category',						data:xDataArr					},					yAxis:{						type:'value',					},					series:[{						name:'语文',						type:'bar',						data:yDataArr					}],				}

动态类型切换

magicType

var option={					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 筛选系列

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

多数据使用情况

series:[{						name:'语文',						type:'bar',						data:yDataArr1					},					{						name:'数学',						type:'bar',						data:yDataArr2					}					]

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

对系列筛选

折线图

实现步骤

• 引入js文件
• DOM容器
• 初始化对象
• 设置option
  1. x轴数据：数组1:[‘1’,‘2’,‘3’,‘4’,‘5’,‘6’,‘7’,‘8’,‘9’,‘10’,‘11’,‘12’]
  2. y轴数据:数组2:[3000,2800,900,1000,800,700,1400,1300,900,1000,800,600]
  3. 图表类型:在series下设置type:line

var option={					xAxis:{						type:'category',						data:xDataArr					},					yAxis:{						type:'value',					},					series:[{						name:'康师傅的销量',						type:'line',						data:yDataArr1					}					],				}

常见效果

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

  最大值、最小值(markPoint)

  var option={					xAxis:{						type:'category',						data:xDataArr					},					yAxis:{						type:'value',					},					series:[{						name:'康师傅的销量',						type:'line',						data:yDataArr1,						markPoint:{							data:[{								type:"max"							},{								type:"min"							}]						}					}					],				}
  

平均值(average)

var option={					xAxis:{						type:'category',						data:xDataArr					},					yAxis:{						type:'value',					},					series:[{						name:'康师傅的销量',						type:'line',						data:yDataArr1,						markLine:{							data:[{								type:"average"							}]						}					}					],				}

标注区间(markArea)

var option={					xAxis:{						type:'category',						data:xDataArr					},					yAxis:{						type:'value',					},					series:[{						name:'康师傅的销量',						type:'line',						data:yDataArr1,						markArea:{							data:[								[{									xAxis:'1'								},{									xAxis:'2'								}],								[{									xAxis:'7'								},{									xAxis:'8'								}]															]						}					}					],				}

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

  平滑线条（smooth）

  var option={					xAxis:{						type:'category',						data:xDataArr					},					yAxis:{						type:'value',					},					series:[{						name:'康师傅的销量',						type:'line',						data:yDataArr1,						smooth:true					}					],				}
  

风格(lineStyle)

var option={					xAxis:{						type:'category',						data:xDataArr					},					yAxis:{						type:'value',					},					series:[{						name:'康师傅的销量',						type:'line',						data:yDataArr1,						lineStyle:{							type:"dashed",							color:"green"						}					}					],				}

• 填充风格(areaStyle)

  var option={					xAxis:{						type:'category',						data:xDataArr					},					yAxis:{						type:'value',					},					series:[{						name:'康师傅的销量',						type:'line',						data:yDataArr1,						areaStyle:{}					}					],				}
  

• 紧挨边缘(boundaryGap)

  找x、y轴

  var option={					xAxis:{						type:'category',						data:xDataArr,						boundaryGap: false					},					yAxis:{						type:'value',					},					series:[{						name:'康师傅的销量',						type:'line',						data:yDataArr1,										}					],				}
  

• 脱离0值/支持缩放(scale)

  var option={					xAxis:{						type:'category',						data:xDataArr,					},					yAxis:{						type:'value',						scale:true					},					series:[{						name:'康师傅的销量',						type:'line',						data:yDataArr1,					}					],				}
  

• 堆叠图(stack)

var option={					xAxis:{						type:'category',						data:xDataArr,					},					yAxis:{						type:'value',						scale:true					},					series:[{						name:'康师傅的销量',						type:'line',						data:yDataArr1,						stack:"all"					},{						name:'统一的销量',						type:'line',						data:yDataArr2,						stack:"all"					}					],				}

---

散点图

散点图可以帮助我们推断出变量之间的相关性

**比如：**身高和体重

实现步骤

• x轴和y轴的数据—二维数组

  数组1:[[身高1，体重1],[身高2,体重2]…]

  var myChart = echarts.init(document.getElementById('main'));				var data=[{"gender":"male","height":180.3,"weight":83.2},{"gender":"male","height":179,"weight":75.2},				{"gender":"male","height":181.3,"weight":73.2},{"gender":"male","height":166.5,"weight":93.2},				{"gender":"male","height":180.3,"weight":83.2},{"gender":"male","height":160.3,"weight":54.2}]				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);	 				}				console.log(axisData)				var option={					xAxis:{						type:"value"					},					yAxis:{						type:"value"					},					series:[						{							type:"scatter",							data:axisData						}					]				}
  

常见效果

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

var option={					xAxis:{						type:"value"					},					yAxis:{						type:"value"					},					series:[						{							type:"scatter",							data:axisData,							//symbolSize:20,//散点大小							symbolSize:function(arg){								var height=arg[0]/100;								var weight=arg[1];								//bmi=体重/（身高*身高）								var bmi=weight/(height*height);								if(bmi>28){									return 20;								}else{									return 10;								}							},							itemStyle:{								color:function(arg){									var height=arg.data[0]/100;									var weight=arg.data[1];									//bmi=体重/（身高*身高）									var bmi=weight/(height*height);									if(bmi>28){										return "red";									}else{										return "green";									}								}							}													}					]				}

• 涟漪动画效果(type:‘effectScatter’)

  var option={					xAxis:{						type:"value"					},					yAxis:{						type:"value"					},					series:[						{							type:"effectScatter",              showEffectOn:"emphasis",//鼠标滑过才会有涟漪动画							data:axisData,						}					]				}
  

---

直角坐标系中的常用配置

属于直角坐标系的图表

柱状图 折线图 散点图

三个常用配置项

网格 grid

grid是用来控制直角坐标系的布局和大小的

x轴和y轴就是在grid的基础上进行绘制的

• 显示grid （show）

  var option={					grid:{						show:true					},					xAxis:{						type:"category",						data:["1","2","3","4"]					},					yAxis:{						type:"value"					},					series:[						{							type:"bar",							data:[12,15,17,18,19],						}					]				}
  

• grid边框宽度（borderWidth）

  var option={					grid:{						show:true,						borderWidth:5					},					xAxis:{						type:"category",						data:["1","2","3","4"]					},					yAxis:{						type:"value"					},					series:[						{							type:"bar",							data:[12,15,17,18,19],						}					]				}
  

• grid的位置及大小(left、top、right、bottom/width、height)

坐标轴 axis

坐标轴分为x轴和y轴

• 坐标类型type
  • value：数值轴，自动会从目标数据中读取数据
  • category：类目轴，该类型必须通过data设置类目数据
• 显示位置position（top、left、right、bottom）

区域缩放 dataZoom

dataZoom用于区域缩放，对数据范围过滤，x轴和y轴都可以拥有。

dataZoom是一个数组，意味着可以配置多个区域缩放器

• 类型 type

  • slider：滑块

    var option={					dataZoom:{						type:"slider"					},					xAxis:{						type:"category",						data:["1","2","3","4"]					},					yAxis:{						type:"value"					},					series:[						{							type:"bar",							data:[12,15,17,18,19],						}					]				}
    

• inside：内置，依靠鼠标滚轮或者双指缩放

• 指明产生作用的轴

  • xAxisIndex:设置缩放组件控制的是x轴,一般写0即可
  • yAxisIndex:设置缩放组件控制的是y轴,一般写0即可

  var option={					dataZoom:[{						type:"slider",						xAxisIndex:0					},{						type:"slider",						yAxisIndex:0					}],					xAxis:{						type:"category",						data:["1","2","3","4"]					},					yAxis:{						type:"value"					},					series:[						{							type:"bar",							data:[12,15,17,18,19],						}					]				}
  

• 指明初始状态的缩放情况

start-end开始到结束的初始状态

var option={					dataZoom:[{						type:"slider",						xAxisIndex:0					},{						type:"slider",						yAxisIndex:0,						start:0,						//指的是80%						end:80					}],					xAxis:{						type:"category",						data:["1","2","3","4"]					},					yAxis:{						type:"value"					},					series:[						{							type:"bar",							data:[12,15,17,18,19],						}					]				}

---

饼图

实现步骤

数据准备

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

实现

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

---

常见效果

• 显示数值

  label.formatter

  var option={					series:[{						type:'pie',						data:pieData,						label:{//饼图文字显示							show:true,//显示文字							formatter:function(args){								//决定显示文字内容								return args.name+"平台"+args.value+"元\n"+args.percent+"%";							}						}					}]				}
  

• 圆环

  radius表示半径,数组表示圆环

  var option={					series:[{						type:'pie',						data:pieData,						label:{//饼图文字显示							show:true,//显示文字							formatter:function(args){								//决定显示文字内容								return args.name+"平台"+args.value+"元\n"+args.percent+"%";							}						},						radius:["50%","75%"]					}]				}
  

• 南丁格尔图（半径是不一样的）

  roseType:‘radius’

  var option={					series:[{						type:'pie',						data:pieData,						label:{//饼图文字显示							show:true,//显示文字							formatter:function(args){								//决定显示文字内容								return args.name+"平台"+args.value+"元\n"+args.percent+"%";							}						},						roseType:'radius'					}]				}
  

• 选中效果

  selectedMode 点击设置（选中效果）

  var option={					series:[{						type:'pie',						data:pieData,						label:{//饼图文字显示							show:true,//显示文字							formatter:function(args){								//决定显示文字内容								return args.name+"平台"+args.value+"元\n"+args.percent+"%";							}						},            //选中单个效果偏离原点						//selectedMode:'single'            //选中多个效果偏离原点            selectedMode:'multiple',          	//设置偏移距离            selectedOffset:30					}]				}
  

---

地图

地图图表的使用方式

• 百度地图API

  需要申请百度地图ak

• 矢量地图

  需要准备矢量地图数据

实现步骤

• 准备中国的矢量地图json文件，放到json/map/的目录下

  china.json

• 使用ajax获取china.json

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

• 在回调函数中往echarts全局对象注册地图的json数据

  Charts.registerMap(‘chinaMap’,chinaJson)

• 在geo下设置

  type:‘map’

  Map:‘chinaMap’

var data=[];//地图数据echarts.registerMap('chinaMap', data);			var option = {				geo: {					type: 'map',					map: 'chinaMap',//ChinaMap需要和registerMap中的第一个参数保持一致				}			};			myChart.setOption(option);

教程

---

常用配置

• 缩放|拖动

  roam:true

  var option = {				geo: {					type: 'map',					map: 'chinaMap',//ChinaMap需要和registerMap中的第一个参数保持一致					roam:true,//设置允许缩放和拖动效果				}			};
  

• 名称显示

  label

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

• 初始化缩放比例

  zoom:数值

  var option = {				geo: {					type: 'map',					map: 'chinaMap',//ChinaMap需要和registerMap中的第一个参数保持一致					zoom:2//设置初始化的缩放比例				}			};
  

• 地图中心点

  center:[ x,y ]

  给一个具体坐标，实现中心点为那个坐标

显示空气质量

• 显示基本的中国地图

• 将城市的空气质量数据设置给series

• 将series下的数据和geo关联起来

  geoIndex:0,type:‘map’

• 结合visualMap配合使用

echarts.registerMap('chinaMap', data);			var option = {				geo: {					type: 'map',					map: 'chinaMap',//ChinaMap需要和registerMap中的第一个参数保持一致					label:{						show:true					},					zoom:2,					series:[						{							data:dataWearther,//空气质量的data数据							geoIndex:0,//将空气质量的数据和第0个geo配置关联在一起							type:"map"						}					],					visualMap:{//色彩可视化分布						min:0,						max:100,            inRange:{//设置颜色              color:['white','red']//颜色慢慢过渡到红色            },            calculable:true//出现滑块数据筛选					}				}			};

---

地图和散点图结合

• 给series下增加新的对象

• 准备好散点的数据，设置给新对象的data

• 配置新对象的type

  type:effectScatter

• 让散点图使用地图坐标的系统

  coordinateSystem:‘geo’

• 让涟漪动画的效果更加明显

  rippleEffect:{

  ​ scale:10

  }