After the front-end interface receives the back-end data, the problem of data reading failure occurs when assigning the data to data in ECharts (possibly due to the order of data rendering). It was later solved in the following way:
1. Next, we will introduce the countUsers method in UserController, which is used to return the number of administrators and ordinary users. First, define a JSONArray object to store JSONObject objects. Then define two JSONObject objects to store relevant information of administrators and ordinary users. Call the countRoot() and countGeneral() methods in the Service layer to return the number of administrators and ordinary users. Add key-value pairs to JSONObject through the put() method, and finally add two JSONObjects to the JSONArray through the add() method, and finally return. The code is shown below.
@GetMapping("/countUsers")
public Object countUsers() {
JSONArray jsonArray = new JSONArray();
JSONObject rootUser = new JSONObject();
int rootNum = userService.countRoot();
rootUser.put("value", rootNum);
rootUser.put("name", "管理员");
jsonArray.add(rootUser);
JSONObject generalUser = new JSONObject();
int generalNum = userService.countGeneral();
generalUser.put("value", generalNum);
generalUser.put("name", "普通用户");
jsonArray.add(generalUser);
return jsonArray;
}
2. The front-end interface calls the interface, receives the returned jsonArray, assigns the received JSON array to this.userValue, and then calls the creatUserChart method to finally display the user statistics chart.
creatUserChart() {
var myChart = echarts.init(document.getElementById('userChart'));
myChart.setOption({
title: {
text: "用户信息",
x: "center",
y: "310px"
},
color: ['#41719f', '#8dccfc'],
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '用户数量',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 30,
fontWeight: 'bold'
}
},
labelLine: {
show: false,
},
data: this.userValue
}
]
})
}
countUser() {
api.countUsers().then(res => {
this.userValue = res
this.creatUserChart()
})
},
3. The final display result is as shown in the figure below.
