【技术分享】More ECharts

人类已经无法阻止ECharts，各种酷炫拽那什么炸天的效果，如果你在做图表相关展示，ECharts你绝对值得拥有！开源、免费还有专职客服专门解答（网上可以搜到一大堆艾特林峰的问题，林峰大大也都知无不言，言无不尽，不过目前林峰大大好像不在熊掌了。。。）
最近折腾ECharts较多，就把折腾的一些问题记录下。对于给我们创造如此美好事物的人儿，我们无以为报，唯有不吝、不羞，多做反馈、分享，大家随意拍砖。。。

1. 入门姿势
搜索＋官方文档是入门的不二之选。

• 参考文档：http://echarts.baidu.com/doc/doc.html
• 实例文档：http://echarts.baidu.com/doc/example.html （友情提醒：抽空多看看专题里面林峰做的那些，相信你会收获更多ECharts的使用姿势的）
• 图说：http://tushuo.baidu.com （方便通过手动设置各种属性，并及时看到效果，同时可以查看对应的代码，可以将调试后的效果ctrl c ＋ v到你自己项目代码里面使用）

2.大小写
大小写！大小写！大小写！重要的事情说三遍。我们主要使用场景，大部分数据都是服务端从Oracle数据库直接读取拼装的，默认情况下数据库返回的列名都是大写的，而ECharts数据格式的属性名都是小写的。一开始没注意这个，很多时候找了半天，明明有属性值，怎么就是不展示呢！！！几近崩溃，后来直接进源码瞅了瞅，才猛然醒悟自己大意了！（大小写问题在Oracle里面，可以类似这样处理：select xx as "name", yy as "value"）

3.地图扩展
官方关于地图扩展的实现方法见这里：http://echarts.baidu.com/doc/doc.html#附录地图扩展
我们使用的别人提供的GIS服务（arcgis），服务接口返回的是json格式的，需要做下转换。网上搜了个转换的开源库Terraformer。废话不多说，上关键代码片段：

    mapDataParams.params.NJTest = {
            getGeoJson : function(callback) {
                var esriUrl = "http://ip:port/arcgis/rest/services/**/query?where=1=1&f=json";
                $.getJSON(esriUrl, function(arcgis) {
                    var FeatureCollection = {
                            type : "FeatureCollection",
                            features : []
                    };
                    for (var i = 0; i < arcgis.features.length; i++) {
                        var feature = Terraformer.ArcGIS.parse(arcgis.features[i]);
                        feature.id = i;
                        //注意大小写
                        feature.properties.name = feature.properties.NAME;
                        FeatureCollection.features.push(feature)
                    }
                    //切记需要把最后处理好的geoJSON格式数据传给默认的callback函数进行渲染
                    callback(FeatureCollection);
                });
            }
    };