百度echarts后台Java封装小实例

来源：互联网发布：c语言void什么意思编辑：程序博客网时间：2024/04/23 16:15

最近在用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<String> xDataList = new ArrayList<String>();List<Integer> dDataList = new ArrayList<Integer>();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;    }

前台很简单：

<div style="padding:10px;clear: both;">        <div id="psLine" style="height:300px;width:600px;position:absolute;left:0px;top:450px;"></div>        </div>        $.getJSON('/springMVC/user/getLineChart', function (data) {        console.log(psLineChar);        console.log(data);            psLineChar.setOption(data, true);            psLineChar.hideLoading();        });

显示的效果：

0 0