Echarts使用json异步通信

来源：互联网发布：fifaaol3数据库编辑：程序博客网时间：2024/06/03 22:02

前端

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><html>  <head>    <title>My JSP 'index.jsp' starting page</title><script type="text/javascript" src="jquery-3.2.1.js"></script><script type="text/javascript" src="echarts.js"></script>  </head>    <body>    <div id="main" style="width: 600px;height:400px;"></div>    <script type="text/javascript">    var myChart = echarts.init(document.getElementById('main'));    $.getJSON("dataServlet").done(function (data) {         myChart.setOption({        title: {            text: '异步数据加载示例'        },        tooltip: {},        legend: {            data:['销量']        },        xAxis: {            data: data.categories        },        yAxis: {},        series: [{            name: '销量',            type: 'bar',            data: data.data        }]        });    });        </script>  </body></html>

后台

package Servlet;import java.io.IOException;import java.util.ArrayList;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONObject;public class DataServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// TODO Auto-generated method stub//super.doGet(req, resp);;ArrayList<String> categories = new ArrayList<String>();categories.add("s1");categories.add("s2");categories.add("s3");categories.add("s4");categories.add("s5");categories.add("s6");ArrayList<Integer> data = new ArrayList<Integer>();data.add(5);data.add(20);data.add(36);data.add(10);data.add(10);data.add(20);JSONObject jsonObj = new JSONObject();jsonObj.put("categories", categories);jsonObj.put("data", data);resp.getWriter().write(jsonObj.toString());}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// TODO Auto-generated method stubsuper.doPost(req, resp);}}

0 0