Echarts异步加载后端接口返回的Json数据生成图表

     一.Echarts 是一款很好用的前端报表制作工具,根据官网的开发文档,我们可以导入假数据制作各种分析的图表.详情看官网:Echarts官网案例.但是如果要根据实际情况导入真实的数据呢?怎么处理?

     操作的常规思路是这样的: 

     1.根据需要的业务逻辑编写后端接口,返回对应业务需求的JSON格式数据,具体参考本人之前的博文:SSM编写http接口返回JSON格式数据

     2.定义一个data为空的myChart,并赋值给对应的div显示

     3.定义对应数组,接收解析后的后台返回的JSON数据

     4.myChart.setOption方法中添加该数组

   二.源码

package com.ytdx.entity;

import java.io.Serializable;

public class EchartsEntity implements Serializable {
    private String name;
    private Integer num;
	public EchartsEntity(String name, Integer num) {
		super();
		this.name = name;
		this.num = num;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Integer getNum() {
		return num;
	}
	public void setNum(Integer num) {
		this.num = num;
	}
    
}

package com.ytdx.action;

import java.util.ArrayList;
import java.util.List;


import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import com.ytdx.entity.EchartsEntity;
import com.ytdx.util.JsonUtils;
import com.ytdx.util.ListObject;
import com.ytdx.util.ResponseUtils;
import com.ytdx.util.StatusCode;

@Controller
public class EchartsAction {

	@RequestMapping(value = "/Echarts")
	public void findById(HttpServletResponse response) {
		ListObject listObject = new ListObject();
		List list = new ArrayList();     //这里是后台添加假数据,可以改写成数据查询的方式
		list.add(new EchartsEntity("帽子",50));
		list.add(new EchartsEntity("鞋子",126));
		list.add(new EchartsEntity("毛衣",75));
		list.add(new EchartsEntity("羽绒服",201));
		list.add(new EchartsEntity("羊毛衫",172));
		listObject.setItems(list);
		listObject.setCode(StatusCode.CODE_SUCCESS);
		listObject.setMsg("成功");
		ResponseUtils.renderJson(response, JsonUtils.toJson(listObject));
	}
	
	@RequestMapping(value="/EchartsShow")
	public ModelAndView MyResource(ModelAndView mv) {
		mv.setViewName("/admin/Echarts");
		return mv;
	}
}

访问  http://localhost:8080/SnsSystem/Echarts ,获得返回的JSON数据

前端Ajax的get请求http://localhost:8080/SnsSystem/Echarts ,根据返回的状态码解析JSON数据,并赋值给定义好的对应数据

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

三.结果