手记

【技术分享】More ECharts

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

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

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);
                });
            }
    };
24人推荐
随时随地看视频
慕课网APP