echarts 获取后台的数据

来源：互联网发布：数据机房搬迁报价编辑：程序博客网时间：2024/04/29 22:13
<%@ 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 onload="loadData()"><div id="main" style="height:500px;width:800px;border:1px solid #ccc;padding:10px;"></div></body></html>
0 0