标签：name text tr 图表 联动 var table data

图标联动

思路

在 ECharts 中主要通过 on 方法添加点击事件处理函数，点击之后查找对应id的table的所有tr，遍历通过值设置对应行的属性使其高亮显示。

准备

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

为了表联动的时候比较好看一点，先要导入css样式，这里用到bootstrap框架。

其次用jquery的ajax获取数据的话，导入jQuery的包

最后导入关键的echarts包

效果

 关键代码

var tjzd = $("#Tjzd").find("option:selected").text();
        var N = $("#N").val();
        $.ajax({
            url: "login",
            type: "post",//请求方式
            data: {"tjzd": tjzd,"N":N},
            datatype: "JSON",//
            success: function (data) {
                data = JSON.parse(data);
                alert(tjzd);
                if(tjzd=="ip"){
                    var text = "<table id='table' class=\"table table-striped\"><thead><tr><th>"+tjzd+"</th><th>访问数</th></tr></thead><tbody>";
                    var Data = [];
                    for (i = 0; i < data.length; i++) {
                        var str = new Object();
                        str.name = data[i].ip;
                        str.value = data[i].counts;
                        Data.push(str);

                        text += "<tr>";
                        text += "<td>" + data[i].ip + "</td>" +
                            "<td>" + data[i].counts + "</td>";
                        text += "</tr>";
                    }
                    text += "</tbody></table>";
                    $("#show").html(text);
                }
                else if(tjzd=="流量") {
                    var text = "<table id='table' class=\"table table-striped\"><thead><tr><th>" + tjzd + "</th><th>访问数</th></tr></thead><tbody>";
                    var Data = [];
                    for (i = 0; i < data.length; i++) {
                        var str = new Object();
                        str.name = data[i].traffic;
                        str.value = data[i].counts;
                        Data.push(str);

                        text += "<tr>";
                        text += "<td>" + data[i].traffic + "</td>" +
                            "<td>" + data[i].counts + "</td>";
                        text += "</tr>";

                    }
                    text += "</tbody></table>";
                    $("#show").html(text);
                }

                echarts.init(document.getElementById('main')).dispose();//销毁上一个实例，否则会影响接下来的表样式
                var myChart = echarts.init(document.getElementById('main'));
                // 指定图表的配置项和数据
                var option = {
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            data: Data
                        }
                    ]
                };
                myChart.setOption(option);
                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: 'highlight', seriesIndex: 0, name: name});//选中高亮
                    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: 'downplay', name: name});//选中高亮
                    myChart.dispatchAction({type: 'hideTip', seriesIndex: 0, name: name});//选中高亮
                });

标签：name,text,tr,图表,联动,var,table,data
来源： https://www.cnblogs.com/g414056667/p/13945800.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。