easyui-panel Demo

//easyui-panel描绘统计图
//查询数据库 获取 统计图 所需的数据信息
    function postdata(){
        $.ajax({
            url:‘’,
            type:'',
            data: $('#frmAdd').serialize(),
            success:
            function(msg){
                var childArr=eval('(' + msg + ')'); 
                var pie = childArr['pie'];
                var zhu = childArr['zhu'];
                showpie(pie);//饼状图
                showzhu(zhu);//柱状图
            }
        });
        postquerytable();
    }
    function showpie(pie){
        chart_pie = new Highcharts.Chart({
             plotOptions: {
              series: {
               cursor: 'pointer',
               events: {
                click: function(e) {
                 // alert($('.highcharts-tooltip').find('text').find('tspan').first().html());
                }
               }
              }
             },
            chart: {
                renderTo: 'container_pie'  //渲染容器
            },
            title: {
                text: 'xxx占比图'
            },
            credits: {
                enabled: false //去掉右下角的版权链接
                // text: 'baidu.com',//更改右下角的链接
                // href: 'http://www.baidu.com'
            }, 
            exporting: {  
                enabled:false  //右上角的 打印与 下载按钮
            },  
            // xAxis: {
            //  categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
            // },
            tooltip: {
                formatter: function() {
                    var s;
                    if (this.point.name) { // the pie chart
                        s = ''+
                            this.point.name +': '+ this.y +' %';
                    } else {
                        s = ''+
                            this.x  +': '+ this.y;
                    }
                    return s;
                }
            },
            legend: {
                symbolRadius: 4,
                backgroundColor: '#FFFFFF',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            // labels: {
            //  items: [{
            //      html: 'Total fruit consumption',
            //      style: {
            //          left: '40px',
            //          top: '8px',
            //          color: 'black'              
            //      }
            //  }]
            // },
            series: [{
                type: 'pie',
                name: 'Total consumption',
                data: [{
                    name: '',
                    y: pie['login'],
                    color: '#4572A7' // Jane's color
                }, {
                    name: '',
                    y: pie['unlogin'],
                    color: '#AA4643' // John's color
                }],
                // center: [280,140],
                // size: 240,
                showInLegend: true
            }]
        });
    }
    function showzhu(zhu){
        //柱状图
        chart_zhu = new Highcharts.Chart({
                chart: {
                    renderTo: 'container_zhu',
                    defaultSeriesType: 'column'
                },
                title: {
                    text: 'xx情况统计'
                },
                credits: {
                    enabled: false //去掉右下角的版权链接
                    // text: 'baidu.com',//更改右下角的链接
                    // href: 'http://www.baidu.com'
                }, 
                exporting: {  
                    enabled:false  //右上角的 打印与 下载按钮
                },  
                xAxis: {
                    categories: ['','', '', '', '']
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: ''
                    }
                },
                legend: {

                    symbolRadius: 4,
                    backgroundColor: '#FFFFFF',
                    borderColor: '#CCC',
                    borderWidth: 1,
                    shadow: false
                },
                tooltip: {
                    formatter: function() {
                        return ''+
                             this.series.name +': '+ this.y 
                             // 'Total: '+ this.point.stackTotal;
                    }
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',

                    }
                },
                    series: [{
                    name: '',
                    data: [zhu['nums'], 0, 0, 0, 0],
                    visible:true
                },{
                    name: '',
                    data: [0,zhu['loginNum'], 0, 0, 0],
                    visible:true
                }, {
                    name: '',
                    data: [0,0, zhu['avgNum'], 0, 0],
                    visible:true
                }, {
                    name: '',
                    data: [0,0, 0, zhu['maxNum'], 0],
                    visible:true
                }, {
                    name: '',
                    data: [0,0, 0, 0, zhu['minNum']],
                    visible:true
                }]
            });
    }