Echarts 动态获取数据进行图表的展示

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

Echarts官网的demo都采用的数据都是静态数据,本demo是在Echarts官网入门demo的基础上改的,从后台 获取数据并展示

1. 前端页面代码  

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
%>

 


ECharts

 

   
   


   
   
   
   
   

 

2. 后台数据封装代码 

//通过ajax请求数据 将请求的数据返回到页面进行图表的显示
    @RequestMapping("gettestdata")
    public void getTestData(HttpServletResponse response) {
        List legend = new ArrayList(Arrays.asList(new String[] { "销量"}));
        List axis = new ArrayList(
                Arrays.asList(new String[] { "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" }));
        List series = new ArrayList();
        series.add(new Series("销量", "bar", new ArrayList(Arrays.asList(5, 20, 40, 10, 10, 20))));
        Echarts echarts = new Echarts(legend, axis, series);
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out;
        try {
            out = response.getWriter();
            Gson gson = new Gson();
            String str = gson.toJson(echarts);
            System.out.println("str:"+str);
            out.write(str);
            out.flush();
            out.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

 

转载于:https://my.oschina.net/dreamerliujack/blog/809241

你可能感兴趣的:(Echarts 动态获取数据进行图表的展示)