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

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
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值