ECharts与Java进行后台交互入门教程（2）

拼搏现实的明天。 2022-05-18 10:29 236阅读 0赞

# 实现与Java从后台动态取数，生成动态的折线图 #

# #

做成的结果如下

![70][]

### 第一步，我们还是先写前端，还是在上章的HTML修改一些就可以了，废话就不多说了，直接贴代码，注释这些我都写好了的 ###

<!DOCTYPE html>
    <html lang="zh" xmlns:th="http://www.thymeleaf.org"
    	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
    <meta charset="utf-8">
    <head th:include="include :: header"></head>
    
    <body class="gray-bg">
    	<div id="main" style="width: 600px; height: 400px;"></div>
    	<script th:src="@{/js/jquery.min.js}"></script>
    	<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>
    	<script th:src="@{/js/plugins/echarts.js}"></script>
    
    	<script th:inline="javascript">
    		
    		var prefix = "/monitor/operlog"
            // 基于准备好的dom，初始化echarts实例
    		var myChart = echarts.init(document.getElementById('main'));
    		// 显示标题，图例和空的坐标轴
    		myChart.setOption({
    			title : {
    				text : 'ECharts'
    			},
    			tooltip : {
    				show : true
    			},
    			legend : {
    				data : [ '销量' ]
    			},
    			xAxis : {
    				data : []
    			},
    			yAxis : {},
    			series : [ {
    				name : '销量',
    				type : 'line',//图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示，具体类型可进入ECharts官方查找API
    				data : []
    			} ]
    		});
    
    		myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
    
    		var names = []; //类别数组（实际用来盛放X轴坐标值）
    		var nums = []; //销量数组（实际用来盛放Y坐标值）
    
    		$.ajax({
    			type : "post",
    			async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
    			url : prefix + "/discount1", //请求发送到Controller处，路径我上面写好了的，直接拼的，你自己按照你的写
    			data : {},
    			dataType : "json", //返回数据形式为json
    			success : function(result) {
    				//请求成功时执行该函数内容，result即为服务器返回的json对象
    				if (result) {
    					for (var i = 0; i < result.length; i++) {
    						names.push(result[i].name); //挨个取出类别并填入类别数组
    					}
    					for (var i = 0; i < result.length; i++) {
    						nums.push(result[i].num); //挨个取出销量并填入销量数组
    					}
    					myChart.hideLoading(); //隐藏加载动画
    					myChart.setOption({ //加载数据图表
    						xAxis : {
    							data : names
    						},
    						series : [ {
    							// 根据名字对应到相应的系列
    							name : '销量',
    							data : nums
    						} ]
    					});
    
    				}
    
    			},
    			error : function(errorMsg) {
    				//请求失败时执行该函数
    				alert("图表请求数据失败!");
    				myChart.hideLoading();
    			}
    		})
    
    		
    	</script>
    </body>
    </html>

### 第二步、写一个实体类，等下要装数进去，实现有参、无参构造方法，还有get、set方法 ###

public class Product{
    
    	
    	  private String name;    //类别名称
    	    private Integer num;        //销量
    	    
    	    public Product(String name, Integer num) {
    	        this.name = name;
    	        this.num = num;
    	    }
    	    
    	    public String getName() {
    	        return name;
    	    }
    	    public void setName(String name) {
    	        this.name = name;
    	    }
    	    public Integer getNum() {
    	        return num;
    	    }
    	    public void setNum(Integer num) {
    	        this.num = num;
    	    }
    
    		public Product() {
    			super();
    			// TODO Auto-generated constructor stub
    		}
    
    	    
    }

### 第三步、写Controller，实现后台响应 ###

@PostMapping("/discount1")
    	public void selectDiscountChart1(OperLog operLog, Model model,HttpServletRequest request, HttpServletResponse response) throws IOException {
    		
                    //查询数据
    		List<Product> list =  operLogService.selectDiscountChart(operLog);
    		//提供java-json相互转换功能的类
    		ObjectMapper mapper = new ObjectMapper();    
    		//将list中的对象转换为Json格式的数组
    		String json = mapper.writeValueAsString(list);    
    
    		System.out.println(json);
    
    		//将json数据返回给客户端
    		response.setContentType("text/html; charset=utf-8");
    		response.getWriter().write(json);    
    	}

### 第四步、OK，搞定，接下来你打开页面就可以看到动态的数据展示了 ###

![70 1][]

[70]: /images/20220518/c01245cf0f2745fc8f775a4cdf55ec3c.png
[70 1]: /images/20220518/3b88911c7faa44ad82760f97db322189.png