[前端]弹出框中显示图表（popover.js + echarts.js）

最新推荐文章于 2024-05-21 11:41:40 发布

ZJU_fish1996

最新推荐文章于 2024-05-21 11:41:40 发布

阅读量5.7k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/ZJU_fish1996/article/details/68922370

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用了bootstrap中的popover.js来显示弹出提示框，发现提示框中是可以嵌入html代码的，所以想尝试着把echarts.js的效果嵌入到提示页面。

但是强行拼接出现了比较严重的问题，因为echarts.js是在页面刷新的时候调用的，而弹出框的html是动态产生的，所以需要让图表部分的js代码延时执行，以下是我研究出的一个解决方案。

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home</title>

<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/my.css">
<script src="js/jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script src="js/chart.js"></script>
</head>
    <body>

        <div class="row">
            <div class = "col-md-2"></div>
            <div class = "col-md-8">
            <table  class ="table table-hover">
                <tr>
                    <td style="width:10%">
                        <div  name = "article" id = "0" rel="drevil">

                       <svg style = "width:20px;height:20px" xmlns="http://www.w3.org/2000/svg" version="1.1">
                           <circle name="circle" class="nonfull" />
                       </svg>   
                       </div>
                    </td>
                    <td><a href="content.html" style="color:rgb(100,100,100)">123</a></td>

                </tr>
                <tr>
                    <td style="width:10%">
                        <div  name = "article" id="1" rel="drevil">
                       <svg style = "width:20px;height:20px" xmlns="http://www.w3.org/2000/svg" version="1.1">
                           <circle name="circle" class="nonfull" />
                       </svg>
                        </div>
                    </td>
                    <td><a href="content.html" style="color:rgb(100,100,100)">123</a></td>
                </tr>
                <tr>
                    <td>
                        <div  name = "article" id="2" rel="drevil">
                       <svg style = "width:20px;height:20px" xmlns="http://www.w3.org/2000/svg" version="1.1">
                           <circle name="circle" class="nonfull" />
                       </svg>
                        </div>
                    </td>
                    <td><a href="content.html" style="color:rgb(100,100,100)">123</a></td>
                </tr>
                <tr>
                    <td>
                        <div  name = "article" id="3" rel="drevil">
                       <svg style = "width:20px;height:20px" xmlns="http://www.w3.org/2000/svg" version="1.1">
                           <circle name="circle" class="nonfull" />
                       </svg>
                        </div>
                    </td>
                    <td><a href="content.html" style="color:rgb(100,100,100)">123</a></td>
                </tr>
                <tr>
                    <td>
                        <div  name = "article" id="4" rel="drevil">
                       <svg style = "width:20px;height:20px" xmlns="http://www.w3.org/2000/svg" version="1.1">
                           <circle name="circle" class="nonfull" />
                       </svg>
                        </div>
                    </td>
                    <td><a href="content.html" style="color:rgb(100,100,100)">123</a></td>
                </tr>
                <tr>
                    <td>
                        <div  name = "article" id="5" rel="drevil">
                       <svg style = "width:20px;height:20px" xmlns="http://www.w3.org/2000/svg" version="1.1">
                           <circle name="circle" class="nonfull" />
                       </svg>
                        </div>
                    </td>
                    <td><a href="content.html" style="color:rgb(100,100,100)">123</a></td>
                </tr>
                <tr>
                    <td>
                        <div  name = "article" id="6" rel="drevil">
                       <svg style = "width:20px;height:20px" xmlns="http://www.w3.org/2000/svg" version="1.1">
                           <circle name="circle" class="nonfull" />
                       </svg>
                        </div>
                    </td>
                    <td><a href="content.html" style="color:rgb(100,100,100)">123</a></td>
                </tr>
            </table>

            </div>
            <div class = "col-md-2"></div>
       
       </div>

    <script>
$(function(){
	$("[rel=drevil]").popover({
	            trigger:'manual',
	            placement : 'left', //placement of the popover. also can use top, bottom, left or right
	           //this is the top title bar of the popover. add some basic css
	            html: 'true', //needed to show html of course
	            content : '<div id="test" style="width:180px;height:170px;opacity:0.85;"></div>', //this is the content of the html box. add the image here or anything you want really.
	            animation: false
	        }).on("mouseenter", function () {
	                    var _this = this;
	                    $(this).popover("show").on("mouseover",function(){
	                        load();
                        })
	                    $(this).siblings(".popover").on("mouseleave", function () {
	                        $(_this).popover('hide');
	                    }
	                    );
	                }).on("mouseleave", function () {
	                    var _this = this;
	                    setTimeout(function () {
	                        if (!$(".popover:hover").length) {
	                            $(_this).popover("hide")
	                        }
	                    }, 100);
	                });
})
</script>

    </body>
</html>

引用的一些文件：

my.css

.nonfull{
stroke:rgb(100,100,100);fill:rgb(255,255,255);cx:10;cy:10;r:5;stroke-width:1
}

.full{
stroke:rgb(100,100,100);fill:rgb(100,100,100);cx:10;cy:10;r:5;stroke-width:1
}

.rating{font-size: 14px;line-height: 1.2;}

.leave{margin-top:10px;font-size:1.2em}

.over{border-radio:5px;margin-top:10px;font-size:1.2em;background-color:rgb(66,165,245);color:white}

chart.js

function load() {
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });


// 使用
    require(
        [
            'echarts',
            'echarts/chart/pie'
        ],
        function (ec) {
            var myChart = ec.init(document.getElementById('test'));

            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },

                series: [
                    {
                        type: 'pie',
                        radius: '36%',
                        center: ['50%', '50%'],
                        data: [
                            {value: Math.random()*100, name: '正面'},
                            {value: Math.random()*100, name: '负面'},
                            {value: Math.random()*100, name: '客观'},
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            myChart.setOption(option);
        }
    );
}

ZJU_fish1996

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
[前端]弹出框中显示图表（popover.js + echarts.js）

使用了bootstrap中的popover.js来显示弹出提示框，发现提示框中是可以嵌入html代码的，所以想尝试着把echarts.js的效果嵌入到提示页面。但是强行拼接出现了比较严重的问题，因为echarts.js是在页面刷新的时候调用的，而弹出框的html是动态产生的，所以需要让图表部分的js代码延时执行，以下是我研究出的一个解决方案。Home
复制链接

扫一扫

专栏目录