ECharts学习路线图

• ECharts

  ECharts(Enterprise CHarts)，商业级数据图表，是百度的一个开源的数据可视化工具，一个纯 Javascript 的图表库，能够在 PC 端和移动设备上流畅运行，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的 Canvas 库 ZRender，ECharts 提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

• 学习资料

  1. ECharts官网
  2. ECharts Github
  3. ECharts官方教程
  4. W3Cschool教程
  5. W3Cschool如何快速上手ECharts

• 相关概念解析

  作为新手，各类教程中提到的一些概念还不太清楚。

  1. Canvas

     前文提到，ECharts底层依赖轻量级的Canvas库ZRender。那什么是Canvas，什么又是ZRender。

     标签是HTML5的新元素，通过使用该元素，你可以在网页中绘制所需的图形。标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API。
     标签只是图形容器，您必须使用脚本来绘制图形。

     详情参见《W3Cschool HTML5教程：Canvas》

  2. ZRender

     ZRender 是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。zrender（Zlevel Render） 是一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型。

     开发团队与ECharts是同一批人。

     Github：ZRender

     ZRender官方文档

  3. npm安装

     npm install echarts是官网提到的一个安装方式。

     npm是随同NodeJS一起安装的包管理工具，类似Python的pip，能解决NodeJS代码部署上的很多问题，常见的使用场景有：

     • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
     • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
     • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

     由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。

     关于npm模块的机制参见《npm 模块安装机制简介》

     那这个nodejs又是什么呢？

  4. Node.js

     Node.js 就是运行在服务端的 JavaScript。

     Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。

     Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎。

     《菜鸟教程：Node.js教程》

  5. cdn

     可以通过cdn引入ECharts。

     CDN(Content Delivery Network)，内容分发网络，也称为内容传送网络。

     CDN网络中包含的功能实体包括内容缓存设备、内容交换机、内容路由器、CDN内容管理系统等组成。

     CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

  6. JavaScript

     综上，离不开JavaScript。

     • 廖雪峰的官方网站：Javascript教程
     • W3Cschool：Javascript教程
     • 菜鸟教程：JavaScript教程