echarts 学习心得

最近项目组开始用 echarts 做图表，学习要点和其他框架一样：一如既往地看 API，哈哈~~。闲来无事，还是做一个小结吧。

一、echarts 基本的应用

1. echarts 文件引入：

echarts 文件的引入方式有两种。模块化单文件引入、标签式单文件引入。之所以为什么有这两种引入方式，鄙人在 dist 路径下看了下两个文件的大小，模块化引入的 echarts.js 是 300+KB，而标签式引入的 echarts-all.js 文件大小为 900+kb。模块化引入的方式文件小很多，但标签式自然有它的必要性。我们项目中就使用标签式引入的方式，为什么？老师也没说，有时间得问问。

注意：echarts 文件的字符编码是 utf-8，而我们项目中 html 文件的编码是 gb2312。所以，在引入文件的时候，需要设置 charset 属性： chartset="UTF-8"。

2. echarts 图表的初始化和显示：

echarts 对象：在标签式引入的方式中，有 echarts 对象，所有图表的初始化、事件的绑定...等等都通过 echarts 这个对象来处理。

一个简单的 echarts 图表显示总结起来有四步（可参考官网中 demo 的例子：http://echarts.baidu.com/doc/start.html）：

• 准备一个 DOM：

<div id="chartId" style="width: 100px; height: 80px"></div>

这是存放 echarts 图表的 DOM，切记在此需要指定 DO