Java实现 echart 数据视图功能

- 日理万妓 2022-10-23 11:16 204阅读 0赞

博主在开发项目时，需要完成一个统计销售额的生成视图功能，如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70]  
即完成商品销售额饼状图，柱状图，以及日交易额  
如何实现呢，博主使用的是echart插件来实现，因为后台获取数据博主用的是Java,但这个插件的请求与前端展示用的是js，所以无论是Java，还是PHP，再或者是其他的编程语言，只要能够使用ajax请求到数据，那么这个数据视图就可以用，因此，其具有很好的可移植性。  
如何使用PHP来实现数据视图功能，查看博主这一篇博文：

[PHP连接MySQL实现柱状图统计][PHP_MySQL]  
[PHP连接MySQL实现饼状图统计][PHP_MySQL 1]  
言归正传，那么如何使用Java来实现呢，接下来是实现步骤  
这是js代码，博主将其放在了同一个页面中了，因为是ajax请求，所以我们只需要发送请求给Controller即可。

<%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <%@include file="/admin/common.jspf"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>销售视图</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="${basePath}/admin/js/echarts.min.js"></script>
        <script src="${basePath}/admin/js/jquery-3.4.1.min.js"></script>
    </head>
    <body>
    	<table>
    		<tr>
    			<td><div>
    					<div id="chartmain" style="width: 600px; height: 350px;"></div></td>
    			<td><div id="main1"
    					style="height: 350px; width:800px; padding: 20px"></div></td>
    		</tr>
    		<tr>
    			<td colspan=2>
    					<div id="main" style="height: 350px"></div>
    			</td>
    		</tr>
    	</table>
    </body>
    <script type="text/javascript">
    		var date = []; //日期
    		var number = []; //数量
    		var names ="销售额"; //名字
    		$.ajax({ 
    			type : "get",
    			url : "${basePath}/OrderServlet?action=findViewTime", //请求
    			dataType : "json", //返回数据形式为json
    			success : function(result) { 
    				//请求成功时执行该函数内容，result即为服务器返回的json对象
    				$.each(result, function(index, item) { 
    					date.push(item.buytime);
    					number.push(item.t);
    					//names.push("用户");
    				});				
    				// 基于准备好的dom，初始化echarts实例
    				var myChart = echarts.init(document.getElementById('main1'));
    				// 指定图表的配置项和数据
    				var option = { 
    					title : { 
    						text : names[0]
    					},
    					xAxis : { 
    						name : '日期',
    						type : 'category',
    						data : date
    					},
    					yAxis : { 
     
    						name : '数量',
    						type : 'value'
    					},
    					series : [ { 
    						data : number,
    						type : 'line'
    					} ]
    				};
    				//加载echarts
    				myChart.setOption(option);
    			}
    		})
    	</script>
    <script type="text/javascript">
        //初始化echarts
        function chushihua(myChart){ 
            var option = { 
                title:{ 
                    text:'汽车商城系统数据统计(万元)'
                },            
                series:[{ 
                    name:'访问量',
                    type:'pie', 
                    radius:'90%', 
                    data:[
                        { value:0,name:'无'},
                    ]
                }]
            };
    
            myChart.setOption(option);   
        }
    
        //从数据库读取数据赋值给echarts
        function fuzhi(myChart){ 
            $.ajax({ 
                contentType : "application/json",
                type : "POST",
                url : "${basePath}/OrderServlet?action=findView",
                dataType : "json",
                success : function(data) { 
                    //创建一个数组，用来装对象传给series.data，因为series.data里面不能直接鞋for循环
                    var servicedata=[];
    
                    for(var i=0;i<data.length;i++){ 
                        var obj=new Object();
                        obj.name=data[i].aname; 
                        obj.value=data[i].t;
                        servicedata[i]=obj;
                    }
    
                    myChart.setOption({ 
                        title:{ 
                        text:'汽车商城销售额统计'
                        },            
                        series:[{ 
                            name:'销售额',
                            type:'pie', 
                            radius:'65%', 
                            data:servicedata
                        }]
    					
                    });
    
                }
            });
        }
    
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('chartmain'));
        chushihua(myChart);
        fuzhi(myChart);    
    
    </script>
    	
        <script type="text/javascript">
                  var  myChart = echarts.init(document.getElementById('main'));
                  var arr1=[],arr2=[];
                  function arrTest(){ 
                    $.ajax({ 
                      type:"post",
                      async:false,
                      url:"${basePath}/OrderServlet?action=findView",
                      data:{ },
                      dataType:"json",
                      success:function(result){ 
                        if (result) { 
                          for (var i = 0; i < result.length; i++) { 
                              arr1.push(result[i].aname);
                              arr2.push(result[i].t);
                          }
                        }
                      }
                    })
                    return arr1,arr2;
                  }
                  arrTest();
                  var  option = { 
                        tooltip: { 
                            show: true
                        },
                        legend: { 
                           data:['age']
                        },
                        xAxis : [
                            { 
                                type : 'category',
                                data : arr1
                            }
                        ],
                        yAxis : [
                            { 
                                type : 'value'
                            }
                        ],
                        series : [
                            { 
                                "name":"消费金额",
                                "type":"bar",
                                "data":arr2
                            }
                        ]
                    };
                    // 为echarts对象加载数据
                    myChart.setOption(option);
                // }
        </script>
    </body>

接下来，就要接受ajax发送来的请求：

private void findViewTime(HttpServletRequest request,
    			HttpServletResponse response) throws IOException { 
    		// TODO Auto-generated method stub
    		PrintWriter out=response.getWriter();
    		List<Orders> orders=orderservice.getOrderViewTime();
    		String jsonString=JsonUtil.ObjectRoJsonString(orders);
    		System.out.println(jsonString);
    		out.write(jsonString);
    		out.flush();
    		out.close();
    	}
    
    	private void findView(HttpServletRequest request,
    			HttpServletResponse response) throws IOException { 
    		// TODO Auto-generated method stub
    		PrintWriter out=response.getWriter();
    		List<Orders> orders=orderservice.getOrderView();
    		String jsonString=JsonUtil.ObjectRoJsonString(orders);
    		System.out.println(jsonString);
    		out.write(jsonString);
    		out.flush();
    		out.close();
    		
    	}

之后便是去获取数据库里面的信息了

public List<Orders> getOrderView(){ 
    		String sql="select car.name as aname,SUM(car.price*orders.sum)as t from orders inner join car on orders.autoid=car.id group by car.id";
    		List orders=null;
    		try { 
    			orders=dbutil.getQueryList(Orders.class, sql, null);
    		} catch (Exception e) { 
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}
    		return orders;
    		
    	}
    	public List<Orders> getOrderViewTime(){ 
    		String sql="select DATE_FORMAT(buytime,'%Y-%m-%d') buytime,SUM(car.price*orders.sum)as t from orders inner join car on orders.autoid=car.id group by DATE_FORMAT(buytime,'%Y-%m-%d')";
    		List orders=null;
    		try { 
    			orders=dbutil.getQueryList(Orders.class, sql, null);
    		} catch (Exception e) { 
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}
    		return orders;
    		
    	}

当然，博主在这里将数据库的CURD方法进行了封装重写，因此，大家可以根据自己的需要来进行数据库查询的实现，以上便是整个流程

码字不易，给个赞呗！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70]: /images/20221023/dc4b47e46d8b468c95297c97c6e2ee26.png
[PHP_MySQL]: https://blog.csdn.net/pengxiang1998/article/details/103945489
[PHP_MySQL 1]: https://blog.csdn.net/pengxiang1998/article/details/104105951