码迷,mamicode.com
首页 > Web开发 > 详细

echarts 折线图 ajax 请求数据

时间:2020-04-05 22:28:58      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:获取   pack   准备   vax   全球   失败   http   ota   method   

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <%@page import="com.Bean.*"%>
 4 <%@page import="java.util.List"%>
 5 <!DOCTYPE html>
 6 <html lang="en">
 7 <head>
 8   <meta charset="UTF-8">
 9   <meta name="viewport" content="width=device-width, initial-scale=1.0">
10   <title>疫情地图展示</title>
11   <style>
12     #myEcharts {
13       width: 800px;
14       height: 600px;
15       border: solid 1px red;
16       margin: 0 auto;
17     }
18   </style>
19   <!-- 引入 echarts.js  直接在Echarts 网站找到的线上的js文件 不需要下载 下面一样 -->
20   <script src="https://www.echartsjs.com/examples/vendors/echarts/echarts.min.js?_v_=1578305236132"></script>
21   <!--引入中国的地图数据js文件,引入后会自动注册地图名字和数据-->
22   <script src="https://www.echartsjs.com/examples/vendors/echarts/map/js/world.js?_v_=1584687926098"></script>
23  <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
24 </head>
25 
26 <body>
27  
28 
29 
30 
31   <!--为echarts准备一个dom容器-->
32   <div id="myEcharts"></div>
33   <script>
34   
35   var myChart = echarts.init(document.getElementById(‘myEcharts‘));
36   option = {
37           title:{
38             text: ‘全球疫情走势(确诊人数)‘  
39           },
40             xAxis: {
41                 type: ‘category‘
42             
43             },
44             yAxis: {
45                 type: ‘value‘,
46                 
47             },
48             series: [{
49                 type: ‘line‘,
50                 smooth:true
51             }],
52         };
53   myChart.setOption(option);
54   var times=[];
55   var nums=[];
56   //异步操作获取数据
57   line_url= "${pageContext.request.contextPath }/lineServlet";
58   $.ajax({
59         //url 地址
60         url:line_url,
61         //是否异步 默认为异步
62         async:true,
63         //请求方式,POST/GET
64         type:"POST",
65         data:{"name":"lucy","age":18},
66         //成功响应执行的函数,对应的类型是function类型
67         //用result 操作返回的数据
68         success:function(result){
69             if(result){
70                 for(var i=result.length-1;i>=0;i--)
71                     {
72                     times.push(result[i].data);
73                     nums.push(result[i].number);
74                     }
75                 myChart.setOption({
76                     xAxis:{
77                         //给x轴赋值
78                         data:times
79                     },
80                     series:[{
81                         //y轴
82                         data:nums
83                     }]
84                         });
85                 }
86         },
87         //错误响应执行的函数,对应的类型是function类型
88         error:function(msg){
89             alert("数据请求失败");
90         },
91         //服务器端返回的数据类型,常用text和json 请求的Servlet 必须返回json 类型的数据才可以
92         dataType:"json"
93     });
94   </script>
95 </body>
96 
97 </html>
 1 package com.Servlet;
 2 
 3 import java.io.IOException;
 4 import java.util.List;
 5 
 6 import javax.servlet.ServletException;
 7 import javax.servlet.annotation.WebServlet;
 8 import javax.servlet.http.HttpServlet;
 9 import javax.servlet.http.HttpServletRequest;
10 import javax.servlet.http.HttpServletResponse;
11 
12 import com.Bean.line;
13 import com.Dao.Dao;
14 import com.google.gson.Gson;
15 
16 /**
17  * Servlet implementation class lineServlet
18  */
19 @WebServlet("/lineServlet")
20 public class lineServlet extends HttpServlet {
21     private static final long serialVersionUID = 1L;
22        
23     /**
24      * @see HttpServlet#HttpServlet()
25      */
26     public lineServlet() {
27         super();
28         // TODO Auto-generated constructor stub
29     }
30 
31     /**
32      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
33      */
34     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
35         // TODO Auto-generated method stub
36         response.setContentType("text/html;charset=UTF-8");
37         request.setCharacterEncoding("UTF-8");
38         String data=null;
39         String date = request.getParameter("name"); 
40         String age =request.getParameter("age");
41         System.out.println(age+date);
42         // Gson 谷歌推出的用于生成和解析JSON 数据格式的工具 使用时需要 导入jar 包 我的是 gson-2.6.2.jar
43         Gson gson=new Gson();
44         try {
45             List<line> list=Dao.getline(); //返回的是类型为line 的list
46             data=gson.toJson(list);
47         } catch (Exception e) {
48             // TODO Auto-generated catch block
49             e.printStackTrace();
50         }
51         //System.out.println(data);
52         response.getWriter().write(data);
53     }
54 
55     /**
56      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
57      */
58     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
59         // TODO Auto-generated method stub
60         doGet(request, response);
61     }
62 
63 }

在ajax 当中调用的 result[i].data 和 result[i].number 与bean 类当中的line.java 有关 。

json 类似 key-value  的key  就是line.java 定义的类型

echarts 折线图 ajax 请求数据

标签:获取   pack   准备   vax   全球   失败   http   ota   method   

原文地址:https://www.cnblogs.com/cxy0210/p/12639195.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!