您的位置：首页 > 其它

使用ajax获取数据，完成对echarts图标的渲染，实现效果

2019-03-08 11:24 656 查看

项目放在了github上，如果有需要，可以参考。地址：echartDemo

直接上代码

@Controller
public class UserController {

@Autowired
private UserService service;

@RequestMapping("/lineChart")
public String lineChart() {

return "/lineChart";
}

@RequestMapping("/pieChart")
public String pieChart() {

return "/pieChart";
}

@RequestMapping("/barChart")
public String barChart() {

return "/barChart";
}

//折线  柱状取值
@RequestMapping("/chart1")
@ResponseBody
public List<User> chart1(Model model){
List<User> userList = service.getUserList();
return userList;
}

//扇形取值
@RequestMapping("/chart2")
@ResponseBody
public List<charts> chart2(Model model){
List<User> userList = service.getUserList();
List<charts> chart = new ArrayList<charts>();
for (User user : userList) {
charts a = new charts(user.getScore(), user.getName());
chart.add(a);
}
return chart;
}
}

这里因为pie扇形的值是{value:  , name:  }, 所以又定义了一个charts实体类，然后循环把查询到的值，添加到chart里面。就可以直接拿到页面使用。
dao层   service层  就是平常的查询方法。

前端代码
这个是折线统计图的代码，其他的两个没有放上来。

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>折线图</title>
<link rel="stylesheet" type="text/css"
href="./statics/layui.css">
<script src="./statics/echarts.min.js"></script>
<script src="./statics/jquery.min.js"></script>
</head>
<body>
<div style="width:2000px;height:1800px;">
<a href="./pieChart"><button type="button" class="layui-btn">扇形统计图</button></a>
<a href="./barChart"><button type="button" class="layui-btn">柱状统计图</button></a>
<a href="./lineChart"><button type="button" class="layui-btn">折线统计图</button></a>
<div style="height: 400px" class="" id="lineChart"></div>
</div>

<script>
$(function () {
//折线图
var echartsA = echarts.init(document.getElementById('lineChart'));
echartsA.setOption({

title: {
text: '学生成绩'
},

tooltip: {
trigger: 'axis',
},
legend: {
data: ['成绩']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: true,
data: []
}],

yAxis: [{
type: 'value'
}],
series: [{
name: '成绩',
type: 'line',
areaStyle: {normal: {}},
data: [],
itemStyle: {
normal: {
color: '#59aea2'
},
emphasis: {}
}
}
]
});

echartsA.showLoading();

var user = [];
var score = [];

$.ajax({
type: 'post',
async: true,
url: '${pageContext.request.contextPath}/chart1',
data: {},
dataType: 'json',
success: function (result) {
if (result) {
for (var i = 0; i < result.length; i++) {
user.push(result[i].name);
}
for (var i = 0; i < result.length; i++) {
score.push(result[i].score);
}

echartsA.hideLoading();
echartsA.setOption({
xAxis: {
type: 'category',
boundaryGap: true,
data: user
},
series: [{
name: '点击量',
type: 'line',
areaStyle: {normal: {}},
data: score,
itemStyle: {
normal: {
color: '#59aea2'
},
emphasis: {}
}
}
]
});
}
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
echartsA.hideLoading();
}
});
})
</script>
</body>
</html>

最后实现的效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航