实现数据库数据可视化操作
今天用IDEA实现了从数据库查询数据的可视化图表，从layui找到了模板，根据官方文档和百度解决了一些格式等或者乱码问题。他是使用ajax实现的，在script中使用ajax的url属性选中要穿到的文件，如果使用dopost/doget方法就直接写文件名即可，如果是servlet中的某个方法，则写成：
url:"chartSearch？method=(你的函数名)",
如果需要传值则使用data属性：
data:{"key",value},
其他的看代码吧！
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<title>Title</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
$.ajax({
type: "post",
url:"chartSearch",
data:{"1":1,"2":2},
dataType:"json",
async:true,
cache:false,
success:function (data) {
// 指定图表的配置项和数据
let xxx=[];
let yyy=[];
for(let i=0;i<data.length;i++){
xxx.push(data[i].shangpin);
yyy.push(data[i].xiaoliang)
}
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:["caoni"]
},
xAxis: {
data: xxx
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: yyy
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
error:function () {
alert("生成图表出错")
}
})
</script>
</body>
<script></script>
</html>
servlet层：
package servlet;
import com.google.gson.Gson;
import dao.docSearch;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
import java.util.Map;
@WebServlet("/chartSearch")
public class chartSearch extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
String a=req.getParameter("1");
String b=req.getParameter("2");
System.out.println(a+b);
docSearch docSearch = new docSearch();
List<Map<String, Object>> list = docSearch.chartLook();
Gson gson = new Gson();
String json = gson.toJson(list);
System.out.println(json);
resp.getWriter().write(json);
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
}
jdbc驱动就不写了，使用自己的工具类即可。
效果图：
至于
tooltip之类的属性，可以查看官方文档，他是一个浮动框，鼠标放上去之后显示数据等等。
