使用Echarts制作图表基础教程

在我们前端开发的过程中，会涉及到很多图表，如果用源生的js和css3制作的话，需要耗费大量的时间，同时代码量需求也比较大，那么我们在开发的过程中讲究的是效率，如果单单在制作图表的过程中就耗费了大量的时间，那么就没有什么效率可讲了，所以在这时候就需要用到我们的图表设计绘制工具：ECharts。
ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
ECharts的主要作用就是能够帮助我们快速制作图表，提高我们的开发效率。其主要的原因是ECharts早已把各种各样的图表封装在内，而我们要使用的话直接引用即可。

那么，接下来就教大家如何使用Echarts来制作图表。
既然作为已经封装好的图表文件，那么我们在使用之前就必须把封装好地文件引进来，引入的方法也是和js文件引入是一样的

引进文件之后我们则需要为 ECharts 准备一个具备高宽的 dom 容器。为什么要准备dom容器？打个比方，比如说我们在绘画的时候需要要准备一个画板才能进行绘画，如果没有画板，那么就绘画不了，所以呢，ECharts也是同样的道理。

然后建一个js文件来制作我们的ECharts图表，建好文件之后一定要初始化Echarts。

接下来的步骤就与ECharts网站来结合使用，刚刚也有提及，ECharts早已把各种各样的图表封装在内，所以我们需要什么图表就可以在ECharts网站上查看，需要哪种就引用哪种图表即可。
教程如下：
首先，我们打开ECharts网站，由于我这个是ECharts3相对于版本可能比较低，所以内容可能和别的版本有所差别，但基本用法都无多大差别。

打开网站之后我们点开实例，可以看到这里面有很多图表例子，这些例子都是可以供我们使用的，那么接下来我们就做一个简单的饼状图，首先点开左边的饼图。

点开饼图之后我们可以发现里面有各式各样的例子可以供我们使用，那么我们点击第一个。

点进去之后它就可以自动生成代码和图片。

这时候只有稍微修改一下里面的代码就可以实现我们想要的效果了。
修改好之后就可以把代码复制到我们的刚刚建好的js里面。

把代码放进去之后一定要在最后面使用刚刚修改好的配置和数据来显示图表。
代码写好之后来到页面上刷新。

就这样，我们用ECharts成功地做出来了一个图表。