Java实现 echart 数据视图功能
博主在开发项目时，需要完成一个统计销售额的生成视图功能，如图：
即完成商品销售额饼状图，柱状图，以及日交易额
如何实现呢，博主使用的是echart插件来实现，因为后台获取数据博主用的是Java,但这个插件的请求与前端展示用的是js，所以无论是Java，还是PHP，再或者是其他的编程语言，只要能够使用ajax请求到数据，那么这个数据视图就可以用，因此，其具有很好的可移植性。
如何使用PHP来实现数据视图功能，查看博主这一篇博文：
PHP连接MySQL实现柱状图统计
PHP连接MySQL实现饼状图统计
言归正传，那么如何使用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方法进行了封装重写，因此，大家可以根据自己的需要来进行数据库查询的实现，以上便是整个流程
码字不易，给个赞呗！