springboot + Vue前后端项目（第十二记）

1.写在前面

本篇主要讲解系统整合Echarts

2. 整合Echarts

2.1 vue安装Echarts

npm i echarts -S

2.2 使用Echarts

vue中使用echarts的demo

<template>
  <div>
    <div id="main" style="width: 100%; height: 500px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: "Home",
  data() {
    return {}
  },
  mounted() {   // 主要用于对DOM进行操作和进行一些需要DOM的逻辑处理
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      let chartDom = document.getElementById('main');
      let myChart = echarts.init(chartDom);
      let option;

      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'
          }
        ]
      };
      myChart.setOption(option);
    }
  }
}
</script>

<style scoped>

</style>

注：可以去Echarts官网进一步实践不同类型的图表
示例地址

2.3 EchartsController编写

该接口主要统计每个季度的用户人数，然后传递数据给前端

package com.ppj.controller;


import cn.hutool.core.collection.CollUtil;
import cn.hutool.core.date.DateUtil;
import cn.hutool.core.date.LocalDateTimeUtil;
import cn.hutool.core.date.Quarter;
import com.ppj.common.Result;
import com.ppj.entity.User;
import com.ppj.service.IUserService;
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.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.time.LocalDateTime;
import java.util.Date;
import java.util.List;

@RestController
@RequestMapping("/echarts")
public class EchartsController {

    @Autowired
    private IUserService userService;
    /**
     * 获取每个季度的会员数
     * @return
     */
    @GetMapping("/members")
    public Result getMembers(){
        List<User> userList = userService.list();
        int q1 = 0;
        int q2 = 0;
        int q3 = 0;
        int q4 = 0;
        for (User user : userList) {
            Date createTime = user.getCreateTime();
            // 季度
            Quarter quarter = DateUtil.quarterEnum(createTime);
            switch (quarter){
                case Q1:
                    q1++;
                    break;
                case Q2:
                    q2++;
                    break;
                case Q3:
                    q3++;
                    break;
                case Q4:
                    q4++;
                    break;
                default:
                    break;
            }

        }
        return Result.success(CollUtil.newArrayList(q1,q2,q3,q4));
    }

}

2.4 Home.vue编写

模拟各种统计实时展示，用折线，柱状，饼状图展示各月度会员人数

<template>
  <div>
    <el-row :gutter="10" style="margin-bottom: 50px;">
      <el-col :span="6">
        <el-card style="color: #409EFF;">
          <div><i class="el-icon-user-solid"/>用户总数</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: #67C23A;">
          <div><i class="el-icon-s-goods"/>销售总量</div>
          <div style="padding: 10px 0;text-align: center;font-weight: bold;">10000</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #E6A23C;">
          <div><i class="el-icon-coin"/>收益总额</div>
          <div style="padding: 10px 0;text-align: center;font-weight: bold;">￥999</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #F56C6C;">
          <div><i class="el-icon-medal-1"/>门店总数</div>
          <div style="padding: 10px 0;text-align: center;font-weight: bold;">1000</div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <div id="line" style="width: 600px; height: 400px"></div>
      </el-col>
      <el-col :span="12">
        <div id="pie" style="width: 600px; height: 400px"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: "Home",
  data() {
    return {}
  },
  mounted() {   // 主要用于对DOM进行操作和进行一些需要DOM的逻辑处理
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      //页面元素渲染之后再触发
      let lineChartDom = document.getElementById("line");
      let lineChart = echarts.init(lineChartDom);

      let pieChartDom = document.getElementById("pie");
      let pieChart = echarts.init(pieChartDom);

      const lineOption = {
        title: {
          text: "各季度会员数量统计",
          subtext: "趋势图",
          left: "center",
        },
        xAxis: {   // 横坐标
          type: "category",
          data: ["第一季度", "第二季度", "第三季度", "第四季度"],
        },
        yAxis: {
          type: "value",
        },
        // 显示数据
        series: [
          {
            data: [],
            type: "line",   // 折线数据
          },
          {
            data: [],
            type: "bar",   // 柱状数据
          },
        ],
      };

      this.request.get("/echarts/members").then(res => {
        if(res.code === "200"){
          // 获取数据
          lineOption.series[0].data =res.data
          lineOption.series[1].data =res.data
        }
        // 绘制图表
        lineChart.setOption(lineOption)
      })

      const pieOption = {
        title: {
          text: "各季度会员数量统计",
          subtext: "比例图",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      this.request.get("/echarts/members").then(res => {
        if (res.code === "200") {
          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)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>

总结

• 这只是简单的整合echarts使用示例，后期可以根据自己的需求，看官方文档更加深入的使用echarts
• 代码内部有详细的注释

写在最后

如果此文对您有所帮助，请帅戈靓女们务必不要吝啬你们的Zan，感谢！！不懂的可以在评论区评论，有空会及时回复。
文章会一直更新