比如我dao层里操作数据库得到了一个int a=8,我如何在Echarts里面使用它啊,该如何连接?能给个靠谱的源码吗?萌新求教
后台将数据返回到前端 , 前端接收之后将数据传递给Echarts的函数就可以了啊
通过ajax返回js放到var a={}数组里面,然后放到data里面,或者直接放到title下的text里面就行了
//先定义一个返回对象
public class Result {
//0:成功/1:失败
private Integer code = 0;
private Object content;
//get set
}
@PostMapping(value = "searchEchartData", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
public Result searchEchartData(){
Integer data = service.getEchartData();//service里面写你的dao如何获取数据库的逻辑
Result result = new Result();
result.setContent(data);
return result;
}
$.ajax({
type: "POST",
url: "localhost:8080/xx/xx/searchEchartData",
dataType: "json",
success: function(json){
//获取int = 8 然后剩下的事情你看着搞就行了
var data = json.content;
initEchart(data);
}
});
function initEchart(data){
var myChart = echarts.init(document.getElementById('eChart'));
var option = {}//这里就是把data 写到 option里面就行
myChart.setOption(option);
}
这是前后台连接的方法https://blog.csdn.net/qq_41076797/article/details/84309315
dao层把值传到service层再传到Controller层,再由Controller层传到前台.
在前台创建一个var setData=[]对象,把值放进去,再把setData放进Echarts的data属性里.
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: setData,
type: 'bar'
}]
};
我这个是最简单的servlet+jsp的例子;实现思路:后台通过一系列方法获取前台需要的数据,并包装成json数据形式返回给前台;前台通过ajax请求(url请求地址要对)来访问后台获取后台数据
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 防止乱码
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
// 指定允许其他域名访问
response.setHeader("Access-Control-Allow-Origin", "*");
// 响应类型
response.setHeader("Access-Control-Allow-Methods", "POST, GET, DELETE, OPTIONS, DELETE");
// 响应头设置
response.setHeader("Access-Control-Allow-Headers", "Content-Type, x-requested-with, X-Custom-Header, HaiYi-Access-Token");
String sql ="SELECT DATE_FORMAT(register_time, '%Y-%m' ) as time, COUNT(register_time) as amount "
+ "FROM `user` GROUP BY time";
List<Map<String,String>> userList = baseDao.findData(sql);
List timeList = new ArrayList<>();
List amountList = new ArrayList<>();
for(int i=0;i<userList.size();i++){
timeList.add(userList.get(i).get("time"));
amountList.add(userList.get(i).get("amount"));
}
//你最主要参考的就是下面转成json数据的方法
JSONObject json = new JSONObject();
json.put("timeList", timeList);
json.put("amountList", amountList);
response.getWriter().println(json);
}
$.ajax({
"url": "count",
"type": "post",
"dataType": "json",
"success": function(data){
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('month'));
// 指定图表的配置项和数据
var option = {
title: {
text: '每月注册用户量增长曲线'
},
tooltip: {},
xAxis: {
data: data.monthReg.timeList
},
yAxis: {},
series: [{
name: '注册量',
type: 'line',
data: data.monthReg.amountList
},{
name: '注册量',
type: 'bar',
data: data.monthReg.amountList
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
"error": function(data){
}
})