最近在用echarts做数据展示，因为需要统计展示的数据极其繁琐，就利用Java在后台将数据封装好直接返回给前台，前台将显示的图片的形式划分成固定的网格，将后台的数据投射在网格上这样就能就能根据后台返回json的数量来控制显示前台显示图表的数量。具体需要引入什么包，在这里就不多讲了，可以在这里下载源码

后台Java代码，这里将所有要在前台显示的数据都进行了封装，画的是一个折线图和柱状图联合显示的一个图形。

@RequestMapping(value = "/getLineChart",method = RequestMethod.GET)

@ResponseBody

public String getLineChart(HttpServletRequest request, HttpSession session) {

Option option = new Option();

option.toolbox().x("right").show(true).

feature(Tool.dataView,

new MagicType(Magic.line, Magic.bar, Magic.pie).show(true), Tool.restore, Tool.saveAsImage,Tool.dataZoom);

option.title("历年变化情况");

option.tooltip().trigger(Trigger.axis);

option.calculable(true);

List xDataList = new ArrayList();

List dDataList = new ArrayList();

xDataList.add("2011");

xDataList.add("2012");

xDataList.add("2013");

dDataList.add(32);

dDataList.add(2);

dDataList.add(12);

int xsize=xDataList.size();

String[] xArray = (String[])xDataList.toArray(new String[xsize]);

int dsize=dDataList.size();

Integer[] dArray = (Integer[])dDataList.toArray(new Integer[dsize]);

CategoryAxis categoryAxis = new CategoryAxis();

categoryAxis.boundaryGap(true);

AxisLabel axisLabel = new AxisLabel();

axisLabel.setRotate(120);

categoryAxis.data(xArray).setAxisLabel(axisLabel);

option.xAxis(categoryAxis);

ValueAxis valueAxis = new ValueAxis();

valueAxis.axisLabel().formatter("{value} 人");

option.yAxis(valueAxis);

Line line1 = new Line();

line1.data(dArray);

line1.markPoint().data(new PointData().type(MarkType.max).name("最大值"),

new PointData().type(MarkType.min).name("最小值"));

ItemStyle colorStyle = new ItemStyle();

colorStyle.normal().color("#E87C25");

Bar bar = new Bar("数据");

bar.setBarWidth(50);

bar.setItemStyle(colorStyle);

bar.data(2, 11, 15, 3);

bar.markPoint().data(new PointData().type(MarkType.max).name("最大值"), new PointData().type(MarkType.min).name("最小值"));

bar.markLine().data(new PointData().type(MarkType.average).name("平均值"));

bar.markPoint();

option.series(line1,bar);

Gson gson = new Gson();

String json = gson.toJson(option);

return json;

}

前台很简单：

$.getJSON('/springMVC/user/getLineChart', function (data) {

console.log(psLineChar);

console.log(data);

psLineChar.setOption(data, true);

psLineChar.hideLoading();

});

显示的效果：