首页 > 其他分享> 文章详细

echarts----实现图表联动

2020-10-31 17:03:05 阅读：312 来源： 互联网

标签：图表海贼王 name tr value ---- 火影忍者 echarts

引言

今天完成了老师留下的图表联动的作业。自己写的时候是从数据库读的数据，在前端进行一些操作。有些乱，所以自己写了一个静态的图表联动的案列。

静态原理明白了，那么动态只是数据的转换而已，换汤不换药。

思路

当鼠标点击图示对应的区域，与之想对应的tr高亮。当鼠标移到tr下，与之相对应的图示区域悬浮，具体样子如下

点击火影忍者区域，下面对应的火影忍者一行高亮

鼠标悬浮在海贼王tr上，对应图示的区域悬浮如下

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/echarts.js"></script>
    <script src="../js/jquery-3.3.1.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
    <div id="main" style="height: 400px;width: 600px"></div>
    <table class="table table-bordered table-hover" id="table">
        <thead>
            <tr>
                <th>动漫名称</th>
                <th>喜欢人数</th>
            </tr>
        </thead>
        <tbody>
            <tr id="tr1">
                <td>火影忍者</td>
                <td>500</td>
            </tr>
            <tr id="tr2">
                <td>海贼王</td>
                <td>300</td>
            </tr>
            <tr id="tr3">
                <td>妖精的尾巴</td>
                <td>200</td>
            </tr>
            <tr id="tr4">
                <td>死神</td>
                <td>400</td>
            </tr>
            <tr id="tr5">
                <td>七龙珠</td>
                <td>600</td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript">
        // 页面加载函数
        $(function () {
            //进行echarts的初始化
            var myEcharts = echarts.init(document.getElementById("main"));
            var option = {
                // 定义标题
                title : {
                    text:"环形图示例"
                },
                // 鼠标悬停显示数据
                tooltip:{
                },
                //图例
                legend : {
                    data: ['火影忍者','海贼王','妖精的尾巴','死神','七龙珠']
                },
                //数据
                series :[
                    {
                        radius:['55%','70%'], //半径
                        label:{
                            normal:{
                                // 取消在原来的位置显示
                                show:false,
                                // 在中间显示
                                position:'center'
                            },
                            // 高亮扇区
                            emphasis:{
                                show:true,
                                textStyle:{
                                    fontSize:30,
                                    fontWeight:'bold'
                                }
                            }
                        },
                        data:[
                                // 对应图例的值
                                {name:'火影忍者',value:500},
                                {name:'海贼王',value:300},
                                {name:'妖精的尾巴',value:200},
                                {name:'死神',value:400},
                                {name:'七龙珠',value:600}
                            ],
                        type:'pie',
                        //关掉南丁格尔图
                        //roseType:'radius'
                    }
                ]
            };
            // 设置配置项
            myEcharts.setOption(option);
            // 设置echarts的点击事件
            myEcharts.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();
                // 设置浮动
                myEcharts.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();
                // 设置浮动
                myEcharts.dispatchAction({ type: 'hideTip', name:name});//选中高亮
            });
        });



    </script>
</body>
</html>

静态网页和动态网页一个思路，按思路做即可。不懂看注释

标签：图表,海贼王,name,tr,value,----,火影忍者,echarts
来源： https://www.cnblogs.com/yangxiao-/p/13906745.html

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

ICode9