SpringBoot和Vue整合ECharts——基于SpringBoot和Vue的后台管理系统项目系列博客（十六）

系列文章目录

1. 系统功能演示——基于SpringBoot和Vue的后台管理系统项目系列博客（一）
2. Vue2安装并集成ElementUI——基于SpringBoot和Vue的后台管理系统项目系列博客（二）
3. Vue2前端主体框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客（三）
4. SpringBoot后端初始框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客（四）
5. SpringBoot集成Mybatis——基于SpringBoot和Vue的后台管理系统项目系列博客（五）
6. SpringBoot实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客（六）
7. SpringBoot实现分页查询——基于SpringBoot和Vue的后台管理系统项目系列博客（七）
8. SpringBoot实现集成Mybatis-Plus和SwaggerUI——基于SpringBoot和Vue的后台管理系统项目系列博客（八）
9. Vue实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客（九）
10. SpringBoot实现代码生成器——基于SpringBoot和Vue的后台管理系统项目系列博客（十）
11. Vue使用路由——基于SpringBoot和Vue的后台管理系统项目系列博客（十一）
12. SpringBoot和Vue实现导入导出——基于SpringBoot和Vue的后台管理系统项目系列博客（十二）
13. SpringBoot和Vue实现用户登录注册与异常处理——基于SpringBoot和Vue的后台管理系统项目系列博客（十三）
14. SpringBoot和Vue实现用户个人信息展示与保存与集成JWT——基于SpringBoot和Vue的后台管理系统项目系列博客（十四）
15. SpringBoot和Vue实现文件上传与下载——基于SpringBoot和Vue的后台管理系统项目系列博客（十五）
16. SpringBoot和Vue整合ECharts——基于SpringBoot和Vue的后台管理系统项目系列博客（十六）
17. SpringBoot和Vue实现权限菜单功能——基于SpringBoot和Vue的后台管理系统项目系列博客（十七）
18. SpringBoot实现1对1、1对多、多对多关联查询——基于SpringBoot和Vue的后台管理系统项目系列博客（十八）
19. 用户前台页面设计与实现——基于SpringBoot和Vue的后台管理系统项目系列博客（十九）
20. SpringBoot集成Redis实现缓存——基于SpringBoot和Vue的后台管理系统项目系列博客（二十）
21. SpringBoot和Vue集成高德地图——基于SpringBoot和Vue的后台管理系统项目系列博客（二十一）
22. SpringBoot和Vue集成视频播放组件——基于SpringBoot和Vue的后台管理系统项目系列博客（二十二）
23. SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客（二十三）

---

项目资源下载

1. GitHub下载地址
2. Gitee下载地址
3. 项目MySql数据库文件

---

---

前言

  今天的主要内容包括：Vue安装ECharts、Vue整合ECharts、后台实现ECharts数据传输接口、前端实现ECharts动态数据传输等内容。今天主要是图表相关的内容，这也是我们Web应用不可缺少的内容，下面就开始我们今天的学习！

---

一、Vue安装ECharts

1. 首先在Vue的项目目录打开cmd
   
2. 然后在此路径下输入npm i echarts -S安装ECharts，如下图所示表示安装完毕
   

二、Vue整合ECharts

1. 首先在Home.vue中引入ECharts
   
2. 然后我们直接去ECharts官网使用一些图形的代码，放到Home.vue中，所以Home.vue中的所有内容直接改成如下所示

<template>
    <div>
        <el-col :span="12">
            <div id="main" style="width: 500px;height: 400px">div>
        el-col>

        <el-col :span="12">
            <div id="pie" style="width: 500px;height: 400px">div>
        el-col>
    div>
template>

<script>
    // 引入Echarts
    import * as echarts from 'echarts'

    export default {
        name: "Home",
        data() {
            return {}
        },
        // 页面元素渲染之后再触发
        mounted() {
            // 柱状折线图
            var option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'line'
                    },
                    {
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'bar'
                    }
                ]
            };
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            myChart.setOption(option);

            // 饼图
            var pieOption = {
                title: {
                    text: 'Referer of a Website',
                    subtext: 'Fake Data',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            {value: 1048, name: 'Search Engine'},
                            {value: 735, name: 'Direct'},
                            {value: 580, name: 'Email'},
                            {value: 484, name: 'Union Ads'},
                            {value: 300, name: 'Video Ads'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            var pieDom = document.getElementById('pie');
            var pieChart = echarts.init(pieDom);
            pieChart.setOption(pieOption);
        }
    }
script>

<style scoped>

style>
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

3. 此时前端已经可以展示柱状折线图和饼图了，只不过数据是写死的（静态的）
   

三、后台实现ECharts数据传输接口

1. 由于图形数据是写死的，这样不适合我们网站，为了动态展示数据，要从后台获取数据，首先在此目录下新建EchartsController.java
   
2. 在EchartsController.java首先加入如下注解
   
3. 然后在EchartsController.java中编写生成前端图形数据的接口
   
4. 修改User.java中的createTime类型为Date
   
5. 在EchartsController.java中加入按季度查询数据的接口

/**
 * 按季度获取数据
 *
 * @return 返回季度数据
 */
@GetMapping("/members")
public Result members() {
    List<User> list = userService.list();
    int q1 = 0; // 第一季度
    int q2 = 0; // 第二季度
    int q3 = 0; // 第三季度
    int q4 = 0; // 第四季度
    for (User user : list) {
        Date createTime = user.getCreateTime();
        Quarter quarter = DateUtil.quarterEnum(createTime);
        switch (quarter) {
            case Q1:
                q1 += 1;
                break;
            case Q2:
                q2 += 1;
                break;
            case Q3:
                q3 += 1;
                break;
            case Q4:
                q4 += 1;
                break;
            default:
                break;
        }
    }
    return Result.success(CollUtil.newArrayList(q1, q2, q3, q4));
}
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

四、前端实现ECharts动态数据传输

1. 只需要将Home.vue中的全部内容替换为如下内容

<template>
    <div>
        <el-row :gutter="10" style="margin-bottom: 150px">
            <el-col :span="6">
                <el-card style="color: #409EFF">
                    <div><i class="el-icon-user-solid">i>用户总数div>
                    <div style="padding: 10px 0;text-align: center;font-weight: bold">
                        100
                    div>
                el-card>
            el-col>
            <el-col :span="6">
                <el-card style="color: #edd014">
                    <div><i class="el-icon-money">i>销售总量div>
                    <div style="padding: 10px 0;text-align: center;font-weight: bold">
                        $1000000
                    div>
                el-card>
            el-col>
            <el-col :span="6">
                <el-card style="color: #00c317">
                    <div><i class="el-icon-bank-card">i>收益总额div>
                    <div style="padding: 10px 0;text-align: center;font-weight: bold">
                        $1000000
                    div>
                el-card>
            el-col>
            <el-col :span="6">
                <el-card style="color: #dd2215">
                    <div><i class="el-icon-s-shop">i>门店总数div>
                    <div style="padding: 10px 0;text-align: center;font-weight: bold">
                        20
                    div>
                el-card>
            el-col>
        el-row>
        <el-col :span="12">
            <div id="main" style="width: 500px;height: 500px">div>
        el-col>

        <el-col :span="12">
            <div id="pie" style="width: 500px;height: 500px">div>
        el-col>
    div>
template>

<script>
    // 引入Echarts
    import * as echarts from 'echarts'

    export default {
        name: "Home",
        data() {
            return {}
        },
        // 页面元素渲染之后再触发
        mounted() {
            // 柱状折线图
            var option = {
                title: {
                    text: '各季度会员数量统计',
                    subtext: '趋势图',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                xAxis: {
                    type: 'category',
                    data: ["第一季度", "第二季度", "第三季度", "第四季度"]
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: "星巴克",
                        data: [],
                        type: 'bar'
                    },
                    {
                        name: "星巴克",
                        data: [],
                        type: 'line'
                    },
                    {
                        name: "瑞幸咖啡",
                        data: [],
                        type: 'bar'
                    },
                    {
                        name: "瑞幸咖啡",
                        data: [],
                        type: 'line'
                    }
                ]
            };
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            this.request.get("/echarts/members").then(res => {
                // 填空
                option.series[0].data = res.data;
                option.series[1].data = res.data;
                option.series[2].data = [5, 6, 7, 8];
                option.series[3].data = [5, 6, 7, 8];
                // 在数据准备完毕之后再set
                myChart.setOption(option);
            })

            // 饼图
            var pieOption = {
                title: {
                    text: '各季度会员数量统计',
                    subtext: '比例图',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} 
{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '星巴克',
                        type: 'pie',
                        radius: '35%',
                        center: ['25%', '50%'],
                        label: {            //饼图图形上的文本标签
                            normal: {
                                show: true,
                                position: 'inner', //标签的位置
                                textStyle: {
                                    fontWeight: 300,
                                    fontSize: 14,    //文字的字体大小
                                    color: "#fff"
                                },
                                formatter: '{d}%'
                            }
                        },
                        data: [],  // 填空
                    },
                    {
                        name: '瑞幸咖啡',
                        type: 'pie',
                        radius: '45%',
                        center: ['75%', '60%'],
                        label: {            //饼图图形上的文本标签
                            normal: {
                                show: true,
                                position: 'inner', //标签的位置
                                textStyle: {
                                    fontWeight: 300,
                                    fontSize: 14,    //文字的字体大小
                                    color: "#fff"
                                },
                                formatter: '{c}({d}%)'
                            }
                        },
                        data: [{name: "第一季度", value: 5},
                            {name: "第二季度", value: 6},
                            {name: "第三季度", value: 7},
                            {name: "第四季度", value: 8},],  // 填空
                    }
                ]
            };
            var pieDom = document.getElementById('pie');
            var pieChart = echarts.init(pieDom);
            this.request.get("/echarts/members").then(res => {
                pieOption.series[0].data = [
                    {name: "第一季度", value: res.data[0]},
                    {name: "第二季度", value: res.data[1]},
                    {name: "第三季度", value: res.data[2]},
                    {name: "第四季度", value: res.data[3]},
                ]
                pieChart.setOption(pieOption)
            })
        }
    }
script>

<style scoped>

style>
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190

2. 最终展示效果如下图所示
   

---

总结

  以上就是今天学习的全部内容，内容不是很多，跟着我演示的一步一步做即可。明天将会给大家带来关于SpringBoot和Vue实现权限菜单功能的相关内容。明天见！