echarts 饼状图、柱状图

 饼状图：

 　前台js代码：

　 这个少不了<script src="${ctxStatic}/echarts-5.0.2/dist/echarts.min.js" type="text/javascript"></script>

<script type="text/javascript">
        $(document).ready(function() {
            $("#btnExport").click(function(){
                var exportSrc="后台导出接口",
                src="页面原查询接口",
                $("#searchForm").attr("action",exportSrc);
                $("#searchForm").submit();
                $("#searchForm").attr("action",src);
            });
        });
</script>

<form:form id="searchForm" style="padding:8px 5px" modelAttribute="sysRenShiTongJiInfo" action="" method="post" class="breadcrumb form-search">
　　<%-- form表单中的隐藏域，用于传递饼状图的base64编码和图片大小 --%>
　　<input id="fileContents" name="fileContents" type="hidden" value=""/>
　　<input id="fileSizes" name="fileSizes" type="hidden" value=""/>
　　<input id="btnExport" style="font-size:13px;width: 40px;padding-left: 6px;height: 26px;padding-top: 2.5px;" class="btn btn-primary" type="button" value="导出">
</form:form>
<div class="echarts" style="width:90%;height:320px" id="useStats-pie-chart"  align="center">
</div>

<script type="text/javascript">
        var dataValue="${val}";//用于解析后台传递的string类型数据 eg:"2536-正式员工,236-实习生,18-离职人员,364-试用期"
        var datau=[];
        for(var i=0;i<dataValue.split(",").length; i++){
            datau[i] = new Object();
            datau[i].value=Number(dataValue.split(",")[i].split("-")[0]);
            datau[i].name=dataValue.split(",")[i].split("-")[1];
        }
        var pieChart = echarts.init(document.getElementById("useStats-pie-chart"));//页面div的id：useStats-pie-chart
        var pieoption = {
            backgroundColor: '#ffffff',
            title: {
                text: '人事统计汇总',
                left: 'center',
                top:10
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)" //页面饼状图中 扇形区域显示的数据样式
            },
            legend: {
                orient: 'vertical',
                type: 'scroll',
                right: 100,
                top:100,
                bottom: 20,
                textStyle: { //图例文字的样式
                    color: '#333',
                    fontSize: 12
                },
                data:[ 
                    {name: '正式员工',icon: 'pin'},
                    {name: '试用期',icon: 'pin'},
                    {name: '实习生',icon: 'pin'},
                    {name: '外租',icon: 'pin'},
                    {name: '离职中',icon: 'pin'},
                ]
            },
            toolbox: {//右侧工具栏
                show: false,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    saveAsImage: {show: true}//下载按钮
                }
            },
            calculable : true,
            animation :false,
            series : [
                {
                    name: '人事统计汇总',
                    type: 'pie',
                    radius: '65%',
                    center: ['50%', '55%'],
                    label: {
                        position : 'outside',
                        formatter: '{b|{b}}：{c}  {per|{d}%}',
                        fontSize:14,
                        rich: {
                            b: {
                                color: '#4C5058',
                                fontSize: 14,
                                fontWeight: 'bold'
                            },
                            per: {
                                color: '#fff',
                                backgroundColor: '#4C5058',
                                padding: [3, 4],
                                borderRadius: 4
                            }
                        }
                    },
                    labelLine:{
                        length:20,
                        length2:50,
                        smooth:0.2,
                    },
                    data:datau, //datau 前台根据后台传递数据 拼接的数据 eg:[{name:'正式员工',value:2536},{name:'实习生',value:'236'}]
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        pieChart.setOption(pieoption);
        $(window).resize(pieChart.resize);
    
        // 饼状图内容，需要encodeURIComponent编码，防止传输过程符号丢失
        var fileContent = encodeURIComponent(pieChart.getDataURL());
        $("#fileContents").val(fileContent);
        // 图片宽度和高度，为了计算图片比例，以便在excel中以正常比例显示，不至于拉伸       
        var fileSize = pieChart.getWidth() + ":" + pieChart.getHeight();
        $("#fileSizes").val(fileSize);
        
    </script>

　后台代码：

　　@RequestMapping(value="前台接口")
    public String exportRenShiByYue(SysRenShiTongJiInfo sysRenShiTongJiInfo,
            HttpServletRequest request,HttpServletResponse response,
            RedirectAttributes redirectAttributes,Model model){
        String fileContent=request.getParameter("fileContents");
        String endDate=sysRenShiTongJiInfo.getEndDate();
        if(sysRenShiTongJiInfo.getEndDate()!=null && !"".equals(sysRenShiTongJiInfo.getEndDate()))
        {
            int day=DateUtils.getMonthLastDay(Integer.parseInt(endDate.substring(0, 4)), Integer.parseInt(endDate.substring(5, 7)));
            if(day>=10)
            {
                sysRenShiTongJiInfo.setEndDate(endDate+"-"+day);
            }else
            {
                sysRenShiTongJiInfo.setEndDate(endDate+"-0"+day);
            }
        }
        ExportExcel exportObj=  new ExportExcel("人事统计-按月", SysRenShiTongJiInfo.class);

        List<SysRenShiTongJiInfo> list = sysRenShiTongJiInfoService.findList(sysRenShiTongJiInfo);
        exportObj.setDataList(list);
        try{
            String imgName=DateUtils.getDate("yyyyMMddHHmmss")+".xlsx";
            String excelPath=SystemPath.getBaoBiaoPath()+imgName;
            exportObj.writeFile(excelPath);//导出到文件
            exportObj.dispose();
            //已生成.xlsx文件 根据base64编码生成图片写入xlsx文件中
            InputStream iStream = new FileInputStream(excelPath);
            XSSFWorkbook wb = new XSSFWorkbook(iStream);
            XSSFSheet sheet = wb.getSheetAt(0);        
            sheet.shiftRows(0, sheet.getLastRowNum(), 13);//excel数据从0行开始位置向后移row2行
            XSSFDrawing patriarch = sheet.createDrawingPatriarch();
            
            // 图片编码只要‘base64,’后面的部分
            fileContent = URLDecoder.decode(fileContent,"UTF-8").substring(22);
            XSSFClientAnchor anchor = new XSSFClientAnchor(0, 0, 100, 50, (short) 0, 0, (short) 7, 13);
            //插入图片  
            int pictureFormat=XSSFWorkbook.PICTURE_TYPE_JPEG;

            //base64转为byte数组 Base64为 org.apache.commons.codec.binary.Base64;
            Base64 base64 = new Base64();
            byte[] pictureData = base64.decodeBase64(fileContent.getBytes());
            
            int pictureIndex = wb.addPicture(pictureData, pictureFormat);
            patriarch.createPicture(anchor, pictureIndex);
            FileOutputStream fileOut=null;
            //写入excel文件  
            try {  
                fileOut = new FileOutputStream(excelPath);  
                wb.write(fileOut);  
            } catch (FileNotFoundException e) {  
                // TODO Auto-generated catch block  
                e.printStackTrace();  
            } catch (IOException e) {  
                // TODO Auto-generated catch block  
                e.printStackTrace();  
            } finally {  
                if (fileOut != null) {  
                    try {  
                        fileOut.close();  
                    } catch (IOException e) {  
                        // TODO Auto-generated catch block  
                        e.printStackTrace();  
                    }  
                }  
            }

            //下载
            String fileName = "人事统计-按月"+DateUtils.getDate("yyyyMMddHHmmss")+".xlsx";
            FileDownController.fileDownByResponse(excelPath, fileName, response);
    
            return null;
        } catch (Exception e) {
            addMessage(redirectAttributes, "人事统计-按月："+e.getMessage());
        }
        
        return "重定向到原查询地址";
    }

 

柱状图：

    <script type="text/javascript">
        $(document).ready(function() {
            $("#btnExport").click(function(){
                var exportSrc="后台导出链接",
                src="页面查询链接",
                $("#searchForm").attr("action",exportSrc);
　　　　　　　　　 $("#searchForm").submit();　
　　　　　　　　　 $("#searchForm").attr("action",src);
            });
        });</script>
　　<form:form id="searchForm" style="padding:8px 5px" modelAttribute="sysRenShiTongJiInfo" action="" method="post" class="breadcrumb form-search">
　　　　<input id="fileContents" name="fileContents" type="hidden" value=""/>
　　　　<input id="fileSizes" name="fileSizes" type="hidden" value=""/>
       <input id="btnExport" style="font-size:13px;width: 40px;padding-left: 6px;height: 26px;padding-top: 2.5px;" class="btn btn-primary" type="button" value="导出">
　　</form:form>
　　<div id="useStats-bar-chart"  class="echarts" style="width:90%;height:320px" align="center"></div>
       
    <script type="text/javascript">
        var monthString="${monthString}",
        allInteger="${allInteger}",
        formalInteger="${formalInteger}",
        probationInteger="${probationInteger}",
        internInteger="${internInteger}",
        rentInteger="${rentInteger}",
        departureInteger="${departureInteger}",
        
        maxAllPeople=0,
        
        monthStringArr = [],//月份
        allIntegerArr = [],//全部
        formalIntegerArr = [],//正式员工
        probationIntegerArr = [],//试用期
        internIntegerArr = [],//实习生
        rentIntegerArr = [],//外租
        departureIntegerArr = [];//离职中
        
        for(var i=0;i<monthString.split(",").length; i++) {
            monthStringArr[i]=monthString.split(",")[i];
        }
        
        for(var i=0;i<allInteger.split(",").length; i++) {
            allIntegerArr[i]=allInteger.split(",")[i];
            maxAllPeople=(allInteger.split(",")[i] >maxAllPeople) ? allInteger.split(",")[i]:maxAllPeople;
        }
        for(var i=0;i<formalInteger.split(",").length; i++) {
            formalIntegerArr[i]=formalInteger.split(",")[i];
        }
        
        for(var i=0;i<probationInteger.split(",").length; i++) {
            probationIntegerArr[i]=probationInteger.split(",")[i];
        }
        
        for(var i=0;i<internInteger.split(",").length; i++) {
            internIntegerArr[i]=internInteger.split(",")[i];
        }
        
        for(var i=0;i<rentInteger.split(",").length; i++) {
            rentIntegerArr[i]=rentInteger.split(",")[i];
        }
        
        for(var i=0;i<departureInteger.split(",").length; i++) {
            departureIntegerArr[i]=departureInteger.split(",")[i];
        }
        
        if(maxAllPeople!=0) {
            var roundVal=Math.round(maxAllPeople/1000);
            var intValue=parseInt(maxAllPeople/1000); 
            maxAllPeople=(roundVal == intValue) ? (roundVal*1000+500):(roundVal*1000);
            
        }
        var barChart = echarts.init(document.getElementById("useStats-bar-chart"));
        var barOption = {
            backgroundColor: '#ffffff',
            title: {
                text: '人事统计-按月',
                left: 'center',
                top:10
            },
            tooltip: {//上浮窗口

            },
            legend: {
                bottom: 10,
                textStyle: { //图例文字的样式
                    color: '#333',
                    fontSize: 12
                }
            },
            toolbox: {//右侧工具栏
                show: false,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    saveAsImage: {show: true}//下载按钮
                }
            },
            calculable : true,
            animation :false,
            xAxis: [
                {
                    type: 'category',
                    axisTick: {show: false},
                    data: monthStringArr
                }
            ],
            yAxis: [
                {
                    type: 'value',
                     name: '人数',
                       min: 0,
                    max: maxAllPeople,
                }
            ],
            series: [
                {
                    name: '全部',
                    type: 'bar',
                    barGap: 0.1,
                    emphasis: {
                        focus: 'series'
                    },
                    data: allIntegerArr
                },
                {
                    name: '正式员工',
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    },
                    data: formalIntegerArr
                },
                {
                    name: '试用期',
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    },
                    data: probationIntegerArr
                },
                {
                    name: '实习生',
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    },
                    data: internIntegerArr
                },
                {
                    name: '外租',
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    },
                    data: rentIntegerArr
                },
                {
                    name: '离职中',
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    },
                    data: departureIntegerArr
                }
            ]
        };
        barChart.setOption(barOption);
        $(window).resize(barChart.resize);
    
        // 图内容，需要encodeURIComponent编码，防止传输过程符号丢失
        var fileContent = encodeURIComponent(barChart.getDataURL());
        $("#fileContents").val(fileContent);
        // 图片宽度和高度，为了计算图片比例，以便在excel中以正常比例显示，不至于拉伸       
        var fileSize = barChart.getWidth() + ":" + barChart.getHeight();
        $("#fileSizes").val(fileSize);
    </script>
</body>
</html>

后台雷同