学习公司Echarts做报表

Count2Controller类

@Autowired
    private Count2Service count2Service;


    @ModelAttribute
    public Count2 get(@RequestParam(required=false) String id) {
        Count2 entity = null;
        if (StringUtils.isNotBlank(id)){
            entity = count2Service.get(id);
        }
        if (entity == null){
            entity = new Count2();
        }
        return entity;
    }

    @RequestMapping(value = "echarts")
    public String echarts1() {
        return "modules/count2/echarts4";
    }

    @RequestMapping(value = "getEcharts3")
    @ResponseBody
    public String list(Count2 count2, HttpServletRequest request, HttpServletResponse response, Model model) {
        /*Page<Count2> page = count2Service.findPage(new Page<Count2>(request, response), count2);*/
        List<Count2> list= count2Service.findListByParentId1();
        List ls=new ArrayList();
        List ls1=new ArrayList();
        List ls2=new ArrayList();
        List ls3=new ArrayList();
        List ls4=new ArrayList();
        for (int i=0;i<list.size();i++){
            ls.add(list.get(i).getDepartId());
            ls1.add(list.get(i).getFaceload());
            ls2.add(list.get(i).getFingerprintload());
            ls3.add(list.get(i).getiPhoneload());
            ls4.add(list.get(i).getPCload());
        }
        Map<String, Object> data = Maps.newHashMap();
        //title
        Map<String, Object> titleMap = Maps.newHashMap();
        titleMap.put("text", "1级账户登陆方式成功失败统计");
        titleMap.put("left","center");
        data.put("title", titleMap);
        //tooltip
        Map<String, Object> tooltipMap = Maps.newHashMap();
        tooltipMap.put("trigger","axis");

Map<String, Object> axisPointer = Maps.newHashMap();
        axisPointer.put("type","shadow");
        tooltipMap.put("axisPointer",axisPointer);

        data.put("tooltip", tooltipMap);
        //legend
        Map<String, Object> legendMap = Maps.newHashMap();
        legendMap.put("data", Lists.newArrayList("成功","失败"));
        legendMap.put("show","true");
        data.put("legend",  legendMap);
        //grid
        Map<String, Object> gridMap = Maps.newHashMap();
        gridMap.put("left","100");

        data.put("grid",gridMap);
        //xAxis
        Map<String, Object> xAxisMap = Maps.newHashMap();
        xAxisMap.put("type","value");
        xAxisMap.put("boundaryGap","[0, 0.01]");
        data.put("xAxis",xAxisMap);
        Map<String, Object> axisLabelMap = Maps.newHashMap();
        axisLabelMap.put("inside", false);
        xAxisMap.put("axisLabel", axisLabelMap);

        data.put("xAxis",  xAxisMap);
        //yAxis
        Map<String, Object> yAxisMap = Maps.newHashMap();
        yAxisMap.put("type","category");
        /*yAxisMap.put("data",ls);*/
        yAxisMap.put("data",ls);
        data.put("yAxis",  yAxisMap);
        //series
        Map<String, Object> seriesMap = Maps.newHashMap();
        seriesMap.put("name", "人脸识别");
        seriesMap.put("type", "bar");
        seriesMap.put("data",ls1);

        Map<String, Object> seriesMap1 = Maps.newHashMap();
        seriesMap1.put("name", "指纹登陆");
        seriesMap1.put("type", "bar");
        seriesMap1.put("data",ls2);

        Map<String, Object> seriesMap2 = Maps.newHashMap();
        seriesMap2.put("name", "电话登陆");
        seriesMap2.put("type", "bar");
        seriesMap2.put("data",ls3);

        Map<String, Object> seriesMap3 = Maps.newHashMap();
        seriesMap3.put("name", "手机登陆");
        seriesMap3.put("type", "bar");
        seriesMap3.put("data",ls4);

        data.put("series", Lists.newArrayList(seriesMap,seriesMap1,seriesMap2,seriesMap3));
        String result = JSON.toJSONString(data);
        logger.info(result);
        return result;
    }

    @RequestMapping(value = "getEcharts4")
    @ResponseBody
    public String getNameByCategory(Count2 count1l, HttpServletRequest request, HttpServletResponse response, Model model){
        String result = "";
        String departid=count1l.getDepartId();
        List<Count2> list = count2Service.findListByParentIdSon1(departid);
        List ls=new ArrayList();
        List ls1=new ArrayList();
        List ls2=new ArrayList();
        List ls3=new ArrayList();
        List ls4=new ArrayList();
        for (int i=0;i<list.size();i++){
            ls.add(list.get(i).getDepartId());
            ls1.add(list.get(i).getFaceload());
            ls2.add(list.get(i).getFingerprintload());
            ls3.add(list.get(i).getiPhoneload());
            ls4.add(list.get(i).getPCload());
        }
        if(departid != null &&"1001".equals(departid)){
            result = getWayCommon(ls ,ls1,ls2,ls3,ls4);
        }
        if(departid != null &&"1002".equals(departid)){
            result = getWayCommon(ls ,ls1,ls2,ls3,ls4);
        }
        if(departid != null &&"1003".equals(departid)){
            result = getWayCommon(ls ,ls1,ls2,ls3,ls4);
        }
        if(departid != null &&"1004".equals(departid)){
            result = getWayCommon(ls ,ls1,ls2,ls3,ls4);
        }
        return result;
    }


    public String getWayCommon( List  ls,List ls1,List ls2,List ls3, List ls4){
        Map<String, Object> data = Maps.newHashMap();
        //title
        Map<String, Object> titleMap = Maps.newHashMap();
        titleMap.put("text", "2级账户登陆方式成功失败统计");
        titleMap.put("left","center");
        data.put("title", titleMap);
        //tooltip
        Map<String, Object> tooltipMap = Maps.newHashMap();
        tooltipMap.put("trigger","axis");

        Map<String, Object> axisPointer = Maps.newHashMap();
        axisPointer.put("type","shadow");
        tooltipMap.put("axisPointer",axisPointer);

        data.put("tooltip", tooltipMap);
        //legend
        Map<String, Object> legendMap = Maps.newHashMap();
        legendMap.put("data", Lists.newArrayList("成功","失败"));
        legendMap.put("show","true");
        data.put("legend",  legendMap);
        //grid
        Map<String, Object> gridMap = Maps.newHashMap();
        gridMap.put("left","100");

        data.put("grid",gridMap);
        //xAxis
        Map<String, Object> xAxisMap = Maps.newHashMap();
        xAxisMap.put("type","value");
        xAxisMap.put("boundaryGap","[0, 0.01]");
        data.put("xAxis",xAxisMap);
        Map<String, Object> axisLabelMap = Maps.newHashMap();
        axisLabelMap.put("inside", false);
        xAxisMap.put("axisLabel", axisLabelMap);

        data.put("xAxis",  xAxisMap);
        //yAxis
        Map<String, Object> yAxisMap = Maps.newHashMap();
        yAxisMap.put("type","category");
        /*yAxisMap.put("data",ls);*/
        yAxisMap.put("data",ls);
        data.put("yAxis",  yAxisMap);
        //series
        Map<String, Object> seriesMap = Maps.newHashMap();
        seriesMap.put("name", "人脸识别");
        seriesMap.put("type", "bar");
        seriesMap.put("data",ls1);

        Map<String, Object> seriesMap1 = Maps.newHashMap();
        seriesMap1.put("name", "指纹登陆");
        seriesMap1.put("type", "bar");
        seriesMap1.put("data",ls2);

        Map<String, Object> seriesMap2 = Maps.newHashMap();
        seriesMap2.put("name", "电话登陆");
        seriesMap2.put("type", "bar");
        seriesMap2.put("data",ls3);

        Map<String, Object> seriesMap3 = Maps.newHashMap();
        seriesMap3.put("name", "手机登陆");
        seriesMap3.put("type", "bar");
        seriesMap3.put("data",ls4);

        data.put("series", Lists.newArrayList(seriesMap,seriesMap1,seriesMap2,seriesMap3));
        String result = JSON.toJSONString(data);
        logger.info(result);
        return result;
    }

echarts4.jsp

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>


<html>
<head>
    <title>echart-测试1</title>
    <script src="${ctxStatic}/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="${ctxStatic}/echarts/echarts.min.js" type="text/javascript"></script>

</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<input id="return-button" type="button" value="返回"style="position: absolute;top: 10px;left: 503px;z-index: 9999999" >

<div id="main" style="width: 600px;height:400px;">
</div>
</body>
</html>

<script type="text/javascript">
    $('#return-button').on('click',function(){
        // 基于准备好的dom，初始化echarts实例
        var dom=document.getElementById('main');
        var myChart = echarts.init(dom);
        //定义option
        var option="";
        var option1 = "";
        var disButton = document.getElementById("return-button");
        disButton.style.display="none";
        $.ajax({
            type : "POST",
            url : '${ctx}/count2/count2/getEcharts3/',
            contentType : "application/json; charset=utf-8",
            dataType : 'json',
            cache : false,
            success : function(data) {
                // 使用刚指定的配置项和数据显示图表。
                option=data;
                myChart.setOption(option);
                myChart.on('click',function(object) {
                    // 销毁之前的echarts实例

                    echarts.dispose(dom);
                    // 初始化一个新的实例
                    var myChart = echarts.init(dom);
                    disButton.style.display="block";
                    $.ajax({
                        type: "get",
                        url: '${ctx}/count2/count2/getEcharts4' + '?departId='+object.name, // 此处可以替换为你的接口地址
                        dataType: 'json',
                        success: function (data) {
                            option1=data;
                            myChart.setOption(option1, true);

                        }
                    });
                })
            }
        });
    });
    // 基于准备好的dom，初始化echarts实例
    var dom=document.getElementById('main');
    var myChart = echarts.init(dom);
    //定义option
    var option="";
    var option1 = "";
    var disButton = document.getElementById("return-button");
    disButton.style.display="none";
    $.ajax({
        type : "POST",
        url : '${ctx}/count2/count2/getEcharts3/',
        contentType : "application/json; charset=utf-8",
        dataType : 'json',
        cache : false,
        success : function(data) {
            // 使用刚指定的配置项和数据显示图表。
            option=data;
            myChart.setOption(option);
            myChart.on('click',function(object) {
                // 销毁之前的echarts实例

                echarts.dispose(dom);
                // 初始化一个新的实例
                var myChart = echarts.init(dom);
                disButton.style.display="block";
                $.ajax({
                    type: "get",
                    url: '${ctx}/count2/count2/getEcharts4' + '?departId='+object.name, // 此处可以替换为你的接口地址
                    dataType: 'json',
                    success: function (data) {
                        option1=data;
                        myChart.setOption(option1, true);

                    }
                });
            })
        }
    });

</script>