ruoyi框架：使用Echarts工具、Ajax技术实现【饼图】和【柱状图】的功能_若依框架使用echarts统计图

作者：人工智能uu | 2024-06-29 13:37:29

踩

若依框架使用echarts统计图

ruoyi框架：使用Echarts工具、Ajax技术实现【饼图】和【柱状图】的功能

当我点击【饼状图】的功能键时，就会跳转到带有饼状图的界面
在这里插入图片描述

第一步在显示界面添加功能按钮【饼状图】

<a class="btn btn-warning" onclick="$.operate.echartsFull()" shiro:hasPermission="system:score:echarts">
                    <i class="fa fa-download"></i> 饼状图
                </a>
1
2
3

echartsFull()方法作用是：当我点击【饼状图】的按钮时，就会触发向后端控制器请求跳转界面的命令。

在这里插入图片描述

echartsFull: function() {
                table.set();
                var url = table.options.echartUrl;
                $.modal.openFull("图" + table.options.modalName, url);

            },
1
2
3
4
5
6

下边就是像后端请求地路径
在这里插入图片描述

 echartUrl: prefix + "/echarts",
1

后端控制器，接收前端传过来的指令，向指定的界面跳转

/*跳转到指定的界面echart*/
    @GetMapping("/echarts")
    public String echarts()
    {
       return prefix + "/echart";
    }

1
2
3
4
5
6
7

echart.html

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增【请填写功能名称】')" />
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
</head>
<body class="white-bg">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 400px;height:300px;"></div>
<div id="main2" style="width: 400px;height:300px;"></div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script type="text/javascript">
    var prefix=ctx+"system/score";
    var pie=[];  //柱状图数据
    var column=[];
    var studentName=[];  //学生姓名
    var chinese=[];         //语文成绩
    var math=[];            //数学成绩
    var english=[];         //英语成绩
    var courseName=[];      //科目信息
    $.ajax({
        url: prefix+"/getDate",   		//向后端请求数据
        dataType: 'json',
        type: 'post',
        success:function (data) {
            // alert(JSON.stringify(data));
            pie = [];
            var len = data.length;
            for (var i = 0; i < len; i++) {
                var info = {};
                info.name = data[i].student.studentName;
                info.value = data[i].sum;
                pie.push(info);
                studentName.push(data[i].student.studentName);
                chinese.push(data[i].chinese);
                math.push(data[i].math);
                english.push(data[i].english);

            }
            var myChart = echarts.init(document.getElementById('main'));
            myChart.setOption({
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',    // 设置图表类型为饼图
                        radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                        data: pie,
                    }
                ]
            });
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById("main2"));
            option = {
                color: ['#003366', '#006699', '#4cabce', '#e5323e'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['语文', '数学', '英语']
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {show: false},
                        data: studentName,
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '语文',
                        type: 'bar',
                        barGap: 0,
                        data: chinese,
                        markPoint:{
                            data:[
                                {type:'max',name:'最大值'},
                                {type:'min',name:'最小值',symbol:'arrow'}
                            ]
                        },
                        markLine:{
                            data:[
                                {type: 'average',name:'平均值'}
                            ]
                        }
                    },
                    {
                        name: '数学',
                        type: 'bar',
                        data: math,
                        markPoint:{
                            data:[
                                {type:'max',name:'最大值'},
                                {type:'min',name:'最小值',symbol:'arrow'}
                            ]
                        },
                        markLine:{
                            data:[
                                {type: 'average',name:'平均值'}
                            ]
                        }
                    },
                    {
                        name: '英语',
                        type: 'bar',
                        data: english,
                        markPoint:{
                            data:[
                                {type:'max',name:'最大值'},
                                {type:'min',name:'最小值',symbol:'arrow'}
                            ]
                        },
                        markLine:{
                            data:[
                                {type: 'average',name:'平均值'}
                            ]
                        }
                    },
                ]
            };
            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
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

Controller

@PostMapping("/getDate")
    @ResponseBody
    public List<SysScore> getDate(){
        List<SysScore>list=sysScoreService.selectAll();
        return list;
    }
1
2
3
4
5
6

再次请求后端控制器，接收数据
最后我们看下效果

这个方式表达可能不是最好的，性能上还不是很好，打开的有些慢，原因是加载地东西有些多影响用户体验，望哪位大神给指点指点

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