echarts 折线图 ajax 请求数据
Posted 半暖时光丶
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts 折线图 ajax 请求数据相关的知识，希望对你有一定的参考价值。
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 请求数据的主要内容，如果未能解决你的问题，请参考以下文章