Echarts
一.介绍
ECharts,缩写来自 Enterprise Charts,商业级数据图表,是百度的一个开源的数据可视化工具,一个纯 Javascript 的图表库,能够在 PC 端和移动设备上流畅运行,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的 Canvas 库 ZRender,(Zrender是一个二维绘图引擎,它提供了Canvas,SVG,VML等多种渲染方式,Zrender也是Echarts的渲染器。)ECharts 提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。
二.特点
1.丰富的可视化类型
折线图,柱状图,饼状图,k线图,散点图……
2.多种数据的支持
Key-value数据格式 二维表 TypedArray格式 流数据的支持
3.移动端的优化
4.跨平台的使用
5.绚丽的特效
6.三维可视化
三.基本使用
1.下载js文化并引入并
https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js,点击并保存为 echarts.js 文件。
2. 引入 Apache ECharts
3. 绘制一个简单的图表
在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 </head> 之后,添加
4. 然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是完整代码
四.初始化
在 HTML 中定义有宽度和高度的父容器
通常来说,需要在 HTML 中先定义一个 <div> 节点,并且通过 CSS 使得该节点具有宽度和高度。初始化的时候,传入该节点,图表的大小默认即为该节点的大小,除非声明了 opts.width 或 opts.height 将其覆盖。
需要注意的是,使用这种方法在调用 echarts.init 时需保证容器已经有宽度和高度了。
指定图表的大小
如果图表容器不存在宽度和高度,或者,你希望图表宽度和高度不等于容器大小,也可以在初始化的时候指定大小。
五.样式简介
颜色主题(Theme)
ECharts5 除了一贯的默认主题外,还内置了'dark'主题。可以像这样切换成深色模式:
如果主题保存为 JSON 文件,则需要自行加载和注册,例如
如果保存为 UMD 格式的 JS 文件,文件内部已经做了自注册,直接引入 JS 即可:
调色盘
调色盘,可以在 option 中设置。它给定了一组颜色,图形、系列会自动从其中选择颜色。 可以设置全局的调色盘,也可以设置系列自己专属的调色盘
六.数据集
简介
数据集(dataset)是专门用来管理数据的组件。虽然每个系列都可以在 series.data 中设置数据,但是从 ECharts4 支持 数据集 开始,更推荐使用 数据 集 来管理数据。因为这样,数据可以被多个组件复用,也方便进行 “数据和 其他配置” 分离的配置风格。毕竟,在运行时,数据是最常改变的,而其他 配置大多并不会改变
设置数据
在数据集中设置数据也可以使用常见的“对象数组”的格式:
优点
能够贴近数据可视化常见思维方式:(I)提供数据,(II)指定数据到视觉的映射,从而形成图表。
数据和其他配置可以被分离开来。数据常变,其他配置常不变。分开易于分别管理。
数据可以被多个系列或者组件复用,对于大数据量的场景,不必为每个系列创建一份数据。
支持更多的数据的常用格式,例如二维数组、对象数组等,一定程度上避免使用者为了数据格式而进行转换。: