实现数据库数据可视化操作
今天⽤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>
jquery实现ajax
<title>Title</title>
</head>
<body>
<!-- 为ECharts准备⼀个具备⼤⼩（宽⾼）的Dom -->
<div id="main" ></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.ElementById('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;
le.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 Parameter("1");
String Parameter("2");
System.out.println(a+b);
docSearch docSearch = new docSearch();
List<Map<String, Object>> list = docSearch.chartLook();
Gson gson = new Gson();
String json = Json(list);
System.out.println(json);
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        doPost(req, resp);
}
}
jdbc驱动就不写了，使⽤⾃⼰的⼯具类即可。
效果图：
⾄于
tooltip之类的属性，可以查看官⽅⽂档，他是⼀个浮动框，⿏标放上去之后显⽰数据等等。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。