ECharts 初步入门

ECharts 初步入门

暑假出来实习，在公司的索引组打打杂，被安排去完成一个用图表展示数据的功能，遂学习了echarts的使用方法，记录下来巩固记忆。
1.ECharts是什么
ECharts是一款开源、功能强大的数据可视化产品，使用起来很方便，通过简单的引入和布置就可以显示出很漂亮的图表，而且它提供了相当多的图表类型以及扩展，可以根据要展示的数据选择相应适合的图表类型。下面是这个月在学习和使用中的一些误区，基本的图表显示方法不再赘述，可以参考下面

http://echarts.baidu.com/

这里。
2.ECharts如何和后台(Servlet)交互？
根本问题是在于jsp文件和servlet交互的问题，在这里我们肯定不能使用表单的方式，所以使用了jQuery提供的很方便的ajax来处理

            var arr = null; 
            $.ajax({  
                type : "post",  
                async : false, //同步执行  
                url : "${pageContext.request.contextPath}/echarts/line_data",  
                data : {},  
                dataType : "json", //返回数据形式为json  
                success : function(result) {  
                    if (result) {  
                    /*
                    所需要执行的内容，一般是填充数组后返回给data
                    */
                    }  
                },  
                error : function(errorMsg) {  
                    alert("不好意思，大爷，图表请求数据失败啦!");  
                    myChart.hideLoading();  
                }  

重点在于必须使用同步的方式！因为在ajax中，只有使用同步才可以访问外部的变量。具体的代码我这边不好给出，代码全部在公司的电脑上。
3.echarts事件点击
根据领导的需求，要实现点击地图跳转到省份，参考下面的实现方式

http://echarts.baidu.com/doc/example/map3.html

省份以及地名在echarts内有提供，只需要根据省份和地区对应的代码按要求编写即可。在地图的格式中将mapType设置为China时key直接写中文名如福建。
第二个关于点击事件的需求是点击折线图的折线跳转。这个在echarts文档中的点击事件有详细说明，请参考以下链接

http://echarts.baidu.com/doc/example/event.html

注意事项:
var ecConfig = require('echarts/config');
必须要写在function(ec){}中，具体原因我也不清楚，原来我也是写在全局变量中导致无法加载模块。
4.如何使你的代码稍微简洁
在需求中有根据用户需求点击调整图形，这时需要和后台交互并获得新的参数用来填充数据和x轴。初次使用echarts时并没有概念，导致代码冗余的惊人，只是画了一个7条线的折线图代码量达到惊人的1000多行，虽然大部分是复制粘贴但也是令人很烦躁。后来在网上找到了解决办法，在此记录一下。
(1)使用setOption。最开始用先跑起来的思想指导自己，没有仔细看文档和思考。导致反复复制粘贴，我将在以后工作中重视自己的这个问题并尽量改正。
(2)通过自定义方法和工厂等进行抽取。这是在前台界面的解决办法，可以自定义getOption之类的方法来进行设计。但是我还是感觉不满意，option需要设置的参数太多，需要传入的参数也太多，总的来看还是很冗余。
(3)使用这位开源中国的前辈开发的开源jar 地址如下

http://www.oschina.net/p/echarts-java

使用方法可以移步该处进行学习，主要思想是通过在servlet中处理参数并形成option的json对象，返回给前台option的字符串即可。大大降低了前台页面的代码量，在此感谢您的成果。

最后，本文只是对这个月来使用echarts一些误区进行总结，大部分问题其实都在文档上写的很清楚，养成看仔细看文档的习惯很重要。