百度图表ECharts的异步加载

来源：互联网发布：杨锦荣知乎编辑：程序博客网时间：2024/06/06 03:24

最近要用图表，所以去使用了下echarts，不过在异步加载的过程中一直无法显示，后来发现其实是个很坑的问题，因为之前做开发的时候一直都是ctrl + c，ctrl + v，导致自己都忘了在加载json的时候需要在方法的后面加上json参数！！

jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%String ctx = request.getContextPath();request.setAttribute("ctx", ctx);%><!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script src="${ctx}/statics/js/jquery-1.12.4.min.js"></script><script src="${ctx}/statics/js/echarts.js"></script></head><body><div id="mainCharts" style="width: 600px;height:400px;"></div><script>var myChart = echarts.init(document.getElementById('mainCharts'));// 显示标题，图例和空的坐标轴myChart.setOption({    title: {        text: '异步数据加载示例'    },    tooltip: {},    legend: {        data:['销量']    },    xAxis: {        data: []    },    yAxis: {},    series: [{        name: '销量',        type: 'bar',        data: []    }]});// 异步加载数据myChart.showLoading();$.get('${ctx}/ChartsServlet?method=test1',function (data) {myChart.hideLoading();    // 填入数据    myChart.setOption({        xAxis: {            data: data.categories        },        series: [{            // 根据名字对应到相应的系列            name: '销量',            data: data.data        }]    });}, 'json');</script></body></html>

java:

package com.liberty.echarts;import java.io.IOException;import java.util.HashMap;import java.util.Map;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.alibaba.fastjson.JSONObject;@WebServlet("/ChartsServlet")public class ChartsServlet extends HttpServlet {private static final long serialVersionUID = 1L;protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=utf-8");String method = request.getParameter("method");if("test1".equals(method)) {test1(request, response);}}private void test1(HttpServletRequest request, HttpServletResponse response) throws IOException {Map<String, Object> data = new HashMap<>();String[] cateArr = new String[]{"衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"};data.put("categories", cateArr);int[] dataArr = new int[]{5, 20, 36, 10, 10, 20};data.put("data", dataArr);response.getWriter().println(JSONObject.toJSON(data));}}

里面解析json使用的是alibaba的fastjson

0 0