基于vue和springboot实现柱状图和饼图的展示,要求给出服务器端的代码,前端vue使用axios调用后端名为/analysis/getAllCourseGrade的接口

以下是一个基于Vue和Spring Boot的示例代码，用于实现柱状图和饼图的展示。前端Vue使用axios调用后端的接口`/analysis/getAllCourseGrade`来获取数据。 后端(Spring Boot)代码示例： ```java // 导入所需的类和注解 @RestController @RequestMapping("/analysis") public class AnalysisController { @Autowired private CourseGradeService courseGradeService; @GetMapping("/getAllCourseGrade") public List<CourseGrade> getAllCourseGrade() { // 调用业务逻辑层获取课程成绩数据 return courseGradeService.getAllCourseGrade(); } } ``` 上述代码中，`CourseGrade`是一个自定义的实体类，表示课程成绩。`CourseGradeService`是一个服务类，负责处理与课程成绩相关的业务逻辑。你需要根据实际情况编写这两个类。 前端(Vue)代码示例： ```vue <template> <div> <div> <h3>柱状图</h3> <bar-chart :data="barChartData" :options="barChartOptions" /> </div> <div> <h3>饼图</h3> <pie-chart :data="pieChartData" :options="pieChartOptions" /> </div> </div> </template> <script> import axios from 'axios'; import { BarChart, PieChart } from 'chart.js'; export default { data() { return { barChartData: null, pieChartData: null, barChartOptions: {}, pieChartOptions: {} }; }, mounted() { this.fetchData(); }, methods: { fetchData() { axios.get('/analysis/getAllCourseGrade') .then(response => { const data = response.data; // 处理数据，生成柱状图和饼图所需的数据格式 // 以下为示例代码，你需要根据实际情况进行处理 this.barChartData = { labels: data.map(item => item.course), datasets: [ { label: '成绩', data: data.map(item => item.grade) } ] }; this.pieChartData = { labels: data.map(item => item.course), datasets: [ { data: data.map(item => item.grade) } ] }; }) .catch(error => { console.error(error); }); } }, components: { BarChart, PieChart } }; </script> ``` 上述代码使用了Vue的`axios`库来发送HTTP请求，获取后端接口`/analysis/getAllCourseGrade`返回的数据。然后使用`chart.js`库生成柱状图和饼图。 请注意，上述代码只是一个示例，你需要根据实际情况进行适当的调整和扩展。确保你已经在项目中安装了`axios`和`chart.js`相关的依赖。