图标联动

实现图标联动,即单击图,表高亮,单击表图高亮。其中主要代码如下:

myChart.on('click',function (params) {
		        // 获取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状态
		                $("#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();
		        // 设置浮动
		        myChart.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();
		        // 设置浮动
		        myChart.dispatchAction({ type: 'hideTip', name:name});//选中高亮
			});

 该代码放于个人的setOption()之后即可,其中table位<table></table>的id,效果如下:

 

posted @ 2020-11-07 15:56  yangqqq  阅读(149)  评论(0编辑  收藏  举报