百度echarts后台Java封装小实例

╰+攻爆jí腚メ 2022-08-10 00:58 212阅读 0赞

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

后台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();
            });

显示的效果：

![Center][]

**关注我，获取400个的赚钱金点子，轻松开启程序员的副业生涯**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3llcWl1_size_16_color_FFFFFF_t_70][]

[Link 1]: http://download.csdn.net/detail/maoyeqiu/9251127
[Center]: /images/20220731/77cfdac01b67419a8983dac855cce78b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3llcWl1_size_16_color_FFFFFF_t_70]: /images/20220731/e99e48b02fd44b29b773b20848781bac.png