目录
一、认识echarts
1.1、什么是echarts
1.2、echarts的特性
二、体验echarts库
2.1、安装echarts库
2.2、初次使用
三、echarts基础知识
3.1、echarts基础配置
3.2、常见的组件
3.2.1、series组件
3.2.2、tooltip组件
3.2.3、lengend 图例组件
3.2.4、toolbox工具栏
3.2.5、坐标轴
结语:
一、认识echarts
1.1、什么是echarts
echarts是一个使用原生js实现的开源可视化库。它可以在PC端和移动端设备上运行,目前兼容的浏览器有IE8/9/10/11,chrome,Firefox,safari等,其底层依赖于矢量图形库ZRender,为开发者提供了直观,交互丰富,可高度个性化定制的数据可视化图表。
1.2、echarts的特性
echarts提供了常规的折线图,柱状图,散点图,饼图等,用于统计的盒型图,用于地理数据可视化的地图,热力图,线图,用于关系可视化的关系图,treemap,旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。
除了已经内置的包含了丰富功能的图表,echarts还提供了 自定义系列,只需传入一个renderItem函数,就可以从数据映射到任何想要的图形中,
总之,echarts的好处多多,主要有以下六中特性:
- 丰富的图表类型
- 专业的数据分析
- 健康的开源社区
- 强劲的渲染引擎
- 优雅的可视化设计
- 友好的无障碍访问
二、体验echarts库
2.1、安装echarts库
根据官方文档中,为我们提供了四种echarts 安装方式
- 从GItHub 获取
- 从npm 获取
- 从CDN 获取
- 在线定制
一般使用CDN获取使用 ,首先,我们需要在 https://www.jsdelivr.com/package/npm/echarts
中选择dist/echarts.js ,点击保存为echarts.js文件
如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="echarts.js"></script>
<title>ECharts 快速上手</title>
</head>
<body></body>
</html>
2.2、初次使用
绘制一个简单的图表需要先定义具有高和宽的DOM容器,在index.html中写入以下内容。
...
<body>
<!-- 为 ECharts 准备一个宽为 600px,高为 400px 的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
...
然后通过echarts.init()方法初始化一个echarts实例,并通过setOPtion方法生成一个简单的折线图
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="echarts.js"></script>
<title>ECharts 快速上手</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
#main {
margin: 20px;
background-color: rgb(228, 255, 192);
}
</style>
<body>
<!-- 为 ECharts 准备一个宽为 600px,高为 400px 的 DOM -->
<div id="main" style="width:600px;height:400px;"></div>
</body>
<script>
var chartDom = document.getElementById("main");
// 初始化实例对象 echarts.init(dom) 容器;
var myChart = echarts.init(chartDom);
// 指定配置项和数据
var option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: "line",
},
],
};
// 将配置项设置给 echarts 实例对象。
myChart.setOption(option);
</script>
</html>
三、echarts基础知识
一个网页中可以创建多个 ECharts 实例。每个 ECharts 实例中可以创建多个图表和坐标系等等(用 option
来描述)。准备一个 DOM 节点(作为 ECharts 的渲染容器),就可以在上面创建一个 ECharts 实例。每个 ECharts 实例独占一个 DOM 节点。
3.1、echarts基础配置
其中option 相当于存放组件的容器,而在option中的series,xAxis,yAxis都被称之为组件。
echarts中各种内容,都被抽象的称为‘组件’。
在echarts中的组件很多,例如我们可能遇到,xAxis(直角坐标系X轴),yAxis(直角坐标系Y轴)
,grid(直角坐标系底板),angelAxis(极坐标系角度轴),radiusAxis(极坐标系半径轴),polar(极坐标系底板),geo(地理坐标系),dataZoom(数据区缩放组件),visualMap(视觉映射组件),tooltip(提示框组件),toolbox(工具栏组件),series(系列)等。
为便于理解如下图:
在图中右侧的option中声明了各个组件。
3.2、常见的组件
3.2.1、series组件
系列(series)在echarts中指:一组数值以及这些数值映射成的图。‘系列’不仅仅表示数据,也表示数据映射成为的图。所以在一个系列(series)中至少包含一组数值,图表类型,以及(关于这些数据如何映射成图的)参数。
在echarts里的系列数据就是图表的数据内容数组,系列类型就是图表类型,其中,系列类型至少有:line(折线图),bar(柱状图),pie(饼状图),scatter(散点图),graph(关系图),tree(树图)等等。
在series中将type进行修改即可得到想要的图表类型。
series除了data和type外,还有常用的如下:
- series.name 是系列的名字
- series.stack 是数据堆叠,同一类目轴配置相同的stack值后,后一个系列的值会进行堆叠
虽然在每个系列都可以在series中设置数据,数据一条一条的放在series中,但在echarts4之后就开始支持数据集(dateset) 来管理数据
对比如下图:
数据集(dateset)能比较集中地管理相同对象的数据,而不是把它们分散在不同的配置中便于数据的管理
3.2.2、tooltip组件
该组件用于在折线的拐点出出现的提示框组件
tooltip: {
trigger: 'axis'
},
此时的tooltip.trigger="axis" 指的是触发类型,它的值是可选的,包括:
- item:数据项图形触发,主要在散点图,饼图等无类目轴的图表使用
- axis :坐标轴触发,主要在折线图,柱状图等会使用类目轴的图表中使用
- none:不触发组件
3.2.3、lengend 图例组件
lengend.data 是图例的数据数组。如下图
3.2.4、toolbox工具栏
toolbox 工具栏,内置有导出图片(saveAsImage)、数据视图(dataView)、动态类型切换(magicType)、数据区域缩放(dataZoom)、重置(restore)等五个工具
toolbox:{
feature:{
saveAsImage:{}
}
}
toolbox.feature.saveAsImage表示保存为图片形式
3.2.5、坐标轴
很多系列,例如line(折线图)、bar(柱状图)、scatter(散点图)、heatmap(热力图)等等,需要运行在“坐标系”上。坐标系用于布局这些图,以及显示数据的刻度等等。例如echarts总支持这些坐标系:直角坐标系,极坐标系,地理坐标系,单轴坐标系,日历坐标系等。
一个坐标系,可以有多个组件协作完成。以常见的直角坐标系为例。
在echarts中的直角坐标系,有三个重要的组件,分别是:
- xAxis:直角坐标系X轴
- yAxis:直角坐标系Y轴
- grid:直角坐标系网格
直角坐标系网格是定义网格布局、大小和颜色的组件,用于定义直角坐标系整体的布局。
接下来进行演示绘制一个折线图的过程:
想象一下,我们在画画时肯定需要一张纸,在纸上确定好物体的大致位置,然后开始画。所以我们在绘制图表前,肯定需要一个坐标,有了坐标我们才知道折线上的每一个点对应着哪个坐标值。
现在我们准备好如下图所示的一个绘图坐标区域。
option = {
xAxis: {
type: "category",
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周天"],
},
yAxis: {
type: "value",
},
series: [
{
data: [0, 0, 0, 0, 0, 0, 0],
type: "line",
},
],
grid: {
show: true,
},
};
grid:
网格(grid)有几个常见的属性,分别是:
- show 是否显示直角坐标系网格
- left是grid组件离容器左侧的距离
- top是grid组件离容器上侧的距离
- right是grid组件离容器右侧的距离
- bottom 是 grid 组件离容器下侧的距离。
xAxis和yAxis
其中 type 是坐标轴类型,其中有以下几种:
- value 数值轴,适用于连续的数据
- category 类目轴,适用于离散的类目数据
- time 时间轴,适用于连续的时序数据‘
- log 对数轴,适用于对数数据
data 是类目的数据
需要注意的是,它只在类目轴中有效。如果没有设置 type,但是设置了 axis.data,则认为 type 是 'category'。 如果设置了 type 是 'category',但没有设置 axis.data,则 axis.data 的内容会自动从 series.data 中获取。
结语:
博主Echarts组件库专栏正在持续更新中。