Vue接收map集合数据并显示在Ecahrts上

第一步：后端发送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";