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

最新推荐文章于 2024-04-28 12:07:40 发布

阿呆攻防

最新推荐文章于 2024-04-28 12:07:40 发布

阅读量2.6k

点赞数 6

分类专栏： echarts 文章标签： echarts 数据可视化可视化 js javascript

本文链接：https://blog.csdn.net/yw99999/article/details/118563987

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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常用图表

柱状图
折线图
散点图
饼图
地图
雷达图
仪表盘图

柱状图

实现步骤

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

}

阿呆攻防

关注

6
点赞
踩
40

收藏

觉得还不错? 一键收藏
打赏
0
评论
echarts数据可视化详解，一篇带你入门数据可视化

echarts数据可视化详解，一篇带你入门数据可视化echarts基本使用echarts常用图表柱状图实现步骤通用配置title 标题文字样式标题边框标题位置tooltip 提示框触发类型触发时机格式化toolbox 工具栏显示工具栏按钮导出图片数据视图重置区域缩放动态类型切换legend 筛选系列对系列筛选折线图实现步骤常见效果散点图实现步骤常见效果直角坐标系中的常用配置属于直角坐标系的图表三个常用配置项网格 grid坐标轴 axis区域缩放 dataZoom饼图实现步骤常见效果地图地图图表的使用方式实现
复制链接

扫一扫