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