基于vue和springboot实现柱状图的展示,要求给出服务器端的代码,前端vue使用axios调用后端名为/analysis/getAllCourseGrade的接口,后端返回的数据是课程id,课程名称,成绩最大值,最小值和平均值,需要在前端分别展示成绩最大值,最小值和平均值的柱状图

以下是一个基于Vue和Spring Boot的示例代码，用于实现柱状图的展示。前端Vue使用axios调用后端的接口`/analysis/getAllCourseGrade`来获取数据，并分别展示成绩的最大值、最小值和平均值的柱状图。

后端(Spring Boot)代码示例：

// 导入所需的类和注解

@RestController
@RequestMapping("/analysis")
public class AnalysisController {

    @Autowired
    private CourseGradeService courseGradeService;

    @GetMapping("/getAllCourseGrade")
    public List<CourseStatistics> getAllCourseGrade() {
        // 调用业务逻辑层获取课程成绩统计数据
        return courseGradeService.getAllCourseStatistics();
    }

}

上述代码中，`CourseStatistics`是一个自定义的实体类，表示课程成绩统计数据。`CourseGradeService`是一个服务类，负责处理与课程成绩相关的业务逻辑。你需要根据实际情况编写这两个类。

前端(Vue)代码示例：

<template>
  <div>
    <h3>成绩最大值</h3>
    <bar-chart :data="maxData" :options="barChartOptions" />
    <h3>成绩最小值</h3>
    <bar-chart :data="minData" :options="barChartOptions" />
    <h3>成绩平均值</h3>
    <bar-chart :data="avgData" :options="barChartOptions" />
  </div>
</template>

<script>
import axios from 'axios';
import { BarChart } from 'chart.js';

export default {
  data() {
    return {
      maxData: null,
      minData: null,
      avgData: null,
      barChartOptions: {}
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios.get('/analysis/getAllCourseGrade')
        .then(response => {
          const data = response.data;
          // 处理数据，生成柱状图所需的数据格式
          this.maxData = {
            labels: data.map(item => item.courseName),
            datasets: [
              {
                label: '最大值',
                data: data.map(item => item.maxGrade)
              }
            ]
          };
          this.minData = {
            labels: data.map(item => item.courseName),
            datasets: [
              {
                label: '最小值',
                data: data.map(item => item.minGrade)
              }
            ]
          };
          this.avgData = {
            labels: data.map(item => item.courseName),
            datasets: [
              {
                label: '平均值',
                data: data.map(item => item.avgGrade)
              }
            ]
          };
        })
        .catch(error => {
          console.error(error);
        });
    }
  },
  components: {
    BarChart
  }
};
</script>

上述代码使用了Vue的`axios`库来发送HTTP请求，获取后端接口`/analysis/getAllCourseGrade`返回的数据。然后使用`chart.js`库生成柱状图。

请注意，上述代码只是一个示例，你需要根据实际情况进行适当的调整和扩展。确保你已经在项目中安装了`axios`和`chart.js`相关的依赖。