ECharts(Enterprise CHarts),商业级数据图表,是百度的一个开源的数据可视化工具,一个纯 Javascript 的图表库,能够在 PC 端和移动设备上流畅运行,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的 Canvas 库 ZRender,ECharts 提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
(Canvas:标签是HTML5的新元素,通过使用该元素,你可以在网页中绘制所需的图形。标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API。标签只是图形容器,你必须使用脚本来绘制图形。
ZRender:ZRender 是二维绘图引擎,它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。zrender(Zlevel Render) 是一个轻量级的Canvas类库,MVC封装,数据驱动,提供类Dom事件模型。开发团队与ECharts是同一批人。)
特性
丰富的可视化类型
多种数据格式无需转换直接使用
千万数据的前端展现
移动端优化
多渲染方案,跨平台使用
深度的交互式数据探索
多维数据的支持以及丰富的视觉编码手段
动态数据
绚丽的特效
通过 GL 实现更多更强大绚丽的三维可视化
无障碍访问(4.0+)
基础图表所需要的标签:
echarts的图形化呈现主要是通过配置方法来实现的(setOption),然后是对图形标签进行初始化,最后把配置方法(setOption)赋值到初始化图形中
(注意事项:在使用echarts.js的时候一定要配置xAxis,yAxis,series这三个参数,如果是不想设置的话也要初始化可以将其设置为空JSON就可以了,要不然会出项报错,同时要保证在echarts.init之前的对象是有宽高的,要不然也会出现错误)
图表名词
le data-draft-node="block" data-draft-type="table" data-size="normal" data-row-style="normal">echarts.js的优点:
1、容易使用 (echarts.js的官方文档比较详细,而且官网中提供大量的使用示例供大家使用)
2、支持按需求打包 (echarts.js官网提供了在线构建的工具,可以在线构建项目时,选择项目所需要使用到的模块,从而达到减小JS文件的体积 )
3、开源
4、支持中国地图功能
缺点:
1、体积较大 (一个基础的echarts.js都要400K左右)
2、可定制性差(因为这一类型的数据可视化框架主要是高度的进行分装,所以你在使用的时候只需要设置一下配置就可以了,但是如果是出现了要绘制配置中不支持的图表,我们只能放弃,尝试着使用其他的框架了)
它的难度在于它有自己的一套属性,这和我们平时用的css是不同的,因而我们需要什么效果就得去遵守它的属性,去识别图表的各个部分的专业名称,才能从它API中获取相应属性去实现你想要效果