前台
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../lib/layui/css/layui.css">
<script src="../lib/layui/layui.js"></script>
<script src="../lib/jquery-3.4.1.js"></script>
<script src="../lib/echarts.js"></script>
</head>
<body>
<div id="main" style="width:400px;height:300px;">
</div>
</body>
<script>
layui.use(['jquery'], function () {
//基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
myChart.clear();
var names = [];
var mydata = [];
$.ajax({
method: 'get',
async: true,
url: '/student/statisticalStatus',
dataType: 'json',
success: function (datas) {
var data = datas.data
for (var i=0;i<data.length;i++){
names.push(data[i].name);
mydata[i] = {value: data[i].value, name: data[i].name};
}
// 指定图表的配置项和数据
var option = {
title: {
text: '学生就业情况',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: names
},
series: [
{
name: '就业情况',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: mydata,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option,true);
}
});
})
</script>
</html>
注意<div id="main" style="width:400px;height:300px;">
里面的style="width:400px;height:300px;"
,如果不加,页面饼图显示不出来
后端返回实体类
返回数据格式
List<StatisticalDTO> dtos = new ArrayList<>();