发布时间 : 星期二 文章ECharts使用实例--JAVA更新完毕开始阅读551c6064ba0d4a7303763a83
ECharts图表使用实例(多条折线图)--JAVA
1,关于Echarts
大家可以到这个网址看一下,还是比较详细的。 http://echarts.http://m.wodefanwen.com//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',饼状图是bar legend 这个其实就是有几条折现的类目
Toolbox 图的右上角有个工具条,这些工具条都包含哪些工具 calculable 这个固定的 xAxis x是横轴,是横轴上都有哪些数据 yAxis y是纵轴,是纵轴上有哪些数据,这里用value,会自动计算你的数据的宽度, 然后自行安排最大值,最小值,每一格代表多少值 series 折现节点数据集合。横轴和竖轴的每一格节点数据
结构其实并不复杂,网上有很多实例,弄了很多属性,当然是有用的,但是对于初学者会增加难度,甚至是误导。
然后咱来看看这里面都有哪些数据,折现类目,横轴跨度数据,节点数据。然后把这些数据按察进去就可以了,其他的图形你也可以按照这个思路来。
3,组装数据代码(JAVA)
Map
goption.toolbox().show(true).feature(Tool.mark,Tool.dataView,new
goption.calculable(true);
CategoryAxis categoryAxis = new CategoryAxis(); categoryAxis.axisLabel().formatter(\); categoryAxis.boundaryGap(false);
List
for(Manager manager:managerList){
String createDate=DateUtil.dateToString(startDate, categoryAxis.data(createDate); dateList.add(createDate);
startDate=DateUtil.addDiffDay(startDate, 1);
MagicType(Magic.line, Magic.bar), Tool.restore, Tool.saveAsImage);
for(SzcDic sd:sdlist){ }
GsonOption goption = new GsonOption(); goption.tooltip(Trigger.axis);
sdMap.put(sd.getCreateDate()+\+sd.getMname(), sd);
\);
}
String mname=manager.getMname().trim(); goption.legend().data(mname); Line line = new Line(); for(String d:dateList){ }
goption.series(line);
SzcDic sd=sdMap.get(d+\+mname); if(sd!=null){ }
line.smooth(true).name(mname).data(sd.getAcount());
line.smooth(true).name(mname).data(0);
}else{
goption.xAxis(categoryAxis);
ValueAxis vAxisy = new ValueAxis();
vAxisy.axisLabel().formatter(\篇\); goption.yAxis(vAxisy); ///////////----
model.addAttribute(\,
JSONObject.fromObject(goption.toString()));
这是一个统计后台人员添加文章的篇数,按照开始时间和结束时间查询。所以横轴就是时间,竖轴为篇数,每条折现代表一个管理员。输出结果为json,这样既可以作为ajax使用,直接输出值也是可以的。
4,前台显示
前台也是比较简单的,只要有个div的id为main的,js会输出到这个位置,下边的是echarts的框架,当然,这个前台还有优化的地方,包括增加ajax方式的,都可以。
这样图标就输出。其他的可以用同样思路输出。
要注意的是,java是要有jar包导入的,只有一个,包含有其他图形。 Jar包下载地址:我下载的是2.2.6版本。每个版本稍有不同。
http://mvnrepository.com/artifact/com.github.abel533/ECharts
Api地址
http://git.oschina.net/free/ECharts
不要对api抱有什么幻想,写的很粗糙,看瞎眼睛也看不出多少东西。