引言
今天完成了老師留下的圖表聯動的作業。自己寫的時候是從數據庫讀的數據，在前端進行一些操作。有些亂，所以自己寫了一個靜態的圖表聯動的案列。
靜態原理明白了，那么動態只是數據的轉換而已，換湯不換葯。
思路
當鼠標點擊圖示對應的區域，與之想對應的tr高亮。當鼠標移到tr下，與之相對應的圖示區域懸浮，具體樣子如下
點擊火影忍者區域，下面對應的火影忍者一行高亮
鼠標懸浮在海賊王tr上，對應圖示的區域懸浮如下
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/echarts.js"></script>
<script src="../js/jquery-3.3.1.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 id="main" style="height: 400px;width: 600px"></div>
<table class="table table-bordered table-hover" id="table">
<thead>
<tr>
<th>動漫名稱</th>
<th>喜歡人數</th>
</tr>
</thead>
<tbody>
<tr id="tr1">
<td>火影忍者</td>
<td>500</td>
</tr>
<tr id="tr2">
<td>海賊王</td>
<td>300</td>
</tr>
<tr id="tr3">
<td>妖精的尾巴</td>
<td>200</td>
</tr>
<tr id="tr4">
<td>死神</td>
<td>400</td>
</tr>
<tr id="tr5">
<td>七龍珠</td>
<td>600</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
// 頁面加載函數
$(function () {
//進行echarts的初始化
var myEcharts = echarts.init(document.getElementById("main"));
var option = {
// 定義標題
title : {
text:"環形圖示例"
},
// 鼠標懸停顯示數據
tooltip:{
},
//圖例
legend : {
data: ['火影忍者','海賊王','妖精的尾巴','死神','七龍珠']
},
//數據
series :[
{
radius:['55%','70%'], //半徑
label:{
normal:{
// 取消在原來的位置顯示
show:false,
// 在中間顯示
position:'center'
},
// 高亮扇區
emphasis:{
show:true,
textStyle:{
fontSize:30,
fontWeight:'bold'
}
}
},
data:[
// 對應圖例的值
{name:'火影忍者',value:500},
{name:'海賊王',value:300},
{name:'妖精的尾巴',value:200},
{name:'死神',value:400},
{name:'七龍珠',value:600}
],
type:'pie',
//關掉南丁格爾圖
//roseType:'radius'
}
]
};
// 設置配置項
myEcharts.setOption(option);
// 設置echarts的點擊事件
myEcharts.on('click',function (params) {
// 獲取table下所有的tr
let trs = $("#table tbody tr");
for (let i = 0;i<trs.length;i++){
// 獲取tr下所有的td
let tds = trs.eq(i).find("td");
// 先把之前的標記的success去掉
$("#table tbody tr").eq(i).removeClass('success');
// 如果點擊圖示的名字和table下的某一個行的第一個td的值一樣
if (params.name == tds.eq(0).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 () {
// 獲得當前匹配元素的個數
let row = $(this).prevAll().length;
// 獲得當前tr下td的名字
let name = $("#table tbody").find("tr").eq(row).find("td").eq(0).text();
// 設置浮動
myEcharts.dispatchAction({ type: 'showTip',seriesIndex: 0, name:name});//選中高亮
});
// 當鼠標移開tr時候取消浮動
$("#table tbody").find("tr").on("mouseleave",function () {
// 獲得當前匹配元素的個數
let row = $(this).prevAll().length;
// 獲得當前tr下td的名字
let name = $("#table tbody").find("tr").eq(row).find("td").eq(0).text();
// 設置浮動
myEcharts.dispatchAction({ type: 'hideTip', name:name});//選中高亮
});
});
</script>
</body>
</html>
靜態網頁和動態網頁一個思路，按思路做即可。不懂看注釋
