介绍了一个基于.net封装的echarts类，今天分享一下：echarts+java封装类实现图表的demo。
1、echarts封装类：
package com.ffcs.wlan.model;
import java.util.ArrayList;
import java.util.List;
public class EchartData {
public List<String> legend = new ArrayList<String>();//数据分组
public List<String> category = new ArrayList<String>();//横坐标
public List<Series> series = new ArrayList<Series>();//纵坐标
public EchartData(List<String> legendList, List<String> categoryList, List<Series> seriesList) {
super();
this.legend = legendList;
this.category = categoryList;
this.series = seriesList;
}
}
package com.ffcs.wlan.model;
import java.util.List;
public class Series {
public String name;
public String type;
public List<Integer> data;//这里要用int 不能用String 不然前台显示不正常（特别是在做数学运算的时候）
public Series( String name, String type, List<Integer> data) {
super();
this.name = name;
this.type = type;
this.data = data;
}
}
上面是Series 类。
2、控制器实现
package com.ffcs.wlan.controller;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.ffcs.wlan.model.EchartData;
import com.ffcs.wlan.model.Series;
@Controller
@RequestMapping("/echarts")
public class EntityController {
private static final Logger logger = LoggerFactory.getLogger(EntityController.class);
@RequestMapping("/line_data")
@ResponseBody
public EchartData lineData() {
logger.info("lineData....");
List<String> legend = new ArrayList<String>(Arrays.asList(new String[]{"最高气温"}));//数据分组
List<String> category = new ArrayList<String>(Arrays.asList(new String []{"周一","周二","周三","周四","周五","周六","周日"}));//横坐标
List<Series> series = new ArrayList<Series>();//纵坐标
series.add(new Series("最高气温", "line",
new ArrayList<Integer>(Arrays.asList(
21,23,28,26,21,33,44))));
EchartData data=new EchartData(legend, category, series);
return data;
}
@RequestMapping("/line_page")
public String linePage() {
logger.info("linePage....");
return "report/line";
}
}
3、jsp页面代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>line</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts2.0/esl.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<script type="text/javascript" language="javascript">
var myChart;
var eCharts;
require.config({
paths : {
'echarts' : '${pageContext.request.contextPath}/js/echarts2.0/echarts' ,
'echarts/chart/line' : '${pageContext.request.contextPath}/js/echarts2.0/echarts' //需要的组件
}
});
require(
[ 'echarts',
'echarts/chart/line'
], DrawEChart //异步加载的回调函数绘制图表
);
//创建ECharts图表方法
function DrawEChart(ec) {
eCharts = ec;
myChart = eCharts.init(document.getElementById('main'));
myChart.showLoading({
text : "图表数据正在努力加载..."
});
//定义图表options
var options = {
title : {
text : "未来一周气温变化",
subtext : "纯属虚构",
sublink : "http://www.111cn.net"
},
tooltip : {
trigger : 'axis'
},
legend : {
data : [ "最高气温" ]
},
toolbox : {
show : true,
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'line', 'bar' ]
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true,
xAxis : [ {
type : 'category',
boundaryGap : false,
data : [ '1', '2', '3', '4', '5', '6', '7' ]
} ],
yAxis : [ {
type : 'value',
axisLabel : {
formatter : '{value} °C'
},
splitArea : {
show : true
}
} ],
grid : {
width : '90%'
},
series : [ {
name : '最高气温',
type : 'line',
data : [ 11, 22, 33, 44, 55, 33, 44 ],//必须是Integer类型的,String计算平均值会出错
markPoint : {
data : [ {
type : 'max',
name : '最大值'
}, {
type : 'min',
name : '最小值'
} ]
},
markLine : {
data : [ {
type : 'average',
name : '平均值'
} ]
}
} ]
};
myChart.setOption(options); //先把可选项注入myChart中
myChart.hideLoading();
getChartData();//aja<a href="/productdesign/bootstrap-small-manage-system-template-ace.html" class="keylink" title="后台管理模板" target="_blank">后台</a>交互
}
</script>
<script type="text/javascript">
function getChartData() {
//获得图表的options对象
var options = myChart.getOption();
//通过Ajax获取数据
$.ajax({
type : "post",
async : false, //同步执行
url : "${pageContext.request.contextPath}/echarts/line_data",
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
options.legend.data = result.legend;
options.xAxis[0].data = result.category;
options.series[0].data = result.series[0].data;
myChart.hideLoading();
myChart.setOption(options);
}
},
error : function(errorMsg) {
alert("不好意思，大爷，图表请求数据失败啦!");
myChart.hideLoading();
}
});
}
</script>
</body>
</html>
注意路径${pageContext.request.contextPath}！