[ECharts] 实现你的第一个可视化图表/常用图表配置

最新推荐文章于 2024-08-13 18:13:57 发布

AI Thabo

最新推荐文章于 2024-08-13 18:13:57 发布

阅读量591

点赞数 2

分类专栏： ECharts 文章标签：数据可视化 js javascript html5 前端

本文链接：https://blog.csdn.net/m0_46470372/article/details/112636799

版权

[ECharts] 实现你的第一个可视化图表/常用图表配置

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。

开始第一个ECharts实例

准备好ECharts源码文件，这里我使用 echarts.min.js，可以到官方网站下载，也可以到github下载

官方网站

GitHub

新建一个html文件，准备一个容器，将echarts源码引入其中(一定要为容器设置宽高)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			#app{
				width:600px;
				height:400px;
			}
		</style>
	</head>
	<body>
		<div id="app"></div>
		<script type="text/javascript">
			// 接下来的代码全部在此处
		</script>
	</body>
</html>

初始化echarts，将其与容器绑定

let e = echarts.init(document.querySelector("#app"));

创建一个配置对象，并将其与echarts实例绑定

let option = {};
e.setOption(option);

准备x轴分类数据，y轴数值数据，这里以成绩为例

let xdata = ["小明","小王","小刚"];
let ydata = [84,65,90];

配置option对象(详见注释)

let option = {
	xAxis:{		// 这里配置的是x轴 也就是横轴数据
		type:"category",	// 分类类型
		data:xdata		// x轴的分类数据 这里每个分类就是每个人
	},
	yAxis:{		// 这里配置的是y轴 也就是纵轴数据
		type:"value"		// 值类型
	},
	series:[	// 这里配置的就是图表中的数据
		{
			name:"数学",	// 名字 后期会有用
			type:"bar",		// 柱状图类型
			data:ydata		// 数据源
		}
	]
};

实例效果

在这里插入图片描述

源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./echarts.min.js" t

最低0.47元/天解锁文章

[ECharts] 实现你的第一个可视化图表/常用图表配置

[ECharts] 实现你的第一个可视化图表/常用图表配置

目录

开始第一个ECharts实例

官方网站

GitHub