【ECharts】echarts数据化图表入门级教程（附10个案例）

最新推荐文章于 2025-04-18 17:22:49 发布

前端小媛

最新推荐文章于 2025-04-18 17:22:49 发布

阅读量1w

点赞数 7

分类专栏：数据可视化文章标签： echarts 前端 javascript vue.js 前端框架

本文链接：https://blog.csdn.net/qq_59012240/article/details/127559026

版权

echarts数据化图表入门级教程（附10个案例）

01-Echarts-介绍

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

简单来说

作用：展示图表的（大数据可视化）
百度，捐给Apache 免费开源
竞品
- heightCharts
- D3

Apache ECharts，一个基于 JavaScript 的开源可视化图表库
官网地址

02-使用

步骤1：下载并引入echarts.js文件

在这里插入图片描述

步骤2：准备一个具备大小的DOM容器

在这里插入图片描述

步骤3：初始化echarts实例对象

在这里插入图片描述

步骤4：指定配置项和数据(option)

在这里插入图片描述

步骤5：将配置项设置给echarts实例对象

在这里插入图片描述

03-Echarts-基础配置

在这里插入图片描述

需要了解的主要配置：series xAxis yAxis grid tooltip title legend color

series
- 系列列表。每个系列通过 type 决定自己的图表类型
- 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
xAxis：直角坐标系 grid 中的 x 轴
- boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
yAxis：直角坐标系 grid 中的 y 轴
grid：直角坐标系内绘图网格。
title：标题组件
tooltip：提示框组件
legend：图例组件
color：调色盘颜色列表

数据堆叠，同个类目轴上系列配置相同的stack值后后一个系列的值会在前一个系列的值上相加。

04-ECharts官网使用

记住网址所在 https://echarts.apache.org/zh/index.html
入门示例（helloword）https://echarts.apache.org/handbook/zh/get-started/
类的方法

在这里插入图片描述

实例的方法

在这里插入图片描述

动作与事件

在这里插入图片描述

选项配置option如何修改

在这里插入图片描述

05-简单案例

demo1

运用知识点

里面涉及的单词	document文档
Option选项	data数据
type类型	bar条（柱状条）
chart图表	set设置
series系列（数据）	Axis轴线
xAxis水平轴线	legend传奇（图例）
tooltip 提示	init初始化

实现效果

在这里插入图片描述

代码

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 01 导入js -->
		<script src="js/echarts.min.js"></script>
		<!-- 03 设置容器的样式 -->
		<style>
			#container{
     
				width: 800px;
				height: 600px;
			}
		</style>
	</head>
	<body>
		<!-- 02 创建个容器 -->
		<div id="container"></div>
	</body>

	<script>
		//04 实例化echarts
		// 4.1 创建一个实例
		var echart = echarts.init(document.getElementById("container"))
		// 4.2 定义配置项
		var option = {
   
			// 图表的标题
			title:{
   
				text:"我的第一个图表"
			},
			// 图表的提示
			tooltip:{
   },
			// 图例
			legend:{
   data:["睡眠时长"]},
			// x轴线
			xAxis:{
   data:["周一","周二","周三","周四","周五","周六","周日"]},
			// y轴线
			yAxis:{
   },
			// 设置数据
			series:[
				{
   
					// 数据名称
					name:"睡眠时长",
					// 类型为柱状图
					type:"bar",
					// 数据data
					data:[8,10,4,5,9,4,8]
					}
			]
		}
		// 4.3 更新配置
		echart.setOption(option);
		
	</script>

demo2

实现效果

在这里插入图片描述

代码

<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 01 导入js -->
		<script src="js/echarts.min.js"></script>
		<!-- 03 设置容器的样式 -->
		<style>
			#container{
     
				width: 800px;
				height: 600px;
			}
		</style>
	</head>
	<body>
		<!-- 02 创建个容器 -->
		<div id="container"></div>
	</body>

	<script>
		//04 实例化echarts
		// 4.1 创建一个实例
		var echart = echarts.init(document.getElementById("container"))
		// 4.2 定义配置项
		var option = {
   
			// 图表的标题
			title:{
   
				text:"我的第一个图表"
			},
			// 图表的提示
			tooltip:{
   },
			// 图例
			legend:{
   data:["睡眠时长","玩游戏时长","上课时长"]},
			// x轴线
			xAxis:{
   data:["周一","周二","周三","周四","周五","周六","周日"]},
			// y轴线
			yAxis:{
   },
			// 设置数据
			series:[
				{
   
					// 数据名称
					name:"睡眠时长",
					// 类型为柱状图
					type:"bar",
					// 数据data
					data:[8,10,4,5,9,4,8]
				},
				{
   
					// 数据名称
					name:"玩游戏时长",
					// 类型为柱状图
					type:"line",
					// 数据data
					data:[2,4,1,5,6,8,5]
				},
				{
   
					// 数据名称
					name:"上课时长",
					// 类型为柱状图
					type:"line",
					smooth:true,
					// 数据data
					data:[6,7,5,8,6,1,0],
					areaStyle:"#f70"
				},
				{
   
					name:"成绩",
					// 饼形图
					type:"pie",
					// radius:80,
					// 半径
					radius:[80,50],
					// 位移
					left:-80,
					top:-270,
					// 数据
					data:[
						{
   name:"js",value:90},
						{
   name:"html",value:85},
						{
   name:"jq",value:90},
						{
   name:"vue",value:50},
					]
				}
			]
		}
		//  更新配置
		echart.setOption(option);
	</script>

demo3

实现效果

在这里插入图片描述

代码

去官网——主题构建工具下载js的就行，然后引入

在这里插入图片描述

<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 01 导入js -->
		<script src="js/echarts.min.js

最低0.47元/天解锁文章