<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ECharts右键菜单事件</title>
<script type="text/javascript" src="echarts.js"></script>
<script type="text/javascript">
var initCharts = function (){
var option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
var ec = echarts.init(document.getElementById('echartbox'));
ec.setOption(option);
return ec;
};
var bindEChcartsContextMenu = function(ec){
/*
这里占用了 mouseover 和 mouseout 事件，如果已经绑定了这两个事件的话，
只需要把 currentItem 赋值的代码放在事件中即可
*/
var currentItem = null;
ec.on("mouseover",function(pItem){
currentItem = pItem;
});
ec.on("mouseout",function(pItem){
currentItem = null;
});
window.document.onclick = function(){
hideMenu()
}
document.oncontextmenu=function(event){
if(currentItem){
//currentItem 的右键菜单；
showMenu(event,currentItem);
}
return false;
}
}
//显示菜单 这里随便写一个
var showMenu = function(event,item){
var menu = document.getElementById("menuBox");
menu.style.display = "block";
menu.style.left = event.x+"px";
menu.style.top = event.y+"px";
menu.getElementsByClassName("menuTitle")[0].innerHTML = item.data.name;
}
var hideMenu = function(){
document.getElementById("menuBox").style.display = "none";
}
window.onload = function(){
var ec = initCharts();
bindEChcartsContextMenu(ec);
}
</script>
<style type="text/css">
#menuBox { display: inline-block; position: absolute; border: 1px solid #aaa; background-color: #fff;font-size: 12px;}
#menuBox ul{margin: 0px; padding: 0px;}
#menuBox li{list-style-type: none; padding: 8px; cursor: pointer; }
#menuBox li:hover{background-color: #f1f1f1;}
#menuBox li span.menuTitle{background-color: #f1f1f1;padding:5px; display:block;}
</style>
</head>
<body>
<div id="echartbox" style="height: 300px; width: 600px;"></div>
<div id="menuBox" style="display: none;">
<div><span class="menuTitle"></span></div>
<ul>
<li>菜单1</li>
<li>菜单1</li>
<li>菜单1</li>
<li>菜单1</li>
</ul>
</div>
</body>
</html>
