ECharts3.0 强大的统计图

简单一个案例
JSP:

引入相应的js即可

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">





"Content-Type" content="text/html; charset=UTF-8">


    
"main1" style="width: 600px; height: 400px; float: left;">
    

    
"main" style="width: 600px; height: 400px; float: right;">

java:采用的是jfinal框架 只要能返回json就行 用response也行

    public void getJson() {
        //查询条件集合
        List find = Project.dao.find("SELECT Count(1) as 'value', t.name from pro_project p,pro_type t where p.TYPE_ID=t.id  GROUP BY t.name");
        //拼装json
        Map<Object, Object>map =new HashMap<Object, Object>();
        List<Object> nameList = new ArrayList<Object>();
        List<Object> dataList = new ArrayList<Object>();
        for (Project p : find) {
            JSONEntity entity =new JSONEntity((String)p._getAttrValues()[0],(Long) p._getAttrValues()[1] );
            dataList.add(p._getAttrValues()[0]);
            nameList.add(entity);
        } 
        map.put("type",  dataList);
        map.put("data", nameList);
        System.out.println(JSONObject.toJSONString(map));
        //返回客户端json
        renderJson(JSONObject.toJSONString(map));

//返回的数据为

{"data":[{"name":"多媒体","value":465},{"name":"实验室","value":162},{"name":"教学","value":29},{"name":"综合","value":413},{"name":"软件","value":167},{"name":"顶层设计","value":67}],"type":["多媒体","实验室","教学","综合","软件","顶层设计"]}

注意啊data.type的值一定和data.data的长度一样
看图