Echarts使用json异步通信

最新推荐文章于 2024-05-15 14:53:08 发布

Llwjz

最新推荐文章于 2024-05-15 14:53:08 发布

阅读量565

点赞数

分类专栏： java 文章标签： Echarts json ajax

本文链接：https://blog.csdn.net/awjzb/article/details/72026759

版权

java 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前端

<%@ 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 {

	@Override
	protected 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());
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		super.doPost(req, resp);
	}
	

}