[课件资料]ECharts使用实例--JAVA

《[课件资料]ECharts使用实例--JAVA》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、ECharts图表使用实例（多条折线图）-JAVA1,关于Echarts大家可以到这个网址看一下，还是比较详细的。httD：//echaHs・baidu・com/doc/cxample・html这个功能还是很强大的，对于喜欢做数据统计来说是美味的。里面也有详尽的api,但是想搞懂，还是太苦涩。通过口己摸索，改良了一下，针对JAVA的，简单易懂多了。此实例只是针对多条折线图來说，其他的并不比这个难。2,多条折线图就是这个熊样的图。Echarts给出的js代码是：option={tooltip:{trigger:'axis'},legend:{data］邮件营

2、销丁联盟广告丁视频广告:直接访问丁搜索引擎】}，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:'category1,boundaryGap:false,data:['周一丁周二周三'，'周四丁

3、周五丁周六:'周日‘]}]，yAxis:[{type:'value'}],series:[{name:'邮件营销；typcflinc',stack:'总量'，data:[120,132,101,134,90,230,210J}，{name:，联盟广告；type:'line',stack:'总量；data:1220,182,191,234,290,330,310]}，{name:视频广告；type:'line',stack:'总量；data:[150,232,201,154,190,330,410]},{name:直接访问;type:'line‘，stack

4、:'总最；data:[320,332,301,334,390,330,320]name:'搜索引擎:typc:'linc',stack:'总量'，data:[820,932,901,934,1290,1330,1320]}1}；请看好这个结构，分别有什么：tooltip图形属于哪一类，比如折线图的标识是’axis，,饼状图是barlegend这个其实就是冇儿条折现的类冃Toolbox图的右上角有个工貝•条，这些工具条都包含哪些工具calculable这个固定的xAxisx是横轴，是横轴上都有哪些数据yAxisy是纵轴，是纵轴上有哪些数据，这里用value,

5、会自动计算你的数据的宽度,然后自行安排最大值，最小值，每一格代表多少值series折现节点数据集合。横轴和竖轴的每一格节点数据结构英实并不复杂，网上有很多实例，弄了很多属性，当然是有用的，但是对于初学者会增加难度，甚至是误导。然示咱来看看这甲而都有哪些数据，折现类目，横轴跨度数据，节点数据。然示把这些数据按察进去就可以了，其他的图形你也可以按照这个思、路来。3,组装数据代码(JAVA)MapsdMap=newHashMap();for(SzcDicsd:sdlist){sdMap.put(sd.g

6、etCreateDate()+,f_H+sci.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=

7、newCategoryAxis();categoryAxis•axisLabel()•formatter(,f{value}n);categoryAxis.boundaryGap(false);Lisring>dateList=newArrayLisString>();for(inti=l;startD*te•before(endDate);i++){StringcreateDate=DateUtil.c/ateToString(startDate,Hyyyy_MM_dcT);categoryAxis.data(createDate);dateList.a

8、dd(createDete);startDate=DateUtil