echarts 图表制作初探

fjwangxi

已于 2024-05-31 17:03:51 修改

阅读量771

点赞数 14

分类专栏：高效办公文章标签： echarts javascript

于 2024-05-22 23:29:43 首次发布

本文链接：https://blog.csdn.net/fjwangxi/article/details/139087423

版权

高效办公专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

前言
一、echarts 是什么？
二、使用步骤
二、基本图表
三、常用图表属性
四、满足一般需求的图表
总结

前言

当今工作中，利用数据制作图表是不可避免的。然而，当前多数软件制作图表，一是操作复杂，二是好一点的示例都需要付费。偶然间，发现利用 echarts 经过简单的数据修改就可以生成较好的图表。通过多方查找，网上介绍多数要么过于简单，要么介绍过于详细，不利于多数人应用。本文主要记录自己学习的过程，在方便自己的同时，也希望对大家有所帮助。
　　注：文中示例，除单项介绍外，完全代码复制到文本文件中保存为’html’格式便能运行（前提是同目录内必须放置echarts.js文件）。

一、echarts 是什么？

ECharts 是一款基于 JavaScript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给 Apache 基金会，成为ASF孵化级项目。 2021年1月26日晚，Apache基金会官方宣布ECharts项目正式毕业。1月28日，ECharts 5线上发布会举行。。
　　ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

二、使用步骤

1.引入库

在http文档中引入echarts.js文件，建议将该文档与网页文件在于同一目录（作者存放于网页文件中的"js"文件夹内，下载地址：官网免费下载echarts5.5版
引入代码，放于标签前，代码如下（示例）：

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

2.准备图表容器

通过Id制作图表容器，以便后期引用。示例中设置容器宽度为600px，宽度为400px，为便于查看设置容器背景。
容器准备代码，放于标签内，代码如下（示例）：

<div id = "main" style="width: 600px;height: 400px;background-color: aliceblue;"

3.创建图表对象

通过echarts的init方法创建一个图表对象实例“myChart“，并传入将呈现图表的元素的 ID“main”。。
图表对象创建代码，放于标签内，代码下如（示例）：

<script type="text/javascript">
	var myChart = echarts.init(document.getElementById('main'))
</script>

4.配置图表参数

通过定义一个对象“option”，并为其传入选项，为图表配置相关参数。
配置参数代码，与myChart代码放于同一片断，代码如下（示例）：

var option = {……}

5.传递生成图表参数

通过echarts对象的setOption方法，将图表对象option的参数代码传递给myChart生成想要的图表。
传递生成图表参数代码，与myChart代码放于同一片断，代码如下（示例）：

myChart.SetOption(option)

二、基本图表

通过以上步骤，就能生成一个简单的图表。
代码如下（示例）：

<!DOCTYPE html>
<html>
	<!-- 引入文档 -->
	<script src="echarts.js"></script>
	<head>
		<meta charset="utf-8">
		<title>制作简单图表</title>
		<div id = "main" style="width: 600px;height: 400px;background-color: aliceblue;"
	</head>
	<body>
		<script type="text/javascript">
			/*创建图表对象*/
			var myChart = echarts.init(document.getElementById('main'))
			/*图表参数设置*/
			var option = {
				title:{//设置标题
					text:"我的图表（示例）"
				},
				xAxis:{//设置横坐标
					data:["数据一","数据二","数据三","数据四"]
				},
				yAxis:{},//设置纵坐标
				series:{
					type:'bar',//图表类型含line(折线图)pie（饼图)等
					data:[40,50,80,30]//图表数据
				}
			}
			/*生成图表*/
			myChart.setOption(option)
		</script>
	</body>
</html>

在这里插入图片描述

三、常用图表属性

图表属性，是通过修改option对象的参数代码，来实现相关功能。

1.设置标题（title）

title:{//设置标题
	text:'我的图表（示例）',
	subtext:'图表副标题',
	left:'center',//横向居中，如要距左端位置输入数值
	borderColor:'red',//边框颜色
	borderWidth:1//边框宽度
},

2.设置横（纵）轴（xAxis，yAxis）

xAxis:{//设置横轴
	type:'category',
	name:"X轴名",//轴名
	data:["数据一","数据二","数据三","数据四"],//分段内容数组
},
yAxis:{//设置纵轴
	type:'value',
	name:'y轴名',
	min:0,//最小值
	max:100,//最大值
},

3.设置表格（grid）

此表格，仅指图表中显示对应数据的区域。

grid:{//设置表格
	height:'70%',//表格高度
	width:'70%',//表格宽度
	bottom:'10%'//表格位置
},

4.设置图例（legend）

legend:{//设置图例
	right:5,//横向位置，另left
	top:'center',//纵向位置,另bottom
	data:['销量'],
},

5.设置弹窗（tooltip）

鼠标移动到对应数据时，显示相关内容。（不设置不显示）

tooltip:{//设置弹窗
	show:true,//是否显示,
	trigger:'axis'
},

6.设置数据（series）

通过图表展示数据的设置，决定图表的类型

series:[{//配置数据
	name:'销量',//系列名称,在弹窗、图例应用
	type:'bar',//图表类型含line(折线图)pie（饼图)等
	//barWidth:'50%',//柱状图宽度多组时不能用
	data:[40,50,80,30],//图表数据
	label:{//数据标签
		show:true,//是否显示，默认为false
		borderType: 'solid',//边框线型
		borderColor: 'blue',//边框颜色
		borderWidth: 1,//边框宽必须设置
		padding:2,//边框距文字宽度
		position:'top'//标签位置：left、right、bottom、inside
	}
},
{
	name: '产量',
	type: 'bar',
	data:[60,70,90,50],
	label:{//数据标签
		show:true,//是否显示，默认为false
		position:'top'//标签位置：left、right、bottom、inside
	},
	barGap: '40%',//不同系列柱间距
	barCategoryGap:'50%',//同系列术间距
}
]

四、满足一般需求的图表

通过以上设置，通过更改常用属性，便能满足我们多数日常工作的需要。
具体代码如下：

<!DOCTYPE html>
<html>
	<!-- 引入文档 -->
	<script src="echarts.js"></script>
	<head>
		<meta charset="utf-8">
		<title>制作简单图表</title>
		<div id = "main" style="width: 600px;height: 400px;background-color: aliceblue;"
	</head>
	<body>
		<script type="text/javascript">
			/*创建图表对象*/
			var myChart = echarts.init(document.getElementById('main'))
			/*图表参数设置*/
			var option = {
				title:{//设置标题
					text:'我的图表（示例）',
					subtext:'图表副标题',
					left:'center',//横向居中，如要距左端位置输入数值
					borderColor:'red',//边框颜色
					borderWidth:1//边框宽度
				},
				xAxis:{//设置横轴
					type:'category',//轴类型，分类'category'或值'value'
					name:"X轴名",//轴名
					data:["数据一","数据二","数据三","数据四"],//分段内容数组
				},
				yAxis:{//设置纵轴
				// 	type:'value',
				 	name:'y轴名',
				// 	min:0,//最小值
				// 	max:80,//最大值
				},
				grid:{//设置表格
					show:true,//显示网格，默认不显示
					height:'70%',//表格高度
					width:'70%',//表格宽度
					bottom:'10%'//表格位置
				},
				legend:{//设置图例
					right:10,//横向位置，另left
					top:'center',//纵向位置,另bottom
					orient: "vartical"//排列方向垂直排列，默认为水平（horizontal）
				},
				tooltip:{//设置弹窗
					show:true,//是否显示,
					trigger:'axis'
				},
				series:[{//配置数据
					name:'销量',//系列名称,在弹窗、图例应用
					type:'bar',//图表类型含line(折线图)pie（饼图)等
					//barWidth:'50%',//柱状图宽度多组时不能用
					data:[40,50,80,30],//图表数据
					label:{//数据标签
						show:true,//是否显示，默认为false
						borderType: 'solid',//边框线型
						borderColor: 'blue',//边框颜色
						borderWidth: 1,//边框宽必须设置
						padding:2,//边框距文字宽度
						position:'top'//标签位置：left、right、bottom、inside
					}
				},
				{
					name: '产量',
					type: 'bar',
					data:[60,70,90,50],
					label:{//数据标签
						show:true,//是否显示，默认为false
						position:'top'//标签位置：left、right、bottom、inside
					},
					barGap: '30%',//不同系列柱间距
					barCategoryGap:'30%',//同系列术间距
				}
				]
			}
			/*生成图表*/
			myChart.setOption(option)
		</script>
	</body>
</html>

执行效果如下：

总结

通过学习的深入，发现距离用好echarts还有很长的路要走，后期将继续记录学习心得，以供参考。下面给大家提供一个官网下载地址（完全免费，同时还有十分详细的使用说明）。
echarts.js官方下载地址

fjwangxi

关注

14
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
0
评论
echarts 图表制作初探

当今工作中，利用数据制作图表是不可避免的。然而，当前多数软件制作图表，一是操作复杂，二是好一点的示例都需要付费。偶然间，发现利用echarts经过简单的数据修改就可以生成较好的图表。通过多方查找，网上介绍多数要么过于简单，要么介绍过于详细，不利于多数人应用。本文主要记录自己学习的过程，在方便自己的同时，也希望对大家有所帮助。注：文中示例，除单项介绍外，完全代码复制到文本文件中保存为’html’格式便能运行（前提是同目录内必须放置echarts.js文件）。
复制链接

扫一扫