echarts 常见应用

 

如上图，点击页面上面的树，回弹出所选机构人员的统计情况。

ftl页面：

<div id="titleQualCharts" style="border:0px solid green;height:500px;"></div>

 

js脚本：

//显示职称资格分布图
    function showtitleQualCharts(){
        var orgaId=$("#orgaId").val();
        var includeChild=$("#includeChild").val();
        var myChart1 = echarts.init(document.getElementById('titleQualCharts'));
        option = {
            title : {
                text: '职称分布',
                subtext: '',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: (function(){
                    var arrNum = [];
                        $.ajax({
                            type: "POST",
                            async : false,
                            dataType: "json",
                            data:{"orgaId":orgaId,"includeChild":includeChild},
                            url: projectBath + "/esb/mdata/dataAnalysis/findTitleQualChartsData",
                            success:function(res){
                                    console.info(res.newRtnJSON);
                                    for (var i = 0; i < res.newRtnJSON.length; i++) {
                                           arrNum.push({"name":res.newRtnJSON[i].name});
                                       }
                            }
                        });
                       console.info(arrNum);
                        return arrNum;      
                      })()
            },
            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}
                }
            },
            series : [
                {
                    name: '职称',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:(function(){
                    var arrNum = [];
                        $.ajax({
                            type: "POST",
                            async : false,
                            dataType: "json",
                            data:{"orgaId":orgaId,"includeChild":includeChild},
                            url: projectBath + "/esb/mdata/dataAnalysis/findTitleQualChartsData",
                            success:function(res){
                                    console.info(res);
                                    console.info(res.newRtnJSON);
                                    for (var i = 0; i < res.newRtnJSON.length; i++) {
                                           arrNum.push({"value": res.newRtnJSON[i].value,"name":res.newRtnJSON[i].name});
                                       }
                            }
                        });
                       console.info(arrNum);
                        return arrNum;      
                      })(),
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart1.setOption(option);
    
    
    }

后台查数据方法，返回的数据为json格式：

    /**
     * 查询职称分布数据
     * @param orgaid
     * @return
     * @throws Exception 
     */
    @RequestMapping({"findTitleQualChartsData"})
    @ResponseBody
    public String findTitleQualChartsData(Model model,String orgaId,String includeChild) throws Exception{
        String syscode=sysOrgaService.findsyscode(orgaId);
        List<Object []>  list=personInfoService.findTitleQualChartsData(orgaId,includeChild,syscode);//查找职称分布数据
        String titleQualData ="";
        for(int i=0;i<list.size();i++){
            titleQualData+="{value:"+list.get(i)[1].toString()+", name:'"+list.get(i)[0].toString()+"'}";
            if(list.size()>1 ){
                if(list.size()-1==i){
                    titleQualData+="";    
                }else{
                    titleQualData+=",";    
                }
            }
        }
        String titleQualDatas="["+titleQualData+"]";
        model.addAttribute("titleQualDatas",titleQualDatas);
        JSON newRtnJSON = JSONSerializer.toJSON(titleQualDatas);
        JSONObject json = new JSONObject();
        json.put("newRtnJSON", newRtnJSON);
        return json.toString();
    }