EChrats-图表

说到接触到ECharts（JavaScripts图标库），是由于朋友的公司在开发的时候，用到了这个图表的功能，而在工作当中制作这种图表的功能也是很常见的，那么我们接下来，我们去学习学习一下它。

一、ECharts介绍

Echarts,它是一个JavaScript图标库，底层是依赖Canvas类库ZRender实现的，可以流畅的在移动端和PC端使用，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

除此之外,ECharts还有很多特性

 

它拥有丰富图表类型：比如 折线图、柱状图、地图、饼图、热力图、日历图等等，也

 

移动端的优化：在大量的移动端的用户下，ECharts也将移动端的功能进行了优化，流量珍贵的移动端需要图表库的体积尽量小。ECharts 和 ZRender 代码的重构，带来了核心部分体积的减小。

 

绚丽的特效：ECharts 针对线数据，点数据等地理数据的可视化提供了吸引眼球的特效

 

 

ECharts还有很多特性还有很多的特性，如果感兴趣可以去官网查询

官网地址：http://echarts.baidu.com

二、教程

在开发中有的时候需要进行统计数据，对于单页面应用（single page application），统计后台返回的JSON数据，以图表的形式展示，也是很常见的，那么我们以一个柱形图统计表作为本次的案例。

 

 

一、获取ECharts

你可以通过以下几种方式获取 ECharts。

①从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。

②在 ECharts 的 GitHub 上下载最新的 release 版本，解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。

③通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”

④ cdn 引入，你可以在 cdnjs，npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本。

我们去百度静态库获取：地址：http://cdn.code.baidu.com/

 

 

二、引入 ECharts

ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。

    

 id="main" style="width: 600px;height:400px;">

三、绘制图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

    

 id="main" style="width: 600px;height:400px;">