• 图标联动


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

    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,效果如下:

     

  • 相关阅读:
    Git
    linux下利用virtualenv搭建虚拟环境
    Session和Cookie
    Redis
    从零开始学Go之基本(二):包、函数声明与格式化输出
    从零开始学Go之HelloWorld
    C++ vector容器使用
    FIRST集和FOLLOW集的计算
    go编译错误:runnerw.exe:CreateProcess failed with error 216:
    Linux下vi编辑器常用命令
  • 原文地址:https://www.cnblogs.com/yangqqq/p/13941266.html
Copyright © 2020-2023  润新知