今日完成了图表联动的功能,热词云与热词统计表格的联动。当鼠标停留在表格上方时对应的热词云会联动显示,当鼠标停留在热词云上时对应的表格会高亮显示。
$(".tablebox2 tbody").find('tr').on('mouseenter',function(){ var hang = $(this).prevAll().length $(".tablebox2 tbody tr").eq(hang).addClass('highTr'); chart.dispatchAction({ type: 'showTip',seriesIndex: 0, name:data.data[hang][0]}); //选中高亮 }) // 鼠标移出的第几行数据 $(".tablebox2 tbody").find('tr').on('mouseleave',function(){ var hang = $(this).prevAll().length; $(".tablebox2 tbody tr").eq(hang).removeClass('highTr'); chart.dispatchAction({ type: 'showTip', seriesIndex: 0, name:data.data[hang][0]}); //取消高亮 }) chart.on('mouseOver', function(params){ console.log(params);//此处写点击事件内容 for(var i=0;i<data.data.length;i++){ // data11[i].value="0"; if(params.name== data.data[i][0]){ console.log(params.name); //addressList[i].value="1"; // 选中高亮 $(".tablebox2 tbody tr").eq(i).addClass('highTr'); } } }); // 移出该区域时,取消高亮 chart.on('mouseOut', function(params){ console.log(params);//此处写点击事件内容 for(var i=0;i<data.data.length;i++){ // data11[i].value="0"; if(params.name== data.data[i][0]){ console.log(params.name); //取消高亮 $(".tablebox2 tbody tr").eq(i).removeClass('highTr'); } } });
.tablebox2{ float:left; clear:right; background-color: white; width: 900px; height: 800px; left: 0; right: 0; margin: 0 auto; } .linecharbox{ width: 1000px; height: 600px; } table td, table th { border: 1px solid #cad9ea; color: #666; height: 30px; } table thead tr th { background-color: #CCE8EB; width: 100px; } table tr:nth-child(odd) { background: #fff; } table tr:nth-child(even) { background: #F5FAFA; } .tablebox2 .highTr{ background-color: #DFE7F2; color: #000000; }