若依框架+Ajax实现柱状图和饼图

最新推荐文章于 2024-06-22 15:10:18 发布

平平常常一般牛

最新推荐文章于 2024-06-22 15:10:18 发布

阅读量1.8k

点赞数 1

分类专栏： Ruoyi

折扇戏美人

本文链接：https://blog.csdn.net/CSDN_java1005/article/details/110939627

版权

Ruoyi 专栏收录该内容

6 篇文章 10 订阅

订阅专栏

若依框架+Ajax实现柱状图和饼图

设置跳转按钮
在这里插入图片描述
echartsFull()方法触发事件，跳转

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

            },

当我触发这个事件就会跳转到指定后端路径，再由后端映射到前端界面显示我想显示的内容。

echartUrl: prefix + "/echarts",

scoreController.java
在这里插入图片描述

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

    @PostMapping("/getDate")
    @ResponseBody
    public List<SysScore> getDate(){
        List<SysScore>list=sysScoreService.selectAll();
        return list;
    }

sysScoreService.selectAll();这个方法是我在Mapper配置项中重新书写的新的查询方法，主要是查询学生的成绩和学科信息。

 <select id="selectAll" parameterType="Integer" resultMap="SysScoreResult">
   SELECT st.`student_id`,st.`student_name`,
		SUM(CASE WHEN   c.`course_id`='1' THEN s.`score_name` END )AS 'chinese',
		SUM(CASE WHEN   c.`course_id`='2' THEN s.`score_name`  END )AS 'math',
		SUM(CASE WHEN   c.`course_id`='3' THEN s.`score_name`  END )AS 'english',
		SUM(s.score_name) AS 'sum'
		FROM sys_score s INNER JOIN sys_student st ON s.`student_sid`=st.`student_id`
		INNER JOIN sys_course c ON c.`course_id`=s.`course_cid`
		GROUP BY st.`student_id`,st.`student_name`
    </select>

在可视化工具中显示是这样的
在这里插入图片描述
跳转的显示图形的路径，如下

<!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>