Springboot+Vue整合echarts的简单使用
由于是第一次在csdn写笔记,浅记录下吧
首先是前台(基于vue)
先下载echarts包(加上–force是防止npm版本过高引起依赖解析出错)
npm install echarts --save --force
在main.js中引入并全局挂载
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts //全局引入 统计图表 对象
开始使用echarts开发!!!
一个图表对应一个div 使用 id属性在js中进行挂载
<template>
<div>
<el-row>
<el-col :span="12">
<div id="main" style="width: 500px; height: 300px"></div>
</el-col>
<el-col :span="12">
<div id="pie" style="width: 500px; height: 300px"></div>
</el-col>
</el-row>
</div>
</template>
echarts的使用需要在mouted钩子中使用
mounted() {
//柱状图
var myChart = this.$echarts.init(document.getElementById('main'));
var option = {
title: {
text: '各季度会员图',
left: 'center'
},
xAxis: {
data: ['第一季度', '第二季度', '第三季度', '第四季度']
},
yAxis: {},
series: [
{
type: 'bar',
label: {
formatter: '{d}%',
},
data: []
},
{
type: 'line',
label: {
formatter: '{d}%',
},
data: []
}
]
}
//饼图
var pieChart = this.$echarts.init(document.getElementById('pie'));
var pieOption = {
//标题
title: {
text: '各季度会员图',
left: 'center'
},
//开启图例显示
legend:{
orient: 'vertical',
left:'left'
},
series: [
{
type: 'pie',
//设置图形文本及数据
label: {
position: 'inner', //文本显示在内部
formatter: '{d}%', //显示百分比(会屏蔽已设置的name 属性)
fontSize: '15',
color: '#fff'
},
data: []
}
]
};
//从数据库查询数据并填充页面
getMembers().then(res => {
option.series[0].data = res.data
option.series[1].data = res.data
// 绘制图表
myChart.setOption(option);
pieOption.series[0].data = [
{value: res.data[0], name:"第一季度"},
{value: res.data[1], name:"第二季度"},
{value: res.data[2], name:"第三季度"},
{value: res.data[3], name:"第四季度"},
]
pieChart.setOption(pieOption)
})
}
对应后台接口的axios封装
export const getMembers = ()=>{
return requests({
url: '/echarts/members',
method: 'get'
})
}
接下来是从后台接口拿数据(基于Springboot的后台)
此次图表是关于各个季度用户的数量统计,故而需要用到一个比较好用的工具类 — hutool
Hutool是一个小而全的Java工具类库,通过静态方法封装,降低相关API的学习成本,提高工作效率,使Java拥有函数式语言般的优雅,让Java语言也可以“甜甜的”。
具体使用可参考 https://blog.csdn.net/qq_42981242/article/details/110939210
本次使用到的是计算季度的方法
先导入pom的依赖
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>5.5.1</version>
</dependency>
对数据库中用户的数据进行查询,遍历他们的createTime并转换为对应的季度,放入switch统计各个季度的总数值,最后使用hutool的 CollUtil.newArrayList(多个值) 返回数据给前端
return Result.success(CollUtil.newArrayList(q1,q2,q3,q4));
后台接口
package com.dayuan.crud.controller;
import cn.hutool.core.collection.CollUtil;
import cn.hutool.core.date.DateUtil;
import cn.hutool.core.date.Quarter;
import cn.hutool.core.io.unit.DataUnit;
import com.dayuan.crud.common.Result;
import com.dayuan.crud.pojo.User;
import com.dayuan.crud.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.Date;
import java.util.List;
@RestController
@RequestMapping("/echarts")
public class EchartsController {
@Autowired
private UserService userService;
@GetMapping("/members")
public Result members(){
List<User> list = userService.list();
//q1-q4 表示第一到第四季度
int q1 = 0;
int q2 = 0;
int q3 = 0;
int q4 = 0;
for (User user : list) {
Date joinTime = user.getCreateTime();
Quarter quarter = DateUtil.quarterEnum(joinTime);
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));
}
}