使用echarts绘制统计分析图表（动态从后台获取数据）_后台统计图怎么做

作者：羊村懒王 | 2024-05-20 20:19:08

踩

后台统计图怎么做

说明：实际项目中的统计分析模块不仅需要数据以表格的方式显示，还需要用图形化的方式进一步渲染，以提升数据的可观性，以下是使用echarts来进行绘制统计分析图表的案例：

文章目录

- 一。第一个静态echarts示例
- 二。动态echarts示例（从后台获取数据）

一。第一个静态echarts示例

1.echarts的使用教程在官方网站上有详细说明：echarts官网
如下图所示：
在这里插入图片描述
2.这里做一个简单的介绍：首先你需要下载一个echarts官方源码包echarts官方源码包
在其中选择自己所需要下载的版本，如下图所示：

3.下载完成后解压，echarts.min.js就是我们需要引用的js文件，把它复制到我们需要进行引用的项目路径下，如下图所示：
在这里插入图片描述

4.然后我们在index.html文件中引入该echarts.min.js文件，并在页面定义好显示图表的控件，源代码如下：

// An highlighted block
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 100%;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </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

5.打开index.html页面，页面效果如图所示：
在这里插入图片描述
6.如果需要实现不同的图表显示功能，在echarts官网上找到对应的实例，更换JavaScript代码块中的option变量就行了，如下图所示：

7.数据可以根据你的需求进行修改，效果图如下：
在这里插入图片描述

二。动态echarts示例（从后台获取数据）

说明：在echarts中各个类型数据的显示都需要不同数据来进行传入，我们需要在后台封装好我们所需要显示的数据，再利用ajax去进行调用，获得相应的图表数据。简单来说，每种echarts示例类型所需要的数据都是不尽相同的，echarts需要什么数据我们就把数据封装成什么样子，然后再去给echarts使用，从而达到页面图表渲染的效果。

1.控制器端代码如下所示：

/**
     * 工地预警类型统计
     */
    @RequestMapping("/cList")
    @ResponseBody
    public Object cList(@RequestParam(required = false) String beginTime, @RequestParam(required = false) String endTime){
        ArrayList<Integer> constructionIdList=new ArrayList<>();
        //初始化工地名称集合
        ArrayList<String> constructionNameList=new ArrayList<>();
        //初始化告警类型为安全帽类型集合
        ArrayList<Integer> safetyHatTypeList=new ArrayList<>();
        //初始化告警类型为工作服类型集合
        ArrayList<Integer> coverallTypeList=new ArrayList<>();
        //初始化告警类型为安全带类型集合
        ArrayList<Integer> safetyBeltTypeList=new ArrayList<>();
        //初始化告警类型为越界告警类型集合
        ArrayList<Integer> crossBoundaryTypeList=new ArrayList<>();
        //得到所有告警工地id list
        constructionIdList=dataStatisticsService.getConstructionId();
        //初始化告警类型vo集合
        ArrayList<AlarmTypeVo> alarmTypeVoList=new ArrayList<>();
        //便利所有告警工地id
        for(Integer id:constructionIdList){
            //初始化告警类型vo类
            AlarmTypeVo alarmTypeVo=new AlarmTypeVo();

            alarmTypeVo.setBeginTime(beginTime);
            alarmTypeVo.setEndTime(endTime);

            //根据告警工地id得到告警工地名称
            String conStructionName=dataStatisticsService.getConstructionNameByConstructionId(id);
            //加入告警工地名称list中
            constructionNameList.add(conStructionName);
            alarmTypeVo.setConstructionSite(conStructionName);

            //根据工地id查询告警类型为0（安全帽）的总数
            int safetyHatCount=dataStatisticsService.getCameraTypeNumber(id,0,beginTime,endTime);
            //加入告警类型为0（安全帽）List中
            safetyHatTypeList.add(safetyHatCount);
            alarmTypeVo.setSafetyHatCount(safetyHatCount);

            //根据工地id查询告警类型为1（工作服）的总数
            int coverallCount=dataStatisticsService.getCameraTypeNumber(id,1,beginTime,endTime);
            //加入告警类型为0（安全帽）List中
            coverallTypeList.add(coverallCount);
            alarmTypeVo.setCoverallCount(coverallCount);

            //根据工地id查询告警类型为2（安全带）的总数
            int safetyBeltCount=dataStatisticsService.getCameraTypeNumber(id,2,beginTime,endTime);
            //加入告警类型为0（安全帽）List中
            safetyBeltTypeList.add(safetyBeltCount);
            alarmTypeVo.setSafetyBeltCount(safetyBeltCount);

            //根据工地id查询告警类型为3（越界施工）的总数
            int crossBoundaryCount=dataStatisticsService.getCameraTypeNumber(id,3,beginTime,endTime);
            //加入告警类型为0（安全帽）List中
            crossBoundaryTypeList.add(crossBoundaryCount);
            alarmTypeVo.setCrossBoundaryCount(crossBoundaryCount);

            //加入list中
            alarmTypeVoList.add(alarmTypeVo);
        }

        //初始化json对象
        JSONObject jsonData=new JSONObject();

        //把需要的数据放入json对象中
        jsonData.put("alarmTypeVoList",alarmTypeVoList);
        jsonData.put("constructionNameList",constructionNameList);
        jsonData.put("safetyHatTypeList",safetyHatTypeList);
        jsonData.put("coverallTypeList",coverallTypeList);
        jsonData.put("safetyBeltTypeList",safetyBeltTypeList);
        jsonData.put("crossBoundaryTypeList",crossBoundaryTypeList);

        //返回json对象
        return jsonData;

    }

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

2.前台html页面代码如下：

// An highlighted block
@layout("/common/_container.html"){
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>工地预警数据统计</h5>
            </div>
            <div class="ibox-content">
                <div class="row row-lg">

                    <div class="row">
                        <div class="col-sm-2">
                            <#TimeCon id="beginTime" name="录入时间" isTime="false" pattern="YYYY-MM-DD" />
                        </div>
                        <div class="col-sm-2">
                            <#TimeCon id="endTime" name="——" isTime="false" pattern="YYYY-MM-DD" />
                        </div>

                        <div class="col-sm-2">
                            <#button name="搜索" icon="fa-search" clickFun="search()"/>
                           <!-- <#button name="导出" icon="fa-plus" clickFun=""/>-->
                        </div>
                    </div>

                    <div class="col-sm-12">
                        <div id="main" style="width: 100%;height:400px;"></div>
                    </div>

                    <div class="col-sm-12">
                        <table id="table">
                            <thead>
                            <tr>
                                <th data-field="beginTime">开始时间</th>
                                <th data-field="endTime">结束时间</th>
                                <th data-field="constructionSite">工地地址</th>
                                <th data-field="safetyHatCount">安全帽</th>
                                <th data-field="coverallCount">工作服</th>
                                <th data-field="safetyBeltCount">安全带</th>
                                <th data-field="crossBoundaryCount">越界施工</th>
                            </tr>
                            </thead>
                        </table>
                        <#table id="alarmTypeTable"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--<script src="${ctxPath}/static/modular/system/data/alarmType.js"></script>-->
<script src="${ctxPath}/static/js/echarts.min.js"></script>
<script>
    //时间选择控件
    laydate.render({
        elem: '#beginTime'
    });
    laydate.render({
        elem: '#endTime'
    });


    //从后台获取图表所需要的json数据
    function dataJson(a){
        var data=[];
        $.ajax({
            type : "post",
            async : false, //同步执行
            url : Feng.ctxPath +"/dataStatistics/cList",
            //带入的参数查询条件
            data :{beginTime:$("#beginTime").val(),endTime:$("#endTime").val()},
            dataType : "json", //返回数据形式为json
            success : function(result) {
                switch (a) {
                    //获取工地名称数据
                    case 0:data=result.constructionNameList;break;
                    //获取告警类型为安全帽数据
                    case 1:data=result.safetyHatTypeList;break;
                    //获取告警类型为工作服数据
                    case 2:data=result.coverallTypeList;break;
                    //获取告警类型为安全带数据
                    case 3:data=result.safetyBeltTypeList;break;
                    //获取告警类型为越界施工数据
                    case 4:data=result.crossBoundaryTypeList;break;
                    //获取告警类型vo集合
                    case 5:data=result.alarmTypeVoList;break;
                }

            },
            error : function(errorMsg) {
                alert("不好意思,图表请求数据失败啦!");
                myChart.hideLoading();
            }
        })
        return data;
    }

    //条件查询为空时
    //定义一个接收工地名称数据的变量
    var alarmTypeName=dataJson(0);
    //定义一个告警类型为安全帽数据的变量
    var safetyHat=dataJson(1);
    //定义一个告警类型为工作服数据的变量
    var coverall=dataJson(2);
    //定义一个告警类型为安全带数据的变量
    var safetyBelt=dataJson(3);
    //定义一个告警类型为越界施工数据的变量
    var crossBoundary=dataJson(4);

    //初始加载加载图表（无条件时查询时）
    initChart();

//初始化以及加载图表
function initChart() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        //图表颜色变化
        //color:['#05DDDF', '#E44F5E','#FFB642','#39DD68','#3261FE'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            /*  data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']*/
            data: ['安全帽', '工作服', '安全带', '越界施工']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            /* data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']*/
            data:alarmTypeName
        },
        series: [
            {
                name: '安全帽',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    position: 'insideRight'
                },
                data:safetyHat

            },
            {
                name: '工作服',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    position: 'insideRight'
                },
                data:coverall
            },
            {
                name: '安全带',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    position: 'insideRight'
                },
                data:safetyBelt
            },
            {
                name: '越界施工',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true,
                    position: 'insideRight'
                },
                data:crossBoundary
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

    //获得后台返回的告警类型vo集合
    var data = dataJson(5);
   //初始化表格
   function  initTable() {
       $('#table').bootstrapTable({data: data});
   }
    //初始化加载表格（无条件时查询时）
    initTable();


    //点击搜素事件
    function search(){
        //输入条件查询后重新得到条件查询后的数值
        alarmTypeName=dataJson(0);
        safetyHat=dataJson(1);
        coverall=dataJson(2);
        safetyBelt=dataJson(3);
        crossBoundary=dataJson(4);

        //带条件之后重新加载图表
        initChart();

        //输入条件查询后重新得到条件查询后的数值
        data = dataJson(5);
        //bootstrapTable清空表格重新加载
        $('#table').bootstrapTable('destroy');
        //带条件之后重新加载表格
        initTable();
    }
</script>
@}
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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225

3.页面效果图如下所示：
在这里插入图片描述
4.输入时间条件查询过后，图表数据发生变化，如下图所示：

总结：echarts通过图表的渲染可以让数据变得更加的可视化，在统计分析模块我们只需要在echarts官网上找到我们所需要的图表实例，根据实例中的data来封装我们的数据，得到相应的图表数据。可视化的图表数据能够提高用户的使用体验，使数据变得直观明了，便于用户对数据的统计分析

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