第一步:后端发送map集合的数据
@CrossOrigin
@RestController
@RequestMapping("/echarts")
public class EchartsController {
@Autowired
private SubjectScoreService subjectScoreService;
@GetMapping("/stuScore")
public ResultVo stuScore() {
Map<String, Object> map = new HashMap<>();
map = subjectScoreService.stuScore();
return CommonResult.success(map);
}
}
postman测试数据
第二步 在vue中引入echarts 并接受后端数据展示,将axios接收的数据传到x,y轴即可
<template>
<div>
<div id="main" :style="{ width: '600px', height: '600px' }"></div>
</div>
</template>
<script>
import * as echarts from "echarts";