echarts饼图动态获取数据

　　弄这个饼图获取动态数据也弄了挺久，所以发出来，也是记录分享一下

　　首先页面引入jquery.js和echarts.js

　　然后把官方文档例子的获取静态数据，改为用ajax获取后台数据库传递数据：

　　echarts.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/echarts.js"></script>
    
</head>
<body>
    <div id="echartsPie" style="width: 800px; height: 600px;"></div>  
    
    
    <script type="text/javascript">  
        var echartsPie = echarts.init(document.getElementById('echartsPie'));  
        
        // $.get('js/data.json').done(function (data) {
            $.post("user_linkByPhone.action", function(datas) {
             s//alert(datas);
             console.log(datas);
              var data= $.parseJSON(datas);    //将传递过来的json字符串转化为对象
             //alert(data);
              console.log(data);
             var servicedata=[];
             for(var i=0;i<data.name.length;i++){
                 var obj=new Object();
                 obj.name=data.name[i]; 
                 obj.value=data.data[i];
                 servicedata[i]=obj;
                 
             }
            // alert(servicedata);
           
            echartsPie.setOption({
                title : {  
                    text: '月内点击量数据',  
                    subtext: '饼图',  
                    x:'center'  
                },  
                tooltip : {  
                    trigger: 'item',  
                    formatter: "{b} <br/>{c} : {d} %"      //a 系列名称，b 数据项名称，c 数值，d 百分比
                },  
                legend: {  
                    orient : 'vertical',  
                    x : 'left',  
                    data:data.name  
                },
                toolbox: {  
                    show : true,  
                    feature : {  
                        mark : {show: true},  
                        dataView : {show: true, readOnly: false},  
                        magicType : {  
                            show: true,   
                            type: ['pie', 'funnel'],  
                            option: {  
                                funnel: {  
                                    x: '25%',  
                                    width: '50%',  
                                    funnelAlign: 'left',  
                                    max: 1548  
                                }  
                            }  
                        },  
                        restore : {show: true},  
                        saveAsImage : {show: true}  
                    }  
                },  
                calculable : true,  
                series : [  
                    {  
                        name:'点击量',  
                        type:'pie',  
                        radius : '55%',//饼图的半径大小  
                        center: ['50%', '60%'],//饼图的位置  
                        data:servicedata
                    }  
                ]    
            })
    })
    
</script>  

</body>
</html>

后台传递json字符串，在页面转化为json对象，控制台打印数据格式如下：

UserAction.java:

/**
     * 根据手机号把该账户下的点击用户查找
     * @throws IOException 
     * 
     * */
    public String linkByPhone() throws IOException {
        HttpServletRequest req=ServletActionContext.getRequest();
        HttpServletResponse resp = ServletActionContext.getResponse();
        resp.setCharacterEncoding("UTF-8");
        String serviceNumber=req.getParameter("phoneNum");
        
        String count=user4Service.findByNumber(serviceNumber);
        String countToday=user4Service.findNUmberToday(serviceNumber);

        //String[] categories= {"今日点击量","总点击量"};
        //String[] data= {countToday,count};
        String[] name= {"一月内点击量","一周内点击量","昨天点击量","今天点击量"};
        String[] data= {"233","121","97","23"};

        Map<String, Object> map = new HashMap<>();
        //map.put("count", count);
        //map.put("countToday", countToday);
        map.put("name", name);
        map.put("data", data);
        
        Gson gson=new Gson();
        String mapJson=gson.toJson(map);
        System.out.println(mapJson);
        
        PrintWriter out = resp.getWriter();
        out.print(mapJson);
        out.flush();
        out.close();
    
        return null;
    }

　　这里用了一个gson.jar，百度一下就能找到

　　为了显示的美观些，我把数据库获取的数据换成了静态数据，效果图如下：

echarts饼图动态获取数据

猜你喜欢