ECharts使用实例--JAVA.doc

精品文档ECharts图表使用实例（多条折线图）-JAVA1，关于Echarts大家可以到这个网址看一下，还是比较详细的。/doc/example.html这个功能还是很强大的，对于喜欢做数据统计来说是美味的。里面也有详尽的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 这个固定的xAxis x是横轴，是横轴上都有哪些数据yAxis y是纵轴，是纵轴上有哪些数据，这里用value，会自动计算你的数据的宽度，然后自行安排最大值，最小值，每一格代表多少值series 折现节点数据集合。横轴和竖轴的每一格节点数据结构其实并不复杂，网上有很多实例，弄了很多属性，当然是有用的，但是对于初学者会增加难度，甚至是误导。然后咱来看看这里面都有哪些数据，折现类目，横轴跨度数据，节点数据。然后把这些数据按察进去就可以了，其他的图形你也可以按照这个思路来。3，组装数据代码（JAVA）Map sdMap=new HashMap();for(SzcDic sd:sdlist)sdMap.put(sd.getCreateDate()+_+sd.getMname(), sd);GsonOption goption = new GsonOption();goption.tooltip(Trigger.axis);goption.toolbox().show(true).feature(Tool.mark,Tool.dataView,new MagicType(Magic.line, Magic.bar), Tool.restore, Tool.saveAsImage);goption.calculable(true);CategoryAxis categoryAxis = new CategoryAxis();categoryAxis.axisLabel().formatter(value);categoryAxis.boundaryGap(false);List dateList=new ArrayList();for(int i=1;startDate.before(endDate);i+)String createDate=DateUtil.dateToString(startDate, yyyy-MM-dd);categoryAxis.data(createDate);dateList.add(createDate);startDate=DateUtil.addDiffDay(startDate, 1);for(Manager manager:managerList)String mname=manager.getMname().trim();goption.legend().data(mname);Line line = new Line();for(String d:dateList)SzcDic sd=sdMap.get(d+_+mname);if(sd!=null)line.smooth(true).name(mname).data(sd.getAcount();elseline.smooth(true).name(mname).data(0);goption.series(line);goption.xAxis(categoryAxis);ValueAxis vAxisy = new ValueAxis();vAxisy.axisLabel().formatter(value篇);goption.yAxis(vAxisy);/-model.addAttribute(opt, JSONObject.fromObject(goption.toString();这是一个统计后台人员添加文章的篇数，按照开始时间和结束时间查询。所以横轴就是时间，竖轴为篇数，每条折现代表一个管理员。输出结果为json，这样既可以作为ajax使用，直接输出值也是可以的。4，前台显示 / 路径配置 require.config( paths: echarts: /build/dist ); / 使用 require( echarts, echarts/chart/line / 使用柱状图就加载bar模块，按需加载 , function (ec) / 基于准备好的dom，初始化echarts图表 var myChart = ec.init(document.getElementById(main); option = $opt; / 为echarts对象加载数据 myChart.setOption(option); ); 前台也是比较简单的，只要有个div的id为main的，js会输出到这个位置，下边的是echarts的框架，当然，这个前台还有优化的地方，包括增加ajax方式的，都可以。这样图标就输出。其他的可以用同样思路输出。要注意的是，java是要有jar包导入的，只有一个，包含有其他图形。Jar包下载地址：我下载的是2.2.6版本。每个版本稍有不同。