1. 程式人生 > 實用技巧 >軟體需求分析之圖表聯動

軟體需求分析之圖表聯動

在上學期開始學習echars基本上都是看著別的人部落格,或者看別人例子才能用出來,而且許多地方根本不知道是幹什麼用的,這學期這幾次用echarts感覺到了自己稍微有些進步會用一些基本簡單的圖形對其中的一些函式也動了怎們用,今天這個是圖表聯動當點選圖形是下方的表格會變色這

下邊是案例程式碼

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面,任何其他內容都*必須*跟隨其後! -->
    <title>首頁</title>

    <!-- Bootstrap -->
    <link
            href="${pageContext.request.contextPath}/css/bootstrap.min.css"
            rel="stylesheet">

   
    <!-- jQuery (Bootstrap 的所有 JavaScript 外掛都依賴 jQuery,所以必須放在前邊) -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>

    <script
            src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.min(1).js"></script>
    <style>
    
        p {
            font-size: 16px;
            margin-top: 10px;
        }
        h1{
        
        color: white;
        }
    </style>
    <script>
        $(function () {
            //document.getElementById("here").click();
            var location_id='${kid}';
            
            if(location_id!=''){
                alert(location_id);

            	document.getElementById(location_id).click();
            }

        });
    </script>

</head>
<body>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <div class="tabbable" id="tabs-451449">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#panel-169507" data-toggle="tab">分類檢索</a>
                    </li>
                    <li>
                        <a id="here" href="#panel-638308" data-toggle="tab">綜合檢索</a>
                    </li>
                    <li>
                        <a href="#panel-638309" data-toggle="tab">統計圖表</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="panel-169507">
                        <div class="row-fluid">
                            <div class="span12">
                                <form method="post" action="../fenleijiansuo">
                                    <p>
                                    
                                        標引條件:
                                        <select name="bytj" id="bytj" class="form-control"
                                                style="width: 200px;display: inline">
                                            <option value="jgmc">機構全稱</option>
                                            <option value="gkglbm">歸口管理單位</option>
                                            <option value="szdy">所在地域</option>
                                            <option value="frdb">法人代表</option>
                                            <option value="lxr">聯絡人</option>
                                            <option value="jgsx">機構屬性</option>
                                            <option value="jsxqmc">技術需求名稱</option>
                                            <option value="gjz">關鍵字</option>
                                            <option value="zjxqze">擬投入資金總額</option>
                                            <option value="jsxqhzms">技術需求解決方式</option>
                                            <option value="yjlx">科技活動型別</option>
                                            <option value="xkfl">學科分類</option>
                                            <option value="xqjsssly">需求技術所屬領域</option>
                                            <option value="xqjsyyhy">需求技術應用行業</option>
                                        </select>
                                        <input type="text" name="bytjz" class="form-control"
                                               style="width: 150px;display: inline">
                                        <select name="sfmh" id="sfmh" class="form-control"
                                                style="width: 150px;display: inline">
                                            <option value="1">模糊查詢</option>
                                            <option value="0">精準查詢</option>
                                        </select>
                                    </p>
                                    <p>
                                        日期條件:
                                        從
                                        <input type="date" name="qxsj" class="form-control"
                                               style="width: 150px;display: inline">
                                        到
                                        <input type="date" name="jzsj" class="form-control"
                                               style="width: 150px;display: inline">
                                         <input type="radio" name="shenhe" class="form-control"
                                               style="width: 150px;display: inline" value="通過">通過
                                         <input type="radio" name="shenhe" class="form-control"
                                               style="width: 150px;display: inline" value="不通過">不通過
                                        <input type="submit" value="查詢" class="form-control"
                                               style="width: 100px;display: inline">
                                    </p>
                                </form>
                            </div>

                        </div>
                        <div class="row-fluid">
                            <div class="span12">
                                <table class="table table-hover table-bordered">
                                    <!-- class="table table-bordered" -->
                                    <thead>
                                    <tr>
                                        <th>需求編號</th>
                                        <th>技術需求名稱</th>
                                        <th>機構屬性</th>
                                        <th>所在地域</th>
                                        <th>機構全稱</th>
                                        <th>法人代表</th>
                                        <th>歸口管理單位</th>
                                        <th>擬投入資金總額</th>
                                        <th>科技活動型別</th>

                                    </tr>
                                    </thead>
                                    <tbody>
                                    <c:forEach var="item" items="${list}">
                                        <tr>
                                            <td>${item.id}</td>
                                            <td><a href="#">${item.name}</a>
                                            </td>
                                            <td>${item.shuxing}</td>
                                            <td>${item.province}</td>
                                            <td>${item.jigoumingcheng}</td>
                                            <td>${item.faren}</td>
                                            <td>${item.guikou}</td>
                                            <td>${item.nitouru}</td>
                                            <td>${item.duoxuan}</td>

                                        </tr>
                                    </c:forEach>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane" id="panel-638308">

                        <div class="row-fluid">
                            <div class="span12">
                                    <table class="table table-bordered">
                                        <tr>
                                            <td width="15%">控制條件</td>
                                            <td width="84%">
                                              <tr>
                                                        <td>
                                                            <button onclick="insert_row()" style="width: 130px;display: inline" class="form-control">新增查詢條件</button>
                                                                   </td> <td>    
                                                            <button onclick="deleteRow(this)" style="width: 130px;display: inline" class="form-control">刪除查詢條件</button>
                                                        </td>
                                                    </tr>
                                                <table name="tbl" id="tbl" class="table table-bordered">
                                                  
                                                    <tr>
                                                        <td>
                                                            <select id="h" name="h" class="form-control"
                                                                    style="width: 100px;display: inline">
                                                                <option value="1">並且</option>
                                                                <option value="2">或者</option>
                                                                <option value="3">不含</option>
                                                            </select>
                                                            <select id="type1" name="type1" class="form-control"
                                                                    style="width: 150px;display: inline">
                                                                <option value='jigoumingcheng'>機構全稱</option>
                                                                <option value='guikou'>歸口管理單位</option>
                                                                <option value='province'>所在地域</option>
                                                                <option value='faren'>法人代表</option>
                                                                <option value='lianxiren'>聯絡人</option>
                                                                <option value='shuxing'>機構屬性</option>
                                                                <option value='Name'>技術需求名稱</option>
                                                                <option value='gjz'>關鍵字</option>
                                                                <option value=nitouru>擬投入資金總額</option>
                                                                <option value='jsxqhzms'>技術需求解決方式</option>
                                                                <option value='duoxuan'>科技活動型別</option>
                                                                <option value='fenlei'>學科分類</option>
                                                                <option value='lingyv'>需求技術所屬領域</option>
                                                                <option value='xqjsyyhy'>需求技術應用行業</option>
                                                            </select>
                                                            <input type="text" id="SearchBox1" name="SearchBox1"
                                                                   class="form-control"
                                                                   style="width: 150px;display: inline">
                                                            <select id="t1" name="t1" class="form-control"
                                                                    style="width: 100px;display: inline">
                                                                <option value='1'>模糊</option>
                                                                <option value='0'>精確</option>
                                                            </select>
                                                        </td>
                                                    </tr>

                                                </table>
                                            </td>
                                        </tr>
                                        <form action="../zonghejiansuo" method="post" onsubmit="return Submit()">

                                        <tr>
                                            <td width="15%">時間條件</td>
                                            <td width="84%">
                                                <p>
                                                    日期條件:
                                                    從
                                                    <input type="date" name="qxsj" class="form-control"
                                                           style="width: 150px;display: inline">
                                                    到
                                                    <input type="date" name="jzsj" class="form-control"
                                                           style="width: 150px;display: inline">
                                                </p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">
                                                <input type="text" name="sql" id="sql" hidden="hidden" style="width: 80%">
                                                <input type="submit" value="查詢" class="form-control"
                                                       style="width: 150px;display: inline;margin-left: 85%">
                                            </td>
                                        </tr>
                                    </table>

                                </form>
                            </div>
                        </div>

                        <div class="row-fluid">
                            <div class="span12">

                                <table class="table table-hover table-bordered">
                                    <!-- class="table table-bordered" -->
                                    <thead>
                                    <tr>
                                        <th>需求編號</th>
                                        <th>技術需求名稱</th>
                                        <th>機構屬性</th>
                                        <th>所在地域</th>
                                        <th>機構全稱</th>
                                        <th>法人代表</th>
                                        <th>歸口管理單位</th>
                                        <th>擬投入資金總額</th>
                                        <th>科技活動型別</th>

                                    </tr>
                                    </thead>
                                    <tbody>
                                    <c:forEach var="item" items="${list}">
                                        <tr>
                                            <td>${item.id}</td>
                                            <td><a href="#">${item.name}</a>
                                            </td>
                                            <td>${item.shuxing}</td>
                                            <td>${item.province}</td>
                                            <td>${item.jigoumingcheng}</td>
                                            <td>${item.faren}</td>
                                            <td>${item.guikou}</td>
                                            <td>${item.nitouru}</td>
                                            <td>${item.duoxuan}</td>

                                        </tr>
                                    </c:forEach>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="panel-638309">

                        <div class="row-fluid">
                            <div class="span12">
							    <table class="table table-bordered">
                                        <tr>
                                            <td width="300px">控制條件</td>
                                            <td width="84%">
                                                <table name="tbl" id="tbl2" class="table table-bordered">
                                                    <tr>
                                                        <td>
                                                            <button onclick="insert_row2()"
                                                                    style="width: 130px;display: inline"
                                                                    class="form-control">新增查詢條件
                                                            </button>
                                                            
                                                            <button onclick="deleteRow2(this)"
                                                                    style="width: 130px;display: inline"
                                                                    class="form-control">刪除查詢條件
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <select id="h21" name="h21" class="form-control"
                                                                    style="width: 100px;display: inline">
                                                                <option value="1">並且</option>
                                                                <option value="2">或者</option>
                                                                <option value="3">不含</option>
                                                            </select>
                                                            <select id="type21" name="type21" class="form-control"
                                                                    style="width: 150px;display: inline">
                                                                <option value='jigoumingcheng'>機構全稱</option>
                                                                <option value='guikou'>歸口管理單位</option>
                                                                <option value='province'>所在地域</option>
                                                                <option value='faren'>法人代表</option>
                                                                <option value='lianxiren'>聯絡人</option>
                                                                <option value='shuxing'>機構屬性</option>
                                                                <option value='Name'>技術需求名稱</option>
                                                                <option value='gjz'>關鍵字</option>
                                                                <option value=nitouru>擬投入資金總額</option>
                                                                <option value='jsxqhzms'>技術需求解決方式</option>
                                                                <option value='duoxuan'>科技活動型別</option>
                                                                <option value='fenlei'>學科分類</option>
                                                                <option value='lingyv'>需求技術所屬領域</option>
                                                                <option value='xqjsyyhy'>需求技術應用行業</option>
                                                            </select>
                                                            <input type="text" id="SearchBox21" name="SearchBox21"
                                                                   class="form-control"
                                                                   style="width: 150px;display: inline">
                                                            <select id="t21" name="t21" class="form-control"
                                                                    style="width: 100px;display: inline">
                                                                <option value='1'>模糊</option>
                                                                <option value='0'>精確</option>
                                                            </select>
                                                        </td>
                                                    </tr>

                                                </table>
                                            </td>
                                        </tr>
                                        <form action="../setPie1" method="post" onsubmit="return Submit2()">

                                         	
                                            <tr>
                                                <td width="15%">選擇統計欄位:</td>
                                                <td width="84%">
                                                    <select id="tjzd" name="tjzd" class="form-control"
                                                            style="width: 150px;display: inline">
                                                        <option value='shuxing'>機構屬性</option>
                                                        <option value='duoxuan'>科技活動型別</option>
                                                        <option value='guikou'>歸口管理部門</option>
                                                        <option value='province'>所在地域</option>
                                                        <option value='fenlei'>學科分類</option>
                                                        <option value='xqjiyyhy'>需求技術應用行業</option>
                                                        <option value='bmsh'>管理處室</option>
                                                    </select>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td width="15%">選擇圖表型別:</td>
                                                <td width="84%">
                                                    <select id="tblx" name="tblx" class="form-control"
                                                            style="width: 150px;display: inline">
                                                        <option value='line'>折線圖</option>
                                                        <option value='bar'>柱形圖</option>
                                                        <option value='pie'>餅狀圖</option>
                                                    </select>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td colspan="2">
                                                    <input type="text" name="sql2" id="sql2" hidden="hidden"
                                                           style="width: 80%">
                                                    <input type="submit" value="查詢" class="form-control"
                                                           style="width: 150px;display: inline;margin-left: 85%">
                                                </td>
                                            </tr>
                                    </table>
                                    </form>
                            </div>
                        </div>

                        <div class="row-fluid">
                            <div class="span12">
								<div id="main" style="width: 1000px; height: 400px;"></div>	
								 <table id="tal" class="table">
								<tr ><th>#</th><th>名稱</th><th>數量</th></tr>
								</table>
                            </div>
                        </div>
                       
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

</body>

<script type="text/javascript">
//男女餅圖
window.onload=function()
{
	
	var json='${json}';


	if(json!='')
	{	
	var myChart = echarts.init(document.getElementById('main'));
		

	
	
	option = {
		    color: ['#3398DB'],
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: {            // 座標軸指示器,座標軸觸發有效
		            type: 'shadow'        // 預設為直線,可選為:'line' | 'shadow'
		        }
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    
		    yAxis: [
		        {
		            type: 'value'
		        }
		    ],
		    
		};
	
	
		var option = {
				tooltip: {
			        trigger: 'axis',
			        axisPointer: {            // 座標軸指示器,座標軸觸發有效
			            type: 'shadow'        // 預設為直線,可選為:'line' | 'shadow'
			        },
			        formatter: function (params) {
			        	var tar = params[1];
			        	alert(1);
			        	alert(tar);
			            return tar.name + '<br/>'  + tar.value;
			        }
			    },
			    yAxis: {
			        type: 'value'
			    },
			    series: [{
			        type: 'line',
			        showBackground: true,
			        backgroundStyle: {
			            color: 'rgba(220, 220, 220, 0.8)'
			        }
			    }]
			};var obj=json.count;
		var data=eval('('+json+')');
		var names=new  Array(0);
		var nums=new  Array(0);
		for(var i=0;i<data.length;i++)
			{
			names.push(data[i].name);
			nums.push(data[i].value);

			}
    	
    	
		var option = {
				xAxis: [
			        {
			            type: 'category',
			            data: names,
			            axisTick: {
			                alignWithLabel: true
			            }
			        }
			    ],
			    yAxis: {
			        type: 'value',
			        data:nums,
			    },
			    series: [
			        {
			            name: names,
			            type: 'bar',
			            barWidth: '60%',
			            data: nums
			        }
			    ]
			};
		myChart.setOption(option);
		

		for(var i=0;i<data.length;i++)
			{
			
			var tar='<tr id='+names[i]+'><td>'+i+'</td><td>'+names[i]+'</td><td>'+nums[i]+'</td></tr>'
			
			$("#tal").append(tar);
			}
		
		   myChart.on('click', function (params) {
               var name = params.name;
               alert(name);
               
               
/*                document.getElementById(name).css("background-color","#E8F6FF");
               
 */              
				change(name);

           });
		   
		   /* formatter: function (params) {
	            var tar = params[1];
	            return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
	        } */
		   myChart.on('formatter', function (params) {
			   var name = params.name;
               alert(name);
               
               
/*                document.getElementById(name).css("background-color","#E8F6FF");
               
 */              
 				return params.name + '<br/>' + params.value ;	
				change(name);
			 });       

		
		
		
	}
	
	
	}

function change(name)
{
	document.getElementsByTagName("tal").bgColor="white";
	 document.getElementById(name).bgColor="red";

	
	}




</script>









<script type="text/javascript">

var i2 = 1;
var first2 = 1;

function insert_row2() {
    if (i2 - first2 >= 5) {
        alert("不能再加了");
        return;
    }
    i2++;
    R2 = tbl2.insertRow() //insertRow() 方法用於在表格中的指定位置插入一個新行。
    C12 = R2.insertCell()  //insertCell() 方法用於在 HTML 表的一行的指定位置插入一個空的 <td> 元素。
    //C2 = R.insertCell()

    C12.innerHTML = "<select id='h2" + i2 + "' name='h" + i2 + "' class='form-control' style='width: 100px;display: inline'>" +
        "<option value='1' >並且</option>" +
        "<option value='2' >或者</option>" +
        "<option value='3'>不含</option>" +
        "</select>" + "<select id='type2" + i2 + "' name='type" + i2 + "' class='form-control' style='width: 150px;display: inline;margin-left: 5px'>" +
        "<option value='jigoumingcheng'>機構全稱</option>" +
        "<option value='guikou'>歸口管理單位</option>" +
        "<option value='province'>所在地域</option>" +
        "<option value='faren'>法人代表</option>" +
        "<option value='lianxiren'>聯絡人</option>" +
        "<option value='shuxing'>機構屬性</option>" +
        "<option value='key'>關鍵字</option>" +
        "<option value='nitouru'>擬投入資金總額</option>" +
        "<option value='danxuan'>技術需求解決方式</option>" +
        "<option value='duoxuan'>科技活動型別</option>" +
        "<option value='fenlei'>學科分類</option>" +
        "<option value='xqjsssly'>需求技術所屬領域</option>" +
        "<option value='xqjsyyhy'>需求技術應用行業</option>" +
        "</select>" + "<input id='SearchBox2" + i2 + "' name='SearchBox" + i2 + "' class='form-control' style='width: 150px;display: inline'/>" +
        "<select id='t2" + i2 + "' name='t2" + i2 + "' class='form-control' style='width: 100px;display: inline;margin-left: 5px'>" +
        "<option value='1' >模糊</option>" +
        "<option value='0' >精確</option>" +
        "</select>"
    if (i2 % 14 == 2) {
        $("#type" + i2 + " option[value='giukou']").prop("selected", true);
    } else if (i2 % 14 == 3) {
        $("#type" + i2 + " option[value='province']").prop("selected", true);
    } else if (i2 % 14 == 4) {
        $("#type" + i2 + " option[value='faren']").prop("selected", true);
    } else if (i2 % 14 == 5) {
        $("#type" + i2 + " option[value='lianxiren']").prop("selected", true);
    } else if (i2 % 14 == 6) {
        $("#type" + i2 + " option[value='shuxing']").prop("selected", true);
    } else if (i2 % 14 == 7) {
        $("#type" + i2 + " option[value='Name']").prop("selected", true);
    } else if (i2 % 14 == 8) {
        $("#type" + i2 + " option[value='key']").prop("selected", true);
    } else if (i2 % 14 == 9) {
        $("#type" + i2 + " option[value='nitouru']").prop("selected", true);
    } else if (i2 % 14 == 0) {
        $("#type" + i2 + " option[value='danxuan']").prop("selected", true);
    }
    /*else if (i % 14 == 3) {
        $("#type" + i + " option[value='yjlx']").prop("selected", true);
    } else if (i % 14 == 4) {
        $("#type" + i + " option[value='xkfl']").prop("selected", true);
    } else if (i % 14 == 5) {
        $("#type" + i + " option[value='xqjsssly']").prop("selected", true);
    } else if (i % 14 == 0) {
        $("#type" + i + " option[value='xqjsyyhy']").prop("selected", true);
    }*/

}

function deleteRow2(obj) {
    alert("確定刪除一行嗎?");
    if (i2 - first2 < 1) {
        alert("不能再刪除了");
        return;
    }
    tbl.deleteRow(obj.parentElement.parentElement.rowIndex+1);
    first++;
}

function Submit2() {

    var url2 = "chaxun?sql = ";	
    var c=document.getElementById('tjzd').value;
    alert(1);
    var sql2 = "select "+c+" from xvqiu where 1=1 "
    for (var j = first2; j <= i2; j++) {
        var y = $("#type2" + j + " option:selected").val();
        //alert(y)
        var box = "SearchBox2" + j;
        var t = $("#t2" + j + " option:selected").val();
        var h = $("#h2" + j + " option:selected").text();
        //alert(h);
        var input = document.getElementById(box).value;
        //alert(input)
        if (j <= i2) {
            if (h == "並且") {
                sql2 += " and ";
            }
            if (h == "或者") {
                sql2 += " or ";
            }
        }
        if (h == "不含") {
            sql2 += " and " + y + " != '" + input + "' ";

        } else {
            if (t == "1") {
                sql2 += y + " like '%" + input + "%'";
            } else {
                sql2 += y + "= '" + input + "' ";
            }

        }

    }
    $("#sql2").attr("value", sql2);
    //url+=sql;
    //window.location.href = url;<button id="Button" type="button"  onclick="Submit()">查詢</button>
    //return true;
}

</script>


<script type="text/javascript">


    var i = 1;
    var first = 1;

    function insert_row() {
        if (i - first >= 5) {
            alert("不能再加了");
            return;
        }
        i++;
        R = tbl.insertRow() //insertRow() 方法用於在表格中的指定位置插入一個新行。
        C1 = R.insertCell()  //insertCell() 方法用於在 HTML 表的一行的指定位置插入一個空的 <td> 元素。
        //C2 = R.insertCell()

        C1.innerHTML = "<select id='h" + i + "' name='h" + i + "' class='form-control' style='width: 100px;display: inline'>" +
            "<option value='1' >並且</option>" +
            "<option value='2' >或者</option>" +
            "<option value='3'>不含</option>" +
            "</select>" + "<select id='type" + i + "' name='type" + i + "' class='form-control' style='width: 150px;display: inline;margin-left: 5px'>" +
            "<option value='jigoumingcheng'>機構全稱</option>" +
            "<option value='guikou'>歸口管理單位</option>" +
            "<option value='province'>所在地域</option>" +
            "<option value='faren'>法人代表</option>" +
            "<option value='lianxiren'>聯絡人</option>" +
            "<option value='shuxing'>機構屬性</option>" +
            "<option value='gjz'>關鍵字</option>" +
            "<option value='nitouru'>擬投入資金總額</option>" +
            "<option value='jsxqhzms'>技術需求解決方式</option>" +
            "<option value='duoxuan'>科技活動型別</option>" +
            "<option value='fenlei'>學科分類</option>" +
            "<option value='lingyv'>需求技術所屬領域</option>" +
            "<option value='xqjsyyhy'>需求技術應用行業</option>" +
            "</select>" + " <input id='SearchBox" + i + "' name='SearchBox" + i + "' class='form-control' style='width: 150px;display: inline'/>"+
            "<select id='t" + i + "' name='t" + i + "' class='form-control' style='width: 100px;display: inline;margin-left: 5px'>" +
            "<option value='1' >模糊</option>" +
            "<option value='0' >精確</option>" +
            "</select>"
        if (i % 14 == 2) {
            $("#type" + i + " option[value='gkglbm']").prop("selected", true);
        } else if (i % 14 == 3) {
            $("#type" + i + " option[value='szdy']").prop("selected", true);
        } else if (i % 14 == 4) {
            $("#type" + i + " option[value='frdb']").prop("selected", true);
        } else if (i % 14 == 5) {
            $("#type" + i + " option[value='lxr']").prop("selected", true);
        } else if (i % 14 == 6) {
            $("#type" + i + " option[value='jgsx']").prop("selected", true);
        } else if (i % 14 == 7) {
            $("#type" + i + " option[value='jsxqmc']").prop("selected", true);
        } else if (i % 14 == 8) {
            $("#type" + i + " option[value='gjz']").prop("selected", true);
        } else if (i % 14 == 9) {
            $("#type" + i + " option[value='zjxqze']").prop("selected", true);
        } else if (i % 14 == 0) {
            $("#type" + i + " option[value='jsxqhzms']").prop("selected", true);
        }
        /*else if (i % 14 == 3) {
            $("#type" + i + " option[value='yjlx']").prop("selected", true);
        } else if (i % 14 == 4) {
            $("#type" + i + " option[value='xkfl']").prop("selected", true);
        } else if (i % 14 == 5) {
            $("#type" + i + " option[value='xqjsssly']").prop("selected", true);
        } else if (i % 14 == 0) {
            $("#type" + i + " option[value='xqjsyyhy']").prop("selected", true);
        }*/

    }

    function deleteRow(obj) {
        alert("確定刪除一行嗎?");
        if (i - first < 1) {
            alert("不能再刪除了");
            return;
        }
        tbl.deleteRow(obj.parentElement.parentElement.rowIndex);
        first++;
    }

    function Submit() {
        var url = "chaxun?sql = ";
        var sql = "select * from xvqiu where 1=1 and "

        for (var j = first; j <= i; j++) {
            var y = $("#type" + j + " option:selected").val();

            var box = "SearchBox" + j;
            var t = $("#t" + j + " option:selected").val();
            var h = $("#h" + j + " option:selected").text();
            //alert(t);
            var input = document.getElementById(box).value;
            if (j <= i) {
                if (h == "並且") {
                    sql += " and ";
                }
                if (h == "或者") {
                    sql += " or ";
                }
            }
            if (h == "不含") {
                sql += " and " + y +" != '"+ input + "' ";

            } else {
                if(t=="1"){
                    sql += y+" like '%"  + input + "%'";
                }else {
                    sql += y+"= '" + input + "' ";
                }

            }

        }
        //alert(sql);
        $("#sql").attr("value", sql)
        //alert(sql);
        //url+=sql;
        //window.location.href = url;<button id="Button" type="button"  onclick="Submit()">查詢</button>
        //return true;
    }

</script>
</html>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1><h1>1</h1>
<h1>1</h1>
<h1>1</h1>

<h1>1</h1>

<h1>1</h1>
<h1>1</h1>
<h1>1</h1>


<h1>1</h1>
<h1>1</h1>

<h1>1</h1>

<h1>1</h1>
<h1>1</h1>
<h1>1</h1>

  和servlet

package servlet;

import java.io.IOException;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import com.google.gson.Gson;

import Bean.Gongwen;
import Bean.User;
import Bean.shuju;
import DBUtil.DBUtil;

/**
 * Servlet implementation class setPie1
 */
@WebServlet("/setPie1")
public class setPie1 extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public setPie1() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charest=UTF-8");
		response.setCharacterEncoding("utf-8");
		String sql1=request.getParameter("sql2");
		String p=request.getParameter("tjzd");
		User user=(User) request.getSession().getAttribute("user");
	String sql="";
		if(user.getUsername().equals("guanliyuan"))
	{
			sql=sql1;
	}
		else {
			StringBuilder a=new StringBuilder(sql1);
			a.append("bumen = '"+user.getDanwei()+"'");
			
			sql=a.toString();
		}
		System.out.println(sql);
	Connection conn=DBUtil.getConn();
	QueryRunner runner=new QueryRunner();
	List<String> list=new ArrayList<String>();
	
	Statement state = null;
	ResultSet rs = null;

	try {
		state = conn.createStatement();
		rs = state.executeQuery(sql);
		while (rs.next()) // 這裡表示,當rs.next()有值得時候,即收到查詢結果
		{	String q=rs.getString(p);
			list.add(q); // 表示,把bean裡的資料存入到list當中
		}
	} catch (SQLException e) {
		e.printStackTrace();
	} finally {
		DBUtil.close(state, conn);
	}
	System.out.println(list.size());
	List<shuju> list1=new ArrayList<shuju>();
	boolean flag=true;
	
	for(int i=0;i<list.size();i++)
	{
		shuju s=new shuju(list.get(i),1);
			for(shuju c:list1)
			{
				if(c.getName().equals(s.getName()))
				{
					c.setValue(c.getValue()+1);
					flag=false;
					break;
				}
			}
			if(flag)
			{
				list1.add(s);
			}
			flag=true;
	}
	

	
		Gson gson=new Gson();
		String  json=gson.toJson(list1);
		System.out.println(json);
		request.setAttribute("json",json );
		request.setAttribute("list1", list1);
		request.setAttribute("kid", "panel-638309");
		request.getRequestDispatcher("/templete/tongji.jsp").forward(request, response);;
	
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}