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";
export default {
  data() {
    return {
      subject
    };
  },
  methods: {},
  mounted() {
    var option;

    option = {
      grid: {
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: [],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [],
          type: "line",
        },
        {
          data: [],
          type: "bar",
        },
      ],
    };

    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);

    axios.get("http://localhost:8088/echarts/stuScore").then((res) => {
      option.xAxis.data = res.data.data.x;
      option.series[0].data = res.data.data.y;
      option.series[1].data = res.data.data.y;

      myChart.setOption(option, true);
    });
  },
};
</script>

<style>
  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>

页面展示