软件需求与分析大作业进度八

1、今日工作

　　1）完成了统计图表。

2、明日目标任务。

　　1）图表联动功能。

成果展示：

 

 代码如下：

<%@ page language="java"  import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 
<%@page import="java.sql.*" %>  <%--导入java.sql包--%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta charset="UTF-8" />
        <title>会员列表-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
        <meta name="renderer" content="webkit" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <link rel="stylesheet" href="../../static/css/font.css" />
        <link rel="stylesheet" href="../../static/css/weadmin.css" />
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <!--<script src="${pageContext.request.contextPath}/plug-ins/js/jquery-1.10.2.min.js"></script>-->
        <script src="../../lib/layui/layui.js" charset="utf-8"></script>
        <script src="../../static/js/eleDel.js" type="text/javascript" charset="utf-8"></script>
        <script src="${pageContext.request.contextPath}/plug-ins/js/echarts.js"></script>
    <script src="${pageContext.request.contextPath}/plug-ins/js/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </head>
    <body>
        <div class="weadmin-nav">
            <a class="layui-btn layui-btn-sm" style="margin-top:3px;float:right" href="javascript:location.replace(location.href);"
             title="刷新">
                <i class="layui-icon layui-icon-refresh"></i>
                <!-- <i class="layui-icon" style="line-height:30px">&#x1002;</i> -->
            </a>
        </div>

        <div class="weadmin-body">
            <div class="layui-row">
                <form class="layui-form layui-col-md12 we-search" action="${pageContext.request.contextPath }/tbSelectServlet" name="seleform">
                <input value="<%=request.getParameter("name")%>" name="name" type="hidden">
                <input value="<%=request.getParameter("status")%>" name="status" type="hidden">
                <table id="searchTable">
                <tr>
                <td>
                    <div class="div_operate" id="btbt1">
                        <input type="button" value="+" class="layui-btn" onclick="insertRow1()">
                        <input type="button" value="-" class="layui-btn" onclick="deleteRow2()">
                    </div>
                    <div class="div_relation" style="display:none;" >
                        <select name="relation" class="large_select">
                            <option value="and">并且</option>
                            <option value="or">或者</option>
                            <option value="not like">不含</option>
                        </select>
                    </div>
                </td>
                <td>
                    查询条件：
                    <div class="layui-inline">
                    <select name="slsuoyin" class="large_select">
                        <option value="oname">机构全称</option>
                        <option value="department">归口管理单位</option>
                        <option value="territorial">所在地域</option>
                        <option value="representative">法人代表</option>
                        <option value="linkman">联系人</option>
                        <option value="attribute">机构属性</option>
                        <option value="demandname">技术需求名称</option>
                        <option value="money1">拟投入资金总额</option>
                        <option value="medel">技术需求解决方式</option>
                        <option value="type">科技活动类型</option>
                        <option value="classify">学科分类</option>
                        <option value="field">需求技术所属领域</option>
                        <option value="industry">需求技术应用行业</option>
                        <option value="xglcs">管理处室</option>
                    </select>
                    </div>
                    </td>
                    <td>
                    查询内容：
                    <div class="layui-inline">
                        <input class="layui-input"  name="suoyin" id="suoyin" />
                    </div>
                    </td>
                    <td>
                    <div class="layui-inline">
                    <select name="symbol" class="small_select">
                        <option value="=">精确</option>
                        <option value="like">模糊</option>
                    </select>                
                </div>
                </td>
                <tr>
                
                
                <tr style="display:none;" id="trtr1">
                <td>
                    <div class="div_operate" id="btbt2">
                        <input type="button" value="+" class="layui-btn" onclick="insertRow2()">
                        <input type="button" value="-" class="layui-btn" onclick="deleteRow2()">
                    </div>
                    <div class="div_relation" >
                        <select name="relation" class="large_select">
                            <option value="and">并且</option>
                            <option value="or">或者</option>
                            <option value="not like">不含</option>
                        </select>
                    </div>
                </td>
                <td>
                    查询条件：
                    <div class="layui-inline">
                    <select name="slsuoyin" class="large_select">
                        <option value="oname">机构全称</option>
                        <option value="department">归口管理单位</option>
                        <option value="territorial">所在地域</option>
                        <option value="representative">法人代表</option>
                        <option value="linkman">联系人</option>
                        <option value="attribute">机构属性</option>
                        <option value="demandname">技术需求名称</option>
                        <option value="money1">拟投入资金总额</option>
                        <option value="medel">技术需求解决方式</option>
                        <option value="type">科技活动类型</option>
                        <option value="classify">学科分类</option>
                        <option value="field">需求技术所属领域</option>
                        <option value="industry">需求技术应用行业</option>
                        <option value="xglcs">管理处室</option>
                    </select>
                    </div>
                    </td>
                    <td>
                    查询内容：
                    <div class="layui-inline">
                        <input class="layui-input"  name="suoyin" id="suoyin" />
                    </div>
                    </td>
                    <td>
                    <div class="layui-inline">
                    <select name="symbol" class="small_select">
                        <option value="=">精确</option>
                        <option value="like">模糊</option>
                    </select>                
                </div>
                </td>
                <tr>
                
                
                <tr style="display:none;" id="trtr2">
                <td>
                    <div class="div_operate" id="btbt3">
                        <input type="button" value="+" class="layui-btn" onclick="insertRow()">
                        <input type="button" value="-" class="layui-btn" onclick="deleteRow3()">
                    </div>
                    <div class="div_relation" >
                        <select name="relation" class="large_select">
                            <option value="and">并且</option>
                            <option value="or">或者</option>
                            <option value="not like">不含</option>
                        </select>
                    </div>
                </td>
                <td>
                    查询条件：
                    <div class="layui-inline">
                    <select name="slsuoyin" class="large_select">
                        <option value="oname">机构全称</option>
                        <option value="department">归口管理单位</option>
                        <option value="territorial">所在地域</option>
                        <option value="representative">法人代表</option>
                        <option value="linkman">联系人</option>
                        <option value="attribute">机构属性</option>
                        <option value="demandname">技术需求名称</option>
                        <option value="money1">拟投入资金总额</option>
                        <option value="medel">技术需求解决方式</option>
                        <option value="type">科技活动类型</option>
                        <option value="classify">学科分类</option>
                        <option value="field">需求技术所属领域</option>
                        <option value="industry">需求技术应用行业</option>
                        <option value="xglcs">管理处室</option>
                    </select>
                    </div>
                    </td>
                    <td>
                    查询内容：
                    <div class="layui-inline">
                        <input class="layui-input"  name="suoyin" id="suoyin" />
                    </div>
                    </td>
                    <td>
                    <div class="layui-inline">
                    <select name="symbol" class="small_select">
                        <option value="=">精确</option>
                        <option value="like">模糊</option>
                    </select>                
                </div>
                </td>
                <tr>
                    </table>
                <select name="sltbsuoyin" class="large_select">
                        <option value="department">归口管理单位</option>
                        <option value="territorial">所在地域</option>
                        <option value="attribute">机构属性</option>
                        <option value="medel">技术需求解决方式</option>
                        <option value="type">科技活动类型</option>
                        <option value="classify">学科分类</option>
                        <option value="industry">需求技术应用行业</option>
                        <option value="xglcs">管理处室</option>
                    </select>
                    <button class="layui-btn" lay-submit="" lay-filter="sreach">
                        <i class="layui-icon layui-icon-search">查询</i>
                    </button>
                </form>
            </div>
        </div>
    <input type="button" value="柱状图" class="layui-btn" onclick="Main()">
    <input type="button" value="折线图" class="layui-btn" onclick="Main1()">
    <input type="button" value="饼状图" class="layui-btn" onclick="Main2()">
    <div id="main" style="width: 1200px;height:500px;display:none;"></div>
    <div id="main1" style="width: 1200px;height:500px;display:none;"></div>
    <div id="main2" style="width: 1200px;height:500px;display:none;"></div>
    <table  width="600" border="1" cellpadding="0" class="table table-bordered table-hover" id="tableyyy">
      <thead>
          <tr>
              <td>填报人</td>
              <td>机构名称</td>
              <td>需求名称</td>
              <td>${sltbsuoyinName}</td>
          </tr>
          </thead>
          <tbody>
     <c:forEach var="U" items="${demandformlist}" > 
       <tr>
           <td>${U.name}</td>
           <td>${U.oname}</td>
           <td>${U.demandname}</td>
           <c:set var="sltbsuoyin" scope="session" value="${sltbsuoyin}"/>
                <c:if test="${sltbsuoyin.equals('department')}">
           <td>${U.department}</td>
           </c:if>
           <c:set var="sltbsuoyin" scope="session" value="${sltbsuoyin}"/>
                <c:if test="${sltbsuoyin.equals('territorial')}">
           <td>${U.territorial}</td>
           </c:if>
           <c:set var="sltbsuoyin" scope="session" value="${sltbsuoyin}"/>
                <c:if test="${sltbsuoyin.equals('attribute')}">
           <td>${U.attribute}</td>
           </c:if>
           <c:set var="sltbsuoyin" scope="session" value="${sltbsuoyin}"/>
                <c:if test="${sltbsuoyin.equals('medel')}">
           <td>${U.medel}</td>
           </c:if>
           <c:set var="sltbsuoyin" scope="session" value="${sltbsuoyin}"/>
                <c:if test="${sltbsuoyin.equals('type')}">
           <td>${U.type}</td>
           </c:if>
           <c:set var="sltbsuoyin" scope="session" value="${sltbsuoyin}"/>
                <c:if test="${sltbsuoyin.equals('classify')}">
           <td>${U.classify}</td>
           </c:if>
           <c:set var="sltbsuoyin" scope="session" value="${sltbsuoyin}"/>
                <c:if test="${sltbsuoyin.equals('industry')}">
           <td>${U.industry}</td>
           </c:if>
           <c:set var="sltbsuoyin" scope="session" value="${sltbsuoyin}"/>
                <c:if test="${sltbsuoyin.equals('xglcs')}">
           <td>${U.xglcs}</td>
           </c:if>
       </tr> 
    </c:forEach>
    </tbody>
    </table>

    <script type="text/javascript">
    function this1(){
        $("#tt1").show();
        $("#selebutton2").show();
        $("#selebutton1").hide();
        //$("#tjbutton1").hide();
        
    }
    function this2(){
        $("#tt1").show();
        $("#tt2").show();
        $("#selebutton1").hide();
        $("#selebutton2").hide();
        //$("#tjbutton1").hide();
        
    }
    
    function insertRow1(){
        $("#trtr1").show();
        $("#btbt1").hide();
    }    
    function deleteRow2(){
        $("#btbt1").show();
        $("#trtr1").hide();
    }
    function insertRow2(){
        $("#trtr1").show();
        $("#btbt1").hide();
        $("#trtr2").show();
        $("#btbt2").hide();
    } 
    function deleteRow3(){
        $("#trtr1").show();
        $("#btbt1").hide();
        $("#trtr2").hide();
        $("#btbt2").show();
    }
    function Main(){
        $("#main").show();
        $("#main1").hide();
        $("#main2").hide();
    }
    function Main1(){
        $("#main1").show();
        $("#main").hide();
        $("#main2").hide();
    }
    function Main2(){
        $("#main2").show();
        $("#main1").hide();
        $("#main").hide();
    }
    var arry=new Array();
    var a=new Array();
    var z=new Array();
    <c:forEach items="${list1}" var="item">
    arry.push("${item.key}");
    a.push("${item.values}");
    z.push({value:"${item.values}",name:"${item.key}"});
    </c:forEach>
    console.log(arry);
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var myChart1 = echarts.init(document.getElementById('main1'));
        var myChart2 = echarts.init(document.getElementById('main2'));
        // 指定柱状图表的配置项和数据
        var option = {
            title: {
                text: '柱状图'
            },
            tooltip: {},
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    restore : {show: true},
                    saveAsImage : {
                        show: true,
                        pixelRatio: 1,
                        title : '保存为图片',
                        type : 'png',
                        lang : ['点击保存']         
                    }
                }
            },
            legend: {
                data:['数量']
            },
            
            xAxis: [{
                type: 'category',
                data:arry,
            axisLabel:{
                interval:0,//0：全部显示，1：间隔为1显示对应类目，2：依次类推，（简单试一下就明白了，这样说是不是有点抽象）
                rotate:-30,//倾斜显示，-：顺时针旋转，+或不写：逆时针旋转
               }
            }],

            
            
            yAxis: [{type: 'value'}],
            series: [{
                name: '数量',
                barWidth: '15',
                type: 'bar',
                data: a
            }]
        };
        
        var option1={
                //标题
                title:{
                  text:'折线图'
                },
                //工具箱
                //保存图片
                toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            restore : {show: true},
                            saveAsImage : {
                                show: true,
                                pixelRatio: 1,
                                title : '保存为图片',
                                type : 'png',
                                lang : ['点击保存']         
                            }
                        }
                    },
                //图例
                legend:{
                    data:['数量']
                },
                //x轴
                xAxis:{
                    type: 'category',
                    data:arry,
                    axisLabel:{
                        interval:0,//0：全部显示，1：间隔为1显示对应类目，2：依次类推，（简单试一下就明白了，这样说是不是有点抽象）
                        rotate:-30,//倾斜显示，-：顺时针旋转，+或不写：逆时针旋转
                       }
                },
                //y轴没有显式设置，根据值自动生成y轴
                yAxis:[{type: 'value'}],
                //数据-data是最终要显示的数据
                series:[{
                    name:'数量',
                    type:'line',
                    data:a
                }]
            };
        
        option2 = {
                title: {
                    text: '饼状图',
                    x: 'left'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        restore : {show: true},
                        saveAsImage : {
                            show: true,
                            pixelRatio: 1,
                            title : '保存为图片',
                            type : 'png',
                            lang : ['点击保存']         
                        }
                    }
                },
                color: ['#CD5C5C', '#00CED1', '#9ACD32', '#FFC0CB','#8ec060', '#47A474', '#008D89', '#006D94'],
                stillShowZeroSum: false,
                series: [
                    {
                        name: '数量',
                        type: 'pie',
                        radius: '80%',
                        center: ['60%', '60%'],
                        data: z,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(128, 128, 128, 0.5)'
                            }
                        }
                    }
                ]
            };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        myChart1.setOption(option1);
        myChart2.setOption(option2);
     // 设置echarts的点击事件
        myChart.on('click',function (params) {
            // 获取table下所有的tr
            let trs = $("#tableyyy tbody tr");
            //alert(trs.length);
            for (let i = 0;i<trs.length;i++){
                // 获取tr下所有的td
                let tds = trs.eq(i).find("td");
                // 先把之前的标记的success去掉
                $("#tableyyy tbody tr").eq(i).removeClass('success');
                // 如果点击图示的名字和table下的某一个行的第一个td的值一样
                if (params.name == tds.eq(3).text()){
                    //设置success状态
                    
                    $("#tableyyy tbody tr").eq(i).addClass('success');
                    // 跳转到页面指定的id位置
                    $("html,body").animate({scrollTop:$("#tableyyy tbody tr").eq(i).offset().top},1000);
                }
            }
        });
        myChart1.on('click',function (params) {
            // 获取table下所有的tr
            let trs = $("#tableyyy tbody tr");
            for (let i = 0;i<trs.length;i++){
                // 获取tr下所有的td
                let tds = trs.eq(i).find("td");
                // 先把之前的标记的success去掉
                $("#tableyyy tbody tr").eq(i).removeClass('success');
                // 如果点击图示的名字和table下的某一个行的第一个td的值一样
                if (params.name == tds.eq(3).text()){
                    //设置success状态
                    $("#tableyyy tbody tr").eq(i).addClass('success');
                    // 跳转到页面指定的id位置
                    $("html,body").animate({scrollTop:$("#tableyyy tbody tr").eq(i).offset().top},1000);
                }
            }
        });
        myChart2.on('click',function (params) {
            // 获取table下所有的tr
            let trs = $("#tableyyy tbody tr");
            for (let i = 0;i<trs.length;i++){
                // 获取tr下所有的td
                let tds = trs.eq(i).find("td");
                // 先把之前的标记的success去掉
                $("#tableyyy tbody tr").eq(i).removeClass('success');
                // 如果点击图示的名字和table下的某一个行的第一个td的值一样
                if (params.name == tds.eq(3).text()){
                    //设置success状态
                    $("#tableyyy tbody tr").eq(i).addClass('success');
                    // 跳转到页面指定的id位置
                    $("html,body").animate({scrollTop:$("#tableyyy tbody tr").eq(i).offset().top},1000);
                }
            }
        });
        // 当鼠标落在tr时，显示浮动
        $("#tableyyy tbody").find("tr").on("mouseenter",function () {
            // 获得当前匹配元素的个数
            let row = $(this).prevAll().length;
            // 获得当前tr下td的名字
            let name = $("#tableyyy tbody").find("tr").eq(row).find("td").eq(3).text();
            // 设置浮动
            myChart2.dispatchAction({ type: 'showTip',seriesIndex: 0, name:name});//选中高亮
        });
        // 当鼠标移开tr时候取消浮动
        $("#tableyyy tbody").find("tr").on("mouseleave",function () {
            // 获得当前匹配元素的个数
            let row = $(this).prevAll().length;
            // 获得当前tr下td的名字
            let name = $("#tableyyy tbody").find("tr").eq(row).find("td").eq(3).text();
            // 设置浮动
            myChart2.dispatchAction({ type: 'hideTip', name:name});//选中高亮
        });
    </script>
        <!--<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>-->
        
    </body>
</html>

 

posted @ 2020-10-26 23:11  ziyuliu  阅读(161)  评论(0)    收藏  举报