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：
这是存放 echarts 图表的 DOM，切记在此需要指定 DOM 的 width 和 height 属性（即官网所说的”具备大小的 DOM“），否则图表不会显示的。
- 初始化图表：
vare chartsObj = echarts.init(document.getElementById(“chartId”));
- 组织 option（图表的核心对象：数据、样式...）：
- 加载数据：
3. 事件的绑定:
chartsObj.on(echarts.config.EVENT.CLICK, function);// 绑定 CILCK 事件
二、echarts 开发中遇到的问题和解决方法：
关于echarts，这段时间主要涉及的是 Map、Map 搭建 TimeLine（时间轴）、markLine、markPoint。这里只说一下应该注意的问题。
- Map
1. dataRange：
具体值域对应具体颜色，可以采用 splitList；具体可以看 dataRange. splitList API
2. map中的数据的组织：
map 基本的数据结构是数组：[{name: "北京", value :"123"}]
每个元素对象的默认属性是name 和value，但是可以向每个对象中添加所需要的数据，例如：
[{name : "北京", value :"123", xzqh_id : "110000", xzqhmc…}]
注意：但是，在事件函数中，自己添加的数据项是保存在参数的data 对象中的，例如：
formatter: function(param) {
varname = param.name;
var value = param.value;
var xzqhid = param.data.xzqh_id;
……
}
3. map浮悬框在指定区域上不显示的实现（其他图表也一样）：
浮悬框是指tooltip，tooltip中有padding（边界宽度） 属性和 formatter（浮悬框内容格式化显示）方法，结合起来可以实现。设置padding 为 0， formatter 返回空串 “”：
padding: 0, // padding 默认值为 4
formatter: function(param) {
// 在此条件下不显示浮悬框
if("条件") {
return"";
}
return"html片段";
}
- Map 搭建 TimeLine（时间轴）
Map 搭建时间轴和其他图表类似。时间轴在 timeLine.data 是时间坐标轴的数据，options 数组是每个坐标对应图表的 option。
注意：timeline.data数组中的数据一定要写成'2014-01-01'格式，然后在label.formatter 中格式化截取，否则在 ie8下坐标轴上的数据显示不正确（比如'2014'就会显示不出来，chrome下会正常显示）。
qg_option= {
timeline:{
data : ['2014-01-01'],
label : {
formatter: function(s){
returns.slice(0, 4);
}
}
},
options:[]
}