Springboot Vue整合echarts的简单使用

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));
    }
}
 复制