echarts饼图动态获取数据

Myth丶恋晨 2022-03-20 13:46 460阅读 0赞

饼图获取动态数据

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

![1378915-20180710204609898-2114475955.png][]

官方文档例子的获取静态数据

option = {
        title : {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        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:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1548, name:'搜索引擎'}
                ]
            }
        ]
    };

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NDUwMDg5_size_16_color_FFFFFF_t_70][]

然后把官方文档例子的获取静态数据，改为用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对象，控制台打印数据格式如下：

![1378915-20180710205330834-510247425.png][]

** 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，百度一下就能找到**

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

![1378915-20180710210144646-138428773.png][]

[ajax动态赋值echarts（饼图和柱形图）][ajax_echarts]

[1378915-20180710204609898-2114475955.png]: /images/20220320/68d339b416b042fab9c0fdc5b6a05163.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NDUwMDg5_size_16_color_FFFFFF_t_70]: /images/20220320/78961acaad4745a39f884c109144461c.png
[1378915-20180710205330834-510247425.png]: /images/20220320/af87288c61474f7cbebf7c0af9e0ea65.png
[1378915-20180710210144646-138428773.png]: /images/20220320/cfdfc3a1a4a44618b32dca62e2acdc1e.png
[ajax_echarts]: https://blog.csdn.net/yangsitong1314/article/details/76984616