今天老師布置任務為：實現數據的可視化，並實現圖表聯動。
其具體內容為將后台數據以三種圖形形式（折現圖，柱狀圖，餅狀圖）展示與表格展示在界面上，並在鼠標移動到表格上時讓圖表符合條件的一列高亮，或者點擊各種圖的數據時將圖表中符合條件的一行進行高亮顯示。
基本截圖如下：
這個頁面的全部代碼：
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Insert title here</title> <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet"> <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> <script src="../js/bootstrap.min.js"></script> </head> <body> <ul class="nav nav-tabs"> <li role="presentation" ><a href="${pageContext.request.contextPath}/templete/tongji.jsp">綜合檢索</a></li> <li role="presentation" ><a href="fljs.jsp">分類檢索</a></li> <li role="presentation" class="active"><a href="${pageContext.request.contextPath}/templete/tubiao.jsp">圖表顯示</a></li> </ul> <label>————————請選擇檢索條件——————————</label> <%--分類檢索--%> <div class="tab-pane active" id="panel-169507"> <form action="${pageContext.request.contextPath}/tubiao_Servlet" method="post" > <div class="row-fluid"> <div class="span12"> <h4 align="left" >分類檢索條件 <select id="jstj" class="form-control" style="height: 40px;display: inline;width:200px;" name="jstj"> <option value ="0">--請選擇--</option> <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="ntrzjze">擬投入資金總額</option> <option value="jsxqjjfs">技術需求解決方式</option> <option value="kjhdlx">科技活動類型</option> <option value="xkfl">學科分類</option> <option value="xqjsssly">需求技術所屬領域</option> <option value="xqjsyyhy">需求技術應用行業</option> </select> <input type="text" class="form-control" name="value" id="value" style="width:250px;height: 40px;display: inline" value="${value}"> </h4> <h4> 檢索要求 <select id="jsyq" class="form-control" style="width: 200px;height: 40px;display: inline" name="jsyq" > <option value = "0">模糊查詢</option> <option value = "1">精確查詢</option> </select> 選擇統計字段 <select id="tjzd" class="form-control" style="width: 200px;height: 40px;display: inline" name="tjzd" > <option value = "jgsx">機構屬性</option> <option value = "kjhdlx">科技活動類型</option> <option value = "jsxqjjfs">技術需求解決方式</option> </select> 選擇圖表類型 <select id="tblx" class="form-control" style="width: 200px;height: 40px;display: inline" name="tblx"> <option value = "zzt">柱狀圖</option> <option value = "zxt">折線圖</option> <option value = "bzt">餅狀圖</option> </select> <input type="submit" class="btn btn-success" style="width: 200px;height:30px;position: relative;left: 100px" value="查詢"> </h4> </div> </div> </form> <div id="main" style="width: 700px;height:400px;" > <script type="text/javascript"> $(function() { if('${tblx}'=="zzt"){ var myChart = echarts.init(document.getElementById('main')); var arr = new Array(); var index = 0; <c:forEach items="${listtb}" var="item"> arr[index++] = ${item.count}; </c:forEach> // 指定圖表的配置項和數據 var option = { title: { text: '統計圖表' }, tooltip: { show: true }, legend: { data:['統計數'] }, xAxis : [ { type : 'category', axisLabel:{ interval:0,//橫軸信息全部顯示 rotate:40,//-30度角傾斜顯示 }, data : [ <c:forEach items="${listtb}" var="item"> ["${item.type}"], </c:forEach> ] } ], yAxis : [ { type : 'value' } ], series : [ { name:'統計數', type:'bar', data: arr } ] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); }else if('${tblx}'=="zxt"){ var myChart = echarts.init(document.getElementById('main')); var arr = new Array(); var index = 0; <c:forEach items="${listtb}" var="item"> arr[index++] = ${item.count}; </c:forEach> // 指定圖表的配置項和數據 var option = { title: { text: '統計圖表' }, tooltip: { show: true }, legend: { data:['統計數'] }, xAxis : [ { type : 'category', axisLabel:{ interval:0,//橫軸信息全部顯示 rotate:40,//-30度角傾斜顯示 }, data : [ <c:forEach items="${listtb}" var="item"> ["${item.type}"], </c:forEach> ] } ], yAxis : [ { type : 'value' } ], series : [ { name:'統計數', type:'line', data: arr } ] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); }else{ var myChart = echarts.init(document.getElementById('main')); var arr = new Array(); var index = 0; <c:forEach items="${listtb}" var="item"> arr[index++] = ${item.count}; </c:forEach> var option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, data : [ <c:forEach items="${listtb}" var="item"> '${item.type}', </c:forEach> ] }, series: [ { name: '訪問來源', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ <c:forEach items="${listtb}" var="item"> {value: '${item.count}', name: '${item.type}'}, </c:forEach> ] } ] }; myChart.setOption(option); } myChart.on('click',function (params) { // 獲取table下所有的tr let trs = $("#table tbody tr"); for (var i = 0;i<trs.length;i++){ // 獲取tr下所有的td let tds = trs.eq(i).find("td"); // 先把之前的標記的success去掉 $("#table tbody tr").eq(i).removeClass('success'); var n = 0; if('${tjzd}'=="jgsx"){ n=4; }else if('${tjzd}'=="kjhdlx"){ n=5; }else{ n=6; } // 如果點擊圖示的名字和table下的某一個行的第一個td的值一樣 if (params.name == tds.eq(n).text()){ //設置success狀態 $("#table tbody tr").eq(i).addClass('success'); // 跳轉到頁面指定的id位置 $("html,body").animate({scrollTop:$("#table tbody tr").eq(i).offset().top},1000); } } }); // 當鼠標落在tr時，顯示浮動 $("#table tbody").find("tr").on("mouseenter",function () { var n = 0; if('${tjzd}'=="jgsx"){ n=4; }else if('${tjzd}'=="kjhdlx"){ n=5; }else{ n=6; } // 獲得當前匹配元素的個數 let row = $(this).prevAll().length; // 獲得當前tr下td的名字 let name = $("#table tbody").find("tr").eq(row).find("td").eq(n).text(); // 設置浮動 myChart.dispatchAction({ type: 'showTip',seriesIndex: 0, name:name});//選中高亮 }); // 當鼠標移開tr時候取消浮動 $("#table tbody").find("tr").on("mouseleave",function () { var n = 0; if('${tjzd}'=="jgsx"){ n=4; }else if('${tjzd}'=="kjhdlx"){ n=5; }else{ n=6; } // 獲得當前匹配元素的個數 let row = $(this).prevAll().length; // 獲得當前tr下td的名字 let name = $("#table tbody").find("tr").eq(row).find("td").eq(n).text(); // 設置浮動 myChart.dispatchAction({ type: 'hideTip', name:name});//選中高亮 }); }); </script> </div> <div class="row-fluid"> <div class="span12"> <table class="table table-bordered table-hover" id="table"> <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="m" items="${list}"> <tr> <td>${m.jsxqmc}</td> <td>${m.xkfl}</td> <td>${m.gkglbm}</td> <td>${m.jgmc}</td> <td>${m.jgsx}</td> <td>${m.kjhdlx}</td> <td>${m.jsxqjjfs}</td> <td>${m.szdy}</td> <td><a href="${pageContext.request.contextPath}/xssh1_Servlet?wjid=${m.wjid}&sy=fljs"><button class="btn btn-success">查看</button></a></td> </tr> </c:forEach> </tbody> </table> </div> </div> </div> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> <h1 class="invisible">11</h1> </body> </html>
實現聯動的Jquery語句：
myChart.on('click',function (params) {
// 獲取table下所有的tr
let trs = $("#table tbody tr");
for (var i = 0;i<trs.length;i++){
// 獲取tr下所有的td
let tds = trs.eq(i).find("td");
// 先把之前的標記的success去掉
$("#table tbody tr").eq(i).removeClass('success');
var n = 0;
if('${tjzd}'=="jgsx"){
n=4;
}else if('${tjzd}'=="kjhdlx"){
n=5;
}else{
n=6;
}
// 如果點擊圖示的名字和table下的某一個行的第一個td的值一樣
if (params.name == tds.eq(n).text()){
//設置success狀態
$("#table tbody tr").eq(i).addClass('success');
// 跳轉到頁面指定的id位置
$("html,body").animate({scrollTop:$("#table tbody tr").eq(i).offset().top},1000);
}
}
});
// 當鼠標落在tr時，顯示浮動
$("#table tbody").find("tr").on("mouseenter",function () {
var n = 0;
if('${tjzd}'=="jgsx"){
n=4;
}else if('${tjzd}'=="kjhdlx"){
n=5;
}else{
n=6;
}
// 獲得當前匹配元素的個數
let row = $(this).prevAll().length;
// 獲得當前tr下td的名字
let name = $("#table tbody").find("tr").eq(row).find("td").eq(n).text();
// 設置浮動
myChart.dispatchAction({ type: 'showTip',seriesIndex: 0, name:name});//選中高亮
});
// 當鼠標移開tr時候取消浮動
$("#table tbody").find("tr").on("mouseleave",function () {
var n = 0;
if('${tjzd}'=="jgsx"){
n=4;
}else if('${tjzd}'=="kjhdlx"){
n=5;
}else{
n=6;
}
// 獲得當前匹配元素的個數
let row = $(this).prevAll().length;
// 獲得當前tr下td的名字
let name = $("#table tbody").find("tr").eq(row).find("td").eq(n).text();
// 設置浮動
myChart.dispatchAction({ type: 'hideTip', name:name});//選中高亮
});