echarts例項，前後臺數據呼叫

阿新 • • 發佈：2019-01-17

第一步：testEcharts.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ECharts">
    <meta name="author" content="

[email protected]">
<title>ECharts · Example</title>

https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<body>
    
    <div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>
      <a style="margin-left:1300px" href="${pageContext.request.contextPath}/userAction_ExportWORD.action?url=<%=basePath%>/testline1.jsp"><img alt="" title="world下載" src="<%=basePath%>/echarts-2.2.1/doc/slide/img/echarts_logo.png" style="width:30px;height:30px"></a>

<div class="container-fluid">
        <div class="row-fluid example">
            <div id="sidebar-code" class="col-md-4">
                <div class="well sidebar-nav">
                    <div class="nav-header"><a href="#" onclick="autoResize()" class="glyphicon glyphicon-resize-full" id ="icon-resize" ></a>option</div>
                    <textarea id="code" name="code" style="display: none">
      option = {
        title : {
        text: '北京天融信有限公司人員資訊',
        subtext: '純屬虛構'
    },
                   toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                         saveAsImage : {
        show : true,
        title : '儲存為圖片',
        type : 'png',
        lang : ['點選儲存']
    }
                    }
                },
                calculable : true,
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['人員資訊']
                    },
                    xAxis : [
                        {
                            type : 'category',
                          // data : ["襯衫","羊毛衫","球衣","運動鞋"]
                            data:(
                              xz()
                                    )
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"人員資訊",
                            "type":"bar",
                            //"data":[4,6,33,111]//"" 0
                                "data":(
                                  yz()
                                     // )
                                )//data完畢
                        }
                    ]
                };

                    </textarea>
              </div>
            </div>
            <div id="graphic" class="col-md-8">
                <div id="main" class="main">
                <a href="" type="button" value="rrr">555tytytuyu</a>
                </div>

     <script type="text/javascript">
    function xz(){
        var arr=[];
        $.ajax({
           type:"post",
           async:false,//同步執行
           url : "${pageContext.request.contextPath}/userAction_testEcharts.action",
           data:{},
           dataType:"json",//返回資料形式為json
           success:function(result){
               alert("回撥成功");
//start
if(result){
for(var i=0;i<result.length;i++){
  //console.log(result[i].name);
  arr.push(result[i].name);
  }
}
//end

               },//---
               error:function(errorMsg){
                   alert("不好意思大爺，圖表請求資料失敗了。");
                   myChart.hideLoading();

                   }
            })

     return arr;

        }
        //end

     return arr;

        }
        //end
   </script>






                <div>
                    <button type="button" class="btn btn-sm btn-success" onclick="refresh(true)">刷新</button>
                    <span class="text-primary">切換主題</span>
                    <select id="theme-select"></select>

<footer id="footer"></footer>
    
    
    <script src="<%=basePath%>/echarts-2.2.1/doc/asset/js/jquery.min.js"></script><%--
    <script type="text/javascript" src="<%=basePath%>/echarts-2.2.1/doc/asset/js/echartsHome.js"></script>
    --%><script src="<%=basePath%>/echarts-2.2.1/doc/asset/js/bootstrap.min.js"></script>
    <script src="<%=basePath%>/echarts-2.2.1/doc/asset/js/echartsExample.js"></script>
</body>
</html>

第二步：呼叫後臺此方法

/**
* testecharts
* @throws IOException
* @throws Exception
*/
public String testEcharts() throws IOException {
  List<User> queryList = userService.query(user);
  //PrintWriter writer=null;
  //for (User user : queryList) {
   //user.setName(user.getName());
   //String name = user.getName();
   //int num = user.getNum();
   //user.setName(user.get)
   //queryList.add(user);
  //}
/* JSONArray json=null;
  try {
  //呼叫jsonAray.fromobject方法把array中的物件轉換為json格式的陣列
   json = JSONArray.fromObject(queryList);//得到的是json資料的陣列
  String jsonString = json.toString();
  System.err.println("jsonString:"+jsonString);
  // 返回給前臺頁面


   writer = response().getWriter();
  } catch (IOException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
  writer.println(json);
  writer.flush();
  writer.close();

  return null;

}
*/
  // System.err.println(userList);
  Gson gson = new Gson();
  /**
   * //[{"id":1,"loginName":"admin","password":
   * "21232f297a57a5a743894a0e4a801fc3",
   * "name":"\u8d85\u7ea7\u7ba1\u7406\u5458","beginTime":{},"endTime":{}},
   * {"id":2,"loginName":"shen","password":
   * "81dc9bdb52d04dc20036dbd8313ed055"
   * ,"name":"shen","gender":"\u5973","phoneNumber"
   * :"","email":"","description":"","beginTime":{},"endTime":{}}]
   */
  String json = null;
  try {
   json = gson.toJson(queryList);
   System.err.println(json);

  } catch (Exception e) {
   e.printStackTrace();
  }

PrintWriter out = response().getWriter();

  out.print(json);
  out.flush();
  out.close();
  return null;
}
}

頁面顯示情況如下

echarts例項，前後臺數據呼叫

echarts例項，前後臺數據呼叫

Jquery+PHP實現簡單的前後臺數據交互實現註冊登錄，添加留言功能

node+mysql+ajax+javascript搭建一套服務介面，實現前後臺數據請求

ajax實現前後臺數據同步，實現類似進度條功能。

使用Ajax提交資料，進行前後臺數據互動

第一次前後臺數據獲取的經驗

用PHP和Ajax進行前後臺數據交互——以用戶登錄為例

asp.net使用easyUI 前後臺數據交互

前後臺數據交互

vue前後臺數據互動vue-resource文件

JAVA Web開發中前後臺數據互動中文亂碼問題解決方法及說明

springmvc 前後臺數據傳遞

web前後臺數據互動的四種方式(轉)

05-springMVC前後臺數據傳遞之預設引數總結

web前後臺數據互動的幾種方式

ajax前後臺數據簡單互動（ssm）

java前後臺數據互動【親測】

web 前後臺數據互動的方式

Vue.js 2.0以後模擬前後臺數據互動

extjs ajax方式前後臺數據傳送(json格式)

echarts例項，前後臺數據呼叫

相關推薦