其他分享
首页 > 其他分享> > echarts----实现图表联动

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