大二下学期第一次结对作业(第二阶段)
今日完成了图表联动的部分,鼠标移动到地图上时对应的表格中会高亮显示,同样鼠标移动到表格时,地图会高亮显示。
$(".map-table tbody").find('tr').on('mouseenter',function(){
var hang = $(this).prevAll().length;
myChart.dispatchAction({ type: 'highlight', name:add_name(data.data[hang][1])});//选中高亮
})
// 鼠标移出的第几行数据
$(".map-table tbody").find('tr').on('mouseleave',function(){
var hang = $(this).prevAll().length;
myChart.dispatchAction({ type: 'downplay', name:add_name(data.data[hang][1])});//取消高亮
})
myChart.on('mouseOver', function(params){
console.log(params);//此处写点击事件内容
for(var i=0;i<data.data.length;i++){
// data11[i].value="0";
if(del_name(params.name) == data.data[i][1]){
console.log(params.name);
//addressList[i].value="1";
// 选中高亮
myChart.dispatchAction({ type: 'highlight', name:params.name});
$(".map-table tbody tr").eq(i).addClass('highTr');
}
}
});
// 移出该区域时,取消高亮
myChart.on('mouseOut', function(params){
console.log(params);//此处写点击事件内容
for(var i=0;i<data.data.length;i++){
// data11[i].value="0";
if(del_name(params.name) == data.data[i][1]){
console.log(params.name);
//取消高亮
myChart.dispatchAction({ type: 'downplay', name:params.name});
$(".map-table tbody tr").eq(i).removeClass('highTr');
}
}
});
.map-table .highTr{
background-color: #DFE7F2;
color: #000000;
}

浙公网安备 33010602011771号