ECharts使用实例--JAVA

ECharts图表使用实例（多条折线图）--JAVA1，关于Echarts大家可以到这个网址看一下，还是比较详细的。这个功能还是很强大的，对于喜欢做数据统计来说是美味的。里面也有详尽的api，但是想搞懂，还是太苦涩。通过自己摸索，改良了一下，针对JAVA的，简单易懂多了。此实例只是针对多条折线图来说，其他的并不比这个难。2，多条折线图就是这个熊样的图。Echarts给出的js代码是：option={tooltip:{trigger:'axis'},legend:{data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']},toolbox:{show:true,feature:{mark:{show:true},dataView:{show:true,readOnly:false},magicType:{show:true,type:['line','bar','stack','tiled']},restore:{show:true},saveAsImage:{show:true}}},calculable:true,xAxis:[{type:'category',boundaryGap:false,data:['周一','周二','周三','周四','周五','周六','周日']}],yAxis:[{type:'value'}],series:[{name:'邮件营销',type:'line',stack:'总量',data:[120,132,101,134,90,230,210]},{name:'联盟广告',type:'line',stack:'总量',data:[220,182,191,234,290,330,310]},{name:'视频广告',type:'line',stack:'总量',data:[150,232,201,154,190,330,410]},{name:'直接访问',type:'line',stack:'总量',data:[320,332,301,334,390,330,320]},{name:'搜索引擎',type:'line',stack:'总量',data:[820,932,901,934,1290,1330,1320]}]};请看好这个结构，分别有什么：tooltip图形属于哪一类，比如折线图的标识是'axis'，饼状图是barlegend这个其实就是有几条折现的类目Toolbox图的右上角有个工具条，这些工具条都包含哪些工具calculable这个固定的xAxisx是横轴，是横轴上都有哪些数据yAxisy是纵轴，是纵轴上有哪些数据，这里用value，会自动计算你的数据的宽度，然后自行安排最大值，最小值，每一格代表多少值series折现节点数据集合。横轴和竖轴的每一格节点数据结构其实并不复杂，网上有很多实例，弄了很多属性，当然是有用的，但是对于初学者会增加难度，甚至是误导。然后咱来看看这里面都有哪些数据，折现类目，横轴跨度数据，节点数据。然后把这些数据按察进去就可以了，其他的图形你也可以按照这个思路来。3，组装数据代码（JAVA）MapString,SzcDicsdMap=newHashMapString,SzcDic();for(SzcDicsd:sdlist){sdMap.put(sd.getCreateDate()+_+sd.getMname(),sd);}GsonOptiongoption=newGsonOption();goption.tooltip(Trigger.axis);goption.toolbox().show(true).feature(Tool.mark,Tool.dataView,newMagicType(Magic.line,Magic.bar),Tool.restore,Tool.saveAsImage);goption.calculable(true);CategoryAxiscategoryAxis=newCategoryAxis();categoryAxis.axisLabel().formatter({value});categoryAxis.boundaryGap(false);ListStringdateList=newArrayListString();for(inti=1;startDate.before(endDate);i++){StringcreateDate=DateUtil.dateToString(startDate,yyyy-MM-dd);categoryAxis.data(createDate);dateList.add(createDate);startDate=DateUtil.addDiffDay(startDate,1);}for(Managermanager:managerList){Stringmname=manager.getMname().trim();goption.legend().data(mname);Lineline=newLine();for(Stringd:dateList){SzcDicsd=sdMap.get(d+_+mname);if(sd!=null){line.smooth(true).name(mname).data(sd.getAcount());}else{line.smooth(true).name(mname).data(0);}}goption.series(line);}goption.xAxis(categoryAxis);ValueAxisvAxisy=newValueAxis();vAxisy.axisLabel().formatter({value}篇);goption.yAxis(vAxisy);///////////----model.addAttribute(opt,JSONObject.fromObject(goption.toString()));这是一个统计后台人员添加文章的篇数，按照开始时间和结束时间查询。所以横轴就是时间，竖轴为篇数，每条折现代表一个管理员。输出结果为json，这样既可以作为ajax使用，直接输出值也是可以的。4，前台显示scripttype=text/javascriptsrc=/js/jquery-1.7.1.min.js/scriptscriptsrc==mainstyle=height:400px/divscripttype=text/javascript//路径配置require.config({paths:{echarts:'}});//使用require(['echarts','echarts/chart/line'//使用柱状图就加载bar模块，按需加载],function(ec){//基于准备好的dom，初始化echarts图表varmyChart=ec.init(document.getElementById('main'));option=${opt};//为echarts对象加载数据myChart.setOption(option);});/script前台也是比较简单的，只要有个div的id为main的，js会输出到这个位置，下边的是echarts的框架，当然，这个前台还有优化的地方，包括增加ajax方式的，都可以。这样图标就输出。其他的可以用同样思路输出。要注意的是，java是要有jar包导入的，只有一个，包含有其他图形。Jar包下载地址：我下载的是2.2.6版本。每个版本稍有不同。地址不要对api抱有什么幻想，写的很粗糙，看瞎眼睛也看不出多少东西。