使用了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);
}
);
}