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（图表的核心对象：数据、样式...）：

这里就是定义所需要的图表，echarts 图表编程其实就是写 option ，组织数据、定义样式、各种控件...的显示，看 API 。echarts 就是基于 JSON 对象和数组的，option 对象的各个属性很规范，写一两次就清楚了，至于具体的需求：API ...。

• 加载数据：

chartsObj.setOption(option)。这里说一下，setOption 的开销应该是很大的，不要因为想动态改变图表的数据、样式...而频繁的 setOption。比如，避免在一些类似于 HOVER 事件、或者 toolTIp.formatter 中 setOPtion。

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:[]

}