大二下学期第一次结对作业(第二阶段)

今日完成了图表联动的部分,鼠标移动到地图上时对应的表格中会高亮显示,同样鼠标移动到表格时,地图会高亮显示。

                    $(".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;
}
 

 

posted @ 2021-03-30 21:58  风吹过半夏  阅读(22)  评论(0编辑  收藏  举报