若依整合 ECharts

ECharts 简介

官网地址：Apache ECharts

示例：Examples - Apache ECharts

饼图示例：Examples - Apache ECharts

前端项目

安装 ECharts

从 npm 获取

1
npm install echarts --save

添加菜单

image-20230807003319018

添加路由

image-20230807003216708

请求接口

1
2
3
4
5
6
7
// 查询学生兴趣
export function listStudentHobby() {
  return request({
    url: '/manage/student/pie',
    method: 'get',
  })
}

image-20230807004921146

Pie.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<template>
  <div id="myChart" :style="{width: '800px', height: '600px'}"></div>
</template>
<script>
import * as echarts from 'echarts';
import {listStudentHobby} from "@/api/manage/student";

export default {
  name: "Pie",
  data() {
    return {
      myChart: {},
      sortData: [], //动态排序数据
      myChartStyle: { float: "left", width: "800px", height: "600px"}, //图表样式
    };
  },
  mounted() {
    listStudentHobby().then(response => {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '学生兴趣分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 250],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: response.data
          }
        ]
      })
      console.log(response.data)
    })
  }
}
</script>


后端项目

前端接收数据的类型

查看实例，示例 data 为 { value: int, name: string }

所以后端的返回的数据类型要以此为准

image-20230807003716117

在 Mapper 层写 SQL 语句

image-20230807004112592

一定重命名为 name,因为前端接收的数据类型 {value: int, name: string}

1
2
3
4
5
/**
 * 各个兴趣及每个学生的数量
 */
@Select("select student_hobby name, count(student_name) value from sys_student group by student_hobby")
List<Map<Integer, String>> selectHobbyAndCount();

controller 代码

规范代码是调用 service (省略)

image-20230807004448267

1
2
3
4
5
6
7
8
9
10
11
12
@Autowired
private SysStudentMapper sysStudentMapper;

/**
 * 查询学生兴趣饼图
 * @return
 */
@GetMapping("/pie")
public AjaxResult pie(){
    List<Map<Integer, String>> maps = sysStudentMapper.selectHobbyAndCount();
    return AjaxResult.success(maps);
}

重启后端项目

展示

image-20230807010211872