要求：点击图表在下方表格的相应数据项中可以有突出显示。
实现方法：为统计图添加点击事件，点击统计图中数据，触发事件，先获取table tbody tr下的所有td，去掉之前标记的success状态，比较第一行第一个td的值是否和X轴值一样，一样则设置success状态，跳到指定id位置。不一样则进行下一个比较。
为了使success状态时，表格能突出显示，需要为表格的success状态设置不一样的样式，在表格处于非success状态时，取消突出显示的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echarts-多柱子柱状图</title>
<!-- 最新版本的 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>
<style>
body, html {
width: 100%;
height: 100%;
}
.section {
width: 915px;
border: 1px solid #ccc;
}
#barsDemo {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div class="section">
<div id="barsDemo"></div>
</div>
<table id="table" class="table table-bordered table-hover">
<thead>
<tr>
<th>Subject</th>
<th>x</th>
<th>y</th>
<th>z</th>
</tr>
</thead>
<tbody id="tbody">
<tr id="tr1">
<td>huaxue</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr id="tr2">
<td>Math</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr id="tr3">
<td>dili</td>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</tbody>
</table>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/echarts.js"></script>
<script>
$(function () {
initData();
});
//生成数据
function initData() {
var legendData = ['x', 'y','z'];
var bgColorList = ['#FBB730', '#31BDF2','#6197fb'];
var axisLabel = ['huaxue','Math', 'dili'];
var seriesValue = [];
for (var i = 0; i < legendData.length; i++) {
var arrData = [];
var seriesDataVal = null;
for (var j = 0; j < axisLabel.length; j++) {
arrData.push(Math.floor(Math.random() * 100));
}
seriesDataVal = {
barWidth: 10,//柱状条宽度
name:legendData[i],
type:'bar',
itemStyle: {
normal: {
show: true,//鼠标悬停时显示label数据
barBorderRadius: [10, 10, 10, 10],//柱形图圆角，初始化效果
color: bgColorList[i]
}
},
label: {
normal: {
show: true, //显示数据
position: 'top'//显示数据位置 'top/right/left/insideLeft/insideRight/insideTop/insideBottom'
}
} ,
data:arrData
};
seriesValue.push(seriesDataVal);
}
buildChart(legendData, axisLabel, seriesValue);
}
//生成Echarts图形
function buildChart(legendData, axisLabel, seriesValue) {
var chart = document.getElementById('barsDemo');
var echart = echarts.init(chart);
var option = {
title: {
text: "学科兴趣倾向分析",//正标题
x: "center", //标题水平方向位置
y: "0", //标题竖直方向位置
textStyle: {
fontSize: 18,
fontWeight: 'normal',
color: '#666'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'//阴影，若需要为直线，则值为'line'
}
},
toolbox: {
show: true,
feature: {
saveAsImage: {show: true}
}
},
legend: {
data: legendData,
y: 'bottom'//图例说明文字设置
},
grid: {
left: '3%',
right: '4%',
bottom: '10%',
top:'10%',
containLabel: true
},
xAxis: [{
min: 0,
type: 'category', //纵向柱状图，若需要为横向，则此处值为'value'， 下面 yAxis 的type值为'category'
data: axisLabel
}],
yAxis: [{
min: 0,
type: 'value',
splitArea: {show: false}
}],
label: {
normal: { //显示bar数据
show: true,
position: 'top'
}
},
series: seriesValue
};
echart.setOption(option);
//
echart.on('click',function (params) {
alert("点击事件触发");
// 获取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状态
alert(11);
$("#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();
// 设置浮动
echart.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();
// 设置浮动
echart.dispatchAction({ type: 'hideTip', name:name});//选中高亮
});
</script>
</body>
</html>
View Code