ECharts + jsp 图表

...

<%@ page language="java"  pageEncoding="UTF-8"%>
<%@page import="com.e6soft.base.util.WebUtil"%>
<%@page import="com.e6soft.base.util.SysUtil"%>
<%@page import="com.e6soft.base.util.DateUtil"%>
<%@page import="com.e6soft.project.workDate.GrzyActionServices"%>
<%@page import="java.util.Calendar"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

    // 登录人 id 
String fileSaverId = java.net.URLDecoder.decode(SysUtil.getUserId(),"UTF-8");

Calendar date = Calendar.getInstance();
int year = date.get(Calendar.YEAR); // 年份
int yf = date.get(Calendar.MONTH); // 月份
yf +=1;
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <script src="<%=basePath %>common/boot.web.miniui.js" type="text/javascript"></script>
        <!--  <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>-->
        <script src="<%=basePath %>common/js/echarts.js" type="text/javascript"></script>

        <script src="<%=basePath %>common/jquery/1.9.1/jquery.js" type="text/javascript"></script>
        <script src="<%=basePath %>common/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    </head>

    <body>
        <div style="100%;height:100%;">
            <div class="mini-toolbar" style="border-top:0;border-bottom:0;padding:0px;">
                <table class="form-table" border="0" cellpadding="1" cellspacing="2">
                    <tr>
                        <td class="form-label" style="60px;">查询时间</td>
                        <td style="350px">
                            <input id="time1" name="time1" class="mini-datepicker" value="<%=year+"-"+yf+"-01" %>"/> -
                            <input id="time2" name="time2" class="mini-datepicker" value="<%=DateUtil.today() %>"  />
                        </td>
                        <td colspan=2 align=right>
                            <a class="mini-button" iconCls="icon-search" onclick="search()">查询</a>
                            <a class="mini-button" iconCls="icon-arrow_rotate_clockwise" onclick="reset()">重置</a>
                        </td>
                    </tr>
                </table>
            </div>
            <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
            <div id="main" style=" 100%;height:98%;"></div>
        </div>
    </body>
    <script type="text/javascript">
    mini.parse();
        //var main = mini.get("main");
        $(function() {
            search();
        });
        function search() {
            var time1 = mini.get("time1").getText();
            var time2 = mini.get("time2").getText();
                $.post("<%=basePath %>grzy/workStat.do", {
                    Id: "<%=fileSaverId%>",
                    time1:time2,
                    time1:time2
                }, function(result) {
                    clire(result);
                })
            
        }
        
        function clire(data) {
            /*[{"rc1":0,"ybglsp":0,"zbdlwtsp":0,"zbglsp":0,"zjxxsp":0,"xtyh_id":"admin","bm_id":"402881e563f834030163f8382fb90007","wjdaxxsp":0,"xmjsxxsp":0,
            "lxspsp":0,"htxxsp":0,"rn":1,"xmpbsp":0,"xtyh_xm":"admin","rc0":0}]*/
            //转换成JSON
            //console.log(data);
            var json = JSON.parse(data);
            //console.log("++++++++++++++++++++++++++++++++++++++");

            /*"xtyh_xm" 姓名,"rc0" 会议,"rc1" 出差,"lxspsp" 立项审批,"zbglsp" 招标审批,"xmpbsp" 抽取评标专家审批,"zbdlwtsp" 招标委托代理审批,
                "htxxsp" 合同审批,"zjxxsp" 送审文件审批,"wjdaxxsp" 文件定案审批,"xmjsxxsp" 结算审批*/
            //var bm = json[0].bm_id; // 类型 number
            var hy = json[0].rc0; // 
            var cc = json[0].rc1;
            var tj1 = json[0].lxspsp;
            var tj2 = json[0].zbglsp;
            var tj3 = json[0].xmpbsp;
            var tj4 = json[0].zbdlwtsp;
            var tj5 = json[0].htxxsp;
            var tj6 = json[0].zjxxsp;
            var tj7 = json[0].wjdaxxsp;
            var tj8 = json[0].xmjsxxsp;
            
            var cs = 88;

            //alert(typeof hy);
            //console.log(json);
            /*
          for(var i in json){//遍历packJson 数组时,i为索引  
           alert(json[i].bm_id);  
        } */

            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '个人工作统计'
                },
                tooltip: {},
                legend: {
                    data: ['事项']
                },
                xAxis: {
                    data: ["会议", "出差 ", "立项审批", " 招标审批", " 抽取评标专家审批", "招标委托代理审批", "合同审批", "送审文件审批", "文件定案审批", "结算审批"]
                },
                yAxis: {},
                series: [{
                    name: '事项',
                    type: 'bar', //
                    // hy,cc,tj1,tj2,tj3,tj4,tj5,tj6,tj7,tj8,tj9,tj10,tj11,tj12,tj13,tj14,tj15,tj16
                    data: [hy, cc, tj1, tj2, tj3, tj4, tj5, tj6, tj7, tj8],
                    //5, 20, 36, 10, 10, 20,7,8,9,10,11,12,13,14,15,16,17,18],
                    // 普通样式。
                    itemStyle: {
                        // 点的颜色。
                        color: '#4D4DFF'
                    }
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
        };
        
        //search();
    </script>

</html>
原文地址:https://www.cnblogs.com/mysterious-killer/p/10832506.html