使用Java语言画EChats图表

最近公司提出要重新设计网站，写一个报告，用于打印各种统计图标的报告。决定用echats做各种图标，由于web开发使用的是spring mvc框架，直接把图表写在js里又不好传递各种复杂数据，只好使用echats的java类库把图标组装好并填好数据再通过控制器传到前端页面直接展示。所有图表都是类似写法，主要是数据的填装。

由于官方并没有java类库的封装，所以有些java类库并没有一些复杂图表的封装，这时我们其实也可以自己组装需要的json字符串使用，以下图表为例：

画仪表盘图

画折线图

画单柱状图

画多柱状图

画条形堆积图

画平行坐标轴图自己组装json字符串

下载jar包

http://git.oschina.net/free/ECharts

百度ECharts地址

http://echarts.baidu.com/

java类库维护者

http://blog.csdn.net/isea533/article/details/43225717

对象转为字符串要依赖gson，如果不转也可不用

画仪表盘图

option = new GsonOption();
//tooltip
option.tooltip().formatter("{a} <br/>{b} : {c}%");
//series
Gauge gauge = new Gauge();
Detail detail = new Detail();
detail.formatter("{value}%");
MapData data = new MapData("指数值", 50);
gauge.name("指数值").detail(detail).data(data);
option.series(gauge);

画折线图

option = new GsonOption();
//title
option.title().setText("折线图");
//tooltip
option.tooltip().trigger(Trigger.axis);
//legend
option.legend().setData(legendList);
//grid
Grid grid = new Grid();
grid.setLeft("3%");
grid.setRight("4%");
grid.setBottom("3%");
grid.setContainLabel(true);
option.setGrid(grid);
//xAxis
CategoryAxis xAxis = new CategoryAxis();
xAxis.setBoundaryGap(false);
xAxis.setData(xAxisData);
option.xAxis(xAxis);//设置X轴变量
//yAxis
ValueAxis yAxis = new ValueAxis();
option.yAxis(yAxis);
//series
List<Series> series = new ArrayList<>();
for (int i = 0; i < legendList.size(); i++) {
Line line = new Line();
line.setName((String) legendList.get(i));
line.setStack("总量");
line.setData(data.get(i));
series.add(line);
}
option.setSeries(series);

画单柱状图

option = new GsonOption();
//title
option.title().setText("邮件营销统计  ");
//color
option.color("#3398DB");
//tooltip
option.tooltip().trigger(Trigger.axis);
option.tooltip().axisPointer().type(PointerType.shadow);
//grid
Grid grid = new Grid();
grid.setLeft("3%");
grid.setRight("4%");
grid.setBottom("3%");
grid.setContainLabel(true);
option.setGrid(grid);
//xAxis
CategoryAxis xAxis = new CategoryAxis();
xAxis.setData(xAxisData);
option.xAxis(xAxis);
//yAxis
ValueAxis yAxis = new ValueAxis();
option.yAxis(yAxis);
//series
Bar bar = new Bar();
bar.setName((String) legendList.get(0));
bar.setBarWidth(60);
bar.setData(data.get(0));
option.series(bar);

画多柱状图

option = new GsonOption();
//title
option.title().setText("营销方案");
option.title().setSubtext("随机数据");
//tooltip
option.tooltip().trigger(Trigger.axis);
option.tooltip().axisPointer().type(PointerType.shadow);
//legend
option.legend().setData(barsLegendList);
//grid
Grid grid = new Grid();
grid.setLeft("3%");
grid.setRight("4%");
grid.setBottom("3%");
grid.setContainLabel(true);
option.setGrid(grid);
//yAxis
ValueAxis yAxis = new ValueAxis();
yAxis.boundaryGap(0, 0.01);
option.yAxis(yAxis);
//xAxis
CategoryAxis xAxis = new CategoryAxis();
xAxis.setData(xAxisData);
option.xAxis(xAxis);
//series
List<Series> series = new ArrayList<>();
for (int i = 0; i < barsLegendList.size(); i++) {
Bar bar = new Bar();
bar.setName((String) barsLegendList.get(i));
bar.setData(barsData.get(i));
series.add(bar);
}
option.setSeries(series);

画条形堆积图

option = new GsonOption();
//tooltip
option.tooltip().trigger(Trigger.axis);
option.tooltip().axisPointer().type(PointerType.shadow);
//legend
option.legend().setData(legendList);
//grid
Grid grid = new Grid();
grid.setLeft("3%");
grid.setRight("4%");
grid.setBottom("3%");
grid.setContainLabel(true);
option.setGrid(grid);
//xAxis
option.xAxis(new ValueAxis());
//yAxis
CategoryAxis yAxis = new CategoryAxis();
yAxis.setData(xAxisData);
option.yAxis(yAxis);
//series
List<Series> series = new ArrayList<>();
for (int i = 0; i < legendList.size(); i++) {
Bar bar = new Bar();
bar.setName((String) legendList.get(i));
bar.setStack("总量");
ItemStyle lable = new ItemStyle();
lable.normal().show(true);
bar.label(lable);
bar.setData(data.get(i));
series.add(bar);
}
option.setSeries(series);

画平行坐标轴图（自己组装json字符串）

JSONObject stackedOption = new JSONObject();
try {
//legend
JSONObject legend = new JSONObject();
//legend里面的data
JSONArray data = new JSONArray();
for (Object s : legendList) {
data.put(s);
}
legend.put("data", data);
stackedOption.put("legend", legend);
//parallelAxis
JSONArray parallelAxis = new JSONArray();
for (int i = 0; i < barsLegendList.size() + 1; i++) {
JSONObject temp = new JSONObject();
temp.put("dim", i);
if (i < barsLegendList.size()) {
temp.put("name", barsLegendList.get(i));
} else {
temp.put("name", "日期");
temp.put("inverse", true);
temp.put("type", AxisType.category);
JSONArray dataJson = new JSONArray();
for (int j = 0; j < xAxisData.size(); j++) {
dataJson.put(xAxisData.get(j));
}
temp.put("data", dataJson);
}
parallelAxis.put(temp);
}
stackedOption.put("parallelAxis", parallelAxis);
//parallel
JSONObject parallel = new JSONObject();
parallel.put("left", "13%");
parallel.put("top", "20%");
stackedOption.put("parallel", parallel);
//series
JSONArray series = new JSONArray();
for (int i = 0; i < legendList.size(); i++) {
JSONObject temp1 = new JSONObject();
temp1.put("name", legendList.get(i));
temp1.put("type", "parallel");
JSONArray dataA = new JSONArray();
for (int j = 0; j < xAxisData.size(); j++) {
JSONArray dataATemp = new JSONArray();
for (int k = 0; k < barsLegendList.size(); k++) {
int rand = (int) (Math.random() * 60);//0-60随机数
dataATemp.put(rand);
}
dataATemp.put(xAxisData.get(j));
dataA.put(dataATemp);
}
temp1.put("data", dataA);
series.put(temp1);
}
stackedOption.put("series", series);
} catch (JSONException e) {
e.printStackTrace();
}

源码下载