echarts 获取后台的数据

最新推荐文章于 2024-09-28 22:03:19 发布

酷似雨

最新推荐文章于 2024-09-28 22:03:19 发布

阅读量3.7k

点赞数 1

分类专栏： web前端文章标签： echarts 获取后台数据

本文链接：https://blog.youkuaiyun.com/huling2361/article/details/43560979

版权

web前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用ECharts实现的在线课程作业成绩统计图表案例。该案例通过Ajax获取后端数据，并利用ECharts的模块加载特性，实现了动态加载所需的图表类型，包括柱状图和折线图等。同时，还展示了如何设置图表的基本属性如标题、提示框、图例等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>系统消息</title>
<!-- eCharts -->
<script type="text/javascript" src="<%=basePath%>frontpage/common/js/jquery-1.7.2.min.js"></script>
<link href="<%=basePath%>frontpage/plugs/echarts/css/echartsHome.css" rel="stylesheet" type="text/css" />
<script src="<%=basePath%>frontpage/plugs/echarts/echarts.js"></script>
<script src="<%=basePath%>frontpage/plugs/echarts/macarons.js"></script> 

<script type="text/javascript">
	
    // Step:3 conifg ECharts's path, link to echarts.js from current page.
    // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
    require.config({
        paths: {
            echarts: '<%=basePath%>frontpage/plugs/echarts'
        }
    });
    
    var id = '4028824c4b2eee12014b2ef2e61f0009';
    var nameList = [];
    var scoreList = [];
    var homeworkName = '';
    function loadData(){
    	 $.ajax({
    			url : "<%=basePath%>frontstage/Statistics_statisticsByHomework?homeworkId="+id,
    			type : "post",
    			dataType : "json",
    			cache : false,
    			success : function(data) {
    			 	nameList = data.nameList;
    			 	scoreList = data.scoreList;
    			 	homeworkName = data.homeworkName; 
    			}/* ,
    			error : function(errorMsg) {  
    	            alert("图表请求数据失败啦!");  
    	            myChart.hideLoading();  
    	        }   */
    		}); 
    
   
    
    // Step:4 require echarts and use it in the callback.
    // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
    require(
        [
            'echarts',
            'echarts/chart/bar',
            'echarts/chart/line',
            'echarts/chart/map'
        ],
        function (ec) {
        	//var id = '468989284b160583014b16096f180001';
        	//loadData(id);
            //--- 折柱 ---
            var myChart = ec.init(document.getElementById('main'),e_macarons);
            myChart.setOption({
            	title : {
                    text: homeworkName+'成绩统计',
                    subtext: '作业分数统计'
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['成绩']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: true},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        data : nameList
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLabel : {
                            formatter: '{value} 分'
                        }
                    }
                ],
                series : [
                    {
                        name:'得分',
                        type:'line',
                        data:scoreList,
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }
                    }/* ,
                    {
                        name:'最低气温',
                        type:'line',
                        data:[1, -2, 2, 5, 3, 2, 0],
                        markPoint : {
                            data : [
                                {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name : '平均值'}
                            ]
                        }
                    } */
                ]
            });
   
        }
    );
   }
    </script>
 </head>   
    
<body οnlοad="loadData()">
	
	<div id="main" style="height:500px;width:800px;border:1px solid #ccc;padding:10px;"></div>
		
	
</body>
</html>