若依框架生成Echarts柱状图（前后端不分离版本）_若依框架图表

作者：Li_阴宅 | 2024-06-29 13:34:39

踩

若依框架图表

今天记录一下刚入职的公司的需求，根据每日核酸采样数量生成Echart图片
刚刚接触若依框架以及Echarts，若有不足以及可优化的地方，欢迎大佬指点

实体类中创建了一个num和day变量用来接收每天的采样总量和日期
实体类：

在这里插入代码片package com.ruoyi.cyd.domain;

import com.alibaba.fastjson.annotation.JSONField;
import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.annotation.JsonFormat;
import com.fasterxml.jackson.databind.annotation.JsonSerialize;
import com.ruoyi.common.annotation.Excel;
import com.ruoyi.common.domain.CustomerDoubleSerialize;
import com.ruoyi.common.utils.StringUtils;
import lombok.Data;
import lombok.EqualsAndHashCode;
import lombok.experimental.Accessors;

import java.security.Timestamp;
import java.text.DecimalFormat;
import java.util.Date;

/**
 * 采样点统计表 dws_census_count
 *
 * @author Fu.xiao
 * @date 2021-06-30
 */
@Data
@EqualsAndHashCode(callSuper = false)
@Accessors(chain = true)
@TableName("dws_census_count")
public class DwsCensusCount extends DwsCensusCommon {
    /**
     * 日期
     */
    @JsonFormat(pattern = "yyyy-MM-dd")
    private Date tgDate;
    /**
     * 采样点
     */
    private String censusAddress;
    /**
     * 街镇
     */
    private String regionJd;
    /**
     * 条线归属
     */
    private String assigns;
    /**
     * 每日采样数量
     */
    private String num;
    /**
     * 日期（日）
     */
    private String day;
}

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

Mapper:

package com.ruoyi.cyd.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.ruoyi.cyd.domain.DwsCensusCount;
import com.ruoyi.cyd.domain.stat.DwsCensusAssignsStat;
import com.ruoyi.cyd.domain.stat.DwsCensusRegionStat;
import com.ruoyi.passport.domain.PassportDeptConf;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;

import java.util.List;

/**
 * 采样点统计 数据层
 *
 * @author Fuxiao
 * @date 2022-06-30
 */

public interface DwsCensusCountMapper extends BaseMapper<DwsCensusCount> {

    /**
     * 查询每日采样总数
     *
     * @return
     */
    List<DwsCensusCount> findCount();
   
}

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

sql是查询根据日期去分组查询出当天的采样数量，求和（因为数据中可能存在当天统计多次采样情况）然后根据日期排序，保证日期的顺序
这里主要是将数据库中的日期和当月的日期进行比对，来确定月份，但是后来我考虑到一个问题，可能后续会出现bug的情况，加入采样情况是30号导入的，1号并没有进行导入，没有1号的数据，但是我是从1号查询的，获取的1号的时间，那么where条件满足不了，数据为空，但是这里条件已经写死了，我生成的Echarts柱状图中是没有数据的，又不能切换到上个月的数据，这里后面还需要更改，可能会做一个日期去进行选择，将当前时间更换成变量
Mapper.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.ruoyi.cyd.mapper.DwsCensusCountMapper">
    <select id="findCount" resultType="com.ruoyi.cyd.domain.DwsCensusCount">
        SELECT sum(count_cy) AS num,
               DATE_FORMAT(tg_date, '%e日') AS day
        FROM dws_census_count
        WHERE DATE_FORMAT(tg_date, '%Y%m') = DATE_FORMAT(CURDATE(), '%Y%m')
        GROUP BY tg_date
        ORDER BY tg_date ASC
    </select>
 

</mapper>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Serivice:

在这里插入代码片
```package com.ruoyi.cyd.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.ruoyi.cyd.domain.DwsCensusCount;
import com.ruoyi.cyd.domain.DwsCensusCountExport;
import com.ruoyi.cyd.domain.stat.DwsCensusAssignsStat;
import com.ruoyi.cyd.domain.stat.DwsCensusRegionStat;
import com.ruoyi.passport.domain.PassportDeptConf;
import org.apache.ibatis.annotations.Param;

import java.util.List;

/**
 * 采样点统计 服务层
 *
 * @author Fuxiao
 * @date 2022-06-30
 */
public interface IDwsCensusCountService extends IService<DwsCensusCount> {

    /**
     * 查询每日采样总数
     *
     * @return
     */
    List<DwsCensusCount> findCount();
}


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

实现类：

package com.ruoyi.cyd.service.Impl;

import cn.hutool.core.util.StrUtil;
import com.baomidou.dynamic.datasource.annotation.DS;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.ruoyi.common.utils.StringUtils;

import com.ruoyi.cyd.domain.DwsCensusCount;
import com.ruoyi.cyd.domain.stat.DwsCensusAssignsStat;
import com.ruoyi.cyd.domain.stat.DwsCensusRegionStat;
import com.ruoyi.cyd.mapper.DwsCensusCountMapper;
import com.ruoyi.cyd.service.IDwsCensusCountService;
import com.ruoyi.passport.domain.TPassport;
import com.ruoyi.passport.mapper.TPassportMapper;
import com.ruoyi.passport.service.ITPassportService;
import org.springframework.security.core.parameters.P;
import org.springframework.stereotype.Service;

import java.util.List;
import java.util.stream.Collectors;

/**
 * @program: jy_ymjz
 * @description: 采样点统计服务实现
 * @author: Fx
 * @create: 2022-06-30 15:24
 **/
@Service

public class DwsCensusCountServiceImpl extends ServiceImpl<DwsCensusCountMapper, DwsCensusCount> implements IDwsCensusCountService {

    @Override
    public List<DwsCensusCount> findCount() {
        return baseMapper.findCount();
    }
}

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

Controller:


package com.ruoyi.web.controller.cyd;

import cn.hutool.core.bean.BeanUtil;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.ruoyi.common.annotation.Log;
import com.ruoyi.common.base.AjaxResult;
import com.ruoyi.common.enums.BusinessType;
import com.ruoyi.common.page.TableDataInfo;
import com.ruoyi.common.utils.StringUtils;
import com.ruoyi.common.utils.poi.ExcelSheetUtil;
import com.ruoyi.common.utils.poi.ExcelUtil;
import com.ruoyi.cyd.domain.DwsCensusCount;
import com.ruoyi.cyd.domain.DwsCensusCountExport;
import com.ruoyi.cyd.domain.DwsCensusCountExportWb;
import com.ruoyi.cyd.service.IDwsCensusCountService;
import com.ruoyi.cyd.service.IDwsLaboratoryCountService;
import com.ruoyi.desensitize.domain.TDesensitize;
import com.ruoyi.desensitize.service.ITDesensitizeDetailService;
import com.ruoyi.desensitize.service.ITDesensitizeService;
import com.ruoyi.framework.web.base.BaseController;
import com.ruoyi.hsjc.service.ITStatUserOperService;
import org.apache.shiro.authz.annotation.RequiresPermissions;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;

/**
 * @program:
 * @description:采样点统计信息操作处理
 * @author: Fx
 * @create: 2022-06-30 16:31
 **/

@Controller
@RequestMapping("/cyd/dwsCensusCount")
public class DwsCensusCountController extends BaseController {
    private String prefix = "cyd";


    /**
     * Echarts页面
     */
    @RequiresPermissions("system:dwsCensusCount:echarts")
    @GetMapping("/toEcharts")
    public String dwsCensusCountEcharts() {
        return prefix + "/dwsCensusEcharts";
    }

    /**
     * 查询每日采样总数
     * @return
     */
    @RequiresPermissions("system:dwsCensusCount:echarts")
    @PostMapping("/getEcharts")
    @ResponseBody
    public  List<DwsCensusCount>  getEcharts() {
        List<DwsCensusCount> count = dwsCensusCountService.findCount();
        return count;
    }
}

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

第一次使用，我的大概思路是在加载事件中使用ajax去后台请求每日的采样数量，定义全局数组pie和num为空，用来接收采样数和日期，然后在回调函数中遍历结果，用pie和num去接收，然后将pie赋给series中的data作为柱状图的图表数据，将num作为x轴的坐标
前端界面：

在这里插入代码片
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<!--<head>-->
<!--    <th:block th:include="include :: header('百度ECharts')"/>-->
<!--</head>-->
<head th:include="include :: header"></head>
<body class="gray-bg">
<div style="margin-left:40px; margin-top:40px">
<div class="row">
 <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>柱状图</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="#">选项1</a>
                            </li>
                            <li><a href="#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-bar-chart"></div>
                </div>
            </div>
        </div>
    </div>
</div>


<th:block th:include="include :: footer"/>
<script type="text/javascript">
    var prefix = ctx + "cyd/dwsCensusCount";
    //柱状图1数据值
    var pie = [];
    //柱状图1x轴的值
    var day = [];



    $(function () {
        var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
        $.ajax({
            url: prefix + "/getEcharts",   		//向后端请求数据
            dataType: 'json',
            type: 'post',
            success: function (data) {
                //alert(JSON.stringify(data));
                for (var i = 0; i < data.length; i++) {
                    //每日采样总数
                    pie.push(data[i].day);
                    //x轴的值
                    day.push(data[i].num)
                }
                initChartOne(pie, day);
            }

        });

        function initChartOne(datas, day) {
            var baroption = {
                title: {
                    text: '每日采样总数'
                },
                //提示框组件
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['常态化']
                },
                //图标离容器的距离
                grid: {
                    x: 30,
                    x2: 40,
                    y2: 24
                },
                //是否启用拖拽重计算特性，默认关闭(即值为false)
                calculable: true,
                //直角坐标系中横轴数组，数组中每一项代表一条横轴坐标轴，仅有一条时可省略数值
                //横轴通常为类目型，但条形图时则横轴为数值型，散点图时则横纵均为数值型
                xAxis: [
                    {
                        type: 'category',
                        data: pie
                    }
                ],
                //直角坐标系中纵轴数组，数组中每一项代表一条纵轴坐标轴，仅有一条时可省略数值
                //纵轴通常为数值型，但条形图时则纵轴为类目型

                yAxis: [
                    {
                        type: 'value',
                        axisLine: "false",
                        splitLine:{
                            show:false
                        }


                    }
                ],

                //sereis的数据: 用于设置图表数据之用。series是一个对象嵌套的结构；对象内包含对象
                series: [
                    {
                        //系列名称，如果启用legend，该值将被legend.data索引相关
                        //图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。
                        type: 'bar',
                        //系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值
                        data: day,
                        color:"#FF8000",
                        //显示数值
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: {
                                        //数值样式
                                        color: 'black',
                                        fontSize: 12,
                                    },
                                },
                            },
                        },
                    },
                ]
            };
            barChart.setOption(baroption);
        }
    });

</script>
</body>
</html>
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

如果不足欢迎大佬批评指正，刚开始写博客主要是为了记录工作中遇到过得一些问题和学习到的一些知识，便于以后回顾与总结

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Li_阴宅/article/detail/769359