今日完成了图表联动的部分,鼠标移动到地图上时对应的表格中会高亮显示,同样鼠标移动到表格时,地图会高亮显示。
$(".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;
}