在echars 3.x 4.x 我是用dblclick没管用，没效果。
单击变双击，模拟笨办法：函数代码
var g_clickTime=null;
var g_TimeFn = null;
var g_onItemName = null;
<!-- myDate.getMilliseconds(); -->
myChart.on('click', function (params) {
var myDate = new Date();
if (g_clickTime == null){
//第一次进来
g_clickTime = myDate.getMilliseconds();
g_onItemName = params.name;
//起一个定时器，进行重置
g_TimeFn = setTimeout(function(){
//要执行的代码
g_clickTime=null;
},300);
}else{
clearTimeout(g_TimeFn);
//第二次进来，
if( Math.abs(myDate.getMilliseconds()-g_clickTime) < 300 && g_onItemName == params.name){
//是双击操作
console.log(params);
}
g_clickTime=null;
}
});
全部测试代码，复制到txt文件，修改扩展名为.html直接用浏览器打开。打开开发工具。
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {
};
option = null;
var categories=[];
for (var i = 0; i < 4; i++) {
categories[i]={
name: '类目a' + i};
<!-- categories[i] = ['类目a' + i]; -->
}
<!-- categories[2]={
name,categories[2][1]}; -->
<!-- console.log(categories[2][1]); -->
console.log(categories);
var datas=[];
var edges=[];
<!-- datas -->
//产生随机数函数
function RndNum(min, max){
return Math.floor(Math.random()*(max-min+1)+min);
}
//一个５００００,
// 30个
//获取当前屏幕的宽高，屏幕比例width-->屏幕宽度 heigh-->屏幕高度 sacle-->查看当前是几倍分辨率屏幕 2X、3X
var width=document.body.clientWidth;
var height=document.body.clientHeight;
var yAxis=10000;
var xAxis=width/height*yAxis;
var ylevel_0=0;
var ylevel_1=yAxis/10*2;
var ylevel_2=yAxis/10*3+ylevel_1;
var ylevel_3=yAxis/10*5+ylevel_2;
var xlevel_0=0;
<!-- console.log(width, height); -->
<!-- console.log(xAxis, yAxis); -->
var levelInterval=100
var groupInterval=30
for (var i=0;i<3000;i++)
{
datas.push({
name: '节点1'+i, y: RndNum(ylevel_2, ylevel_3), x: RndNum(xlevel_0,xAxis) ,symbolSize: RndNum(0,5), category:1});
}
for (var i=0;i<700;i++)
{
datas.push({
name: '节点2'+i, y: RndNum(ylevel_1, ylevel_2), x: RndNum(xlevel_0,xAxis) ,symbolSize: RndNum(5,10) , category:2});
}
for (var i=0;i<200;i++)
{
datas.push({
name: '节点3'+i, y: RndNum(ylevel_0, ylevel_1), x: RndNum(xlevel_0,xAxis) ,symbolSize: RndNum(15,20) , category:3});
}
datas.push({
name: 'xy0-0', y: 0, x: 0 ,symbolSize: 20, category:0 });
datas.push({
name: 'xy0-3', y: 10000, x: 0 ,symbolSize: 20,category:0 });
datas.push({
name: 'xy7-0', y: 0, x: xAxis ,symbolSize: 20,category:0 });
edges.push({
source: 'xy0-0', target: 'xy0-3', value:'', lineStyle: {
normal: {
width: 1, opacity:1 , color:'black' } },});
edges.push({
source: 'xy7-0', target: 'xy0-0' });
option = {
title: {
text: 'Graph 简单示例'
},
xAxis: {
show: true,
<!-- silent: true, -->
min:0,
max:xAxis,
splitNumber:7,
boundaryGap:false,
splitLine:{
interval:2,lineStyle:{
width:2,color: 'black'}},
},
yAxis: {
show: true,
<!-- silent: true, -->
min:0,
max:yAxis,
splitNumber:3,
boundaryGap:false,
splitLine:{
interval:2,lineStyle:{
width:2,color: 'green'}},
axisLabel: {
formatter: function (value, index) {
return 'level '+index;
}
}
},
legend: [{
// selectedMode: 'single',
data: categories.map(function (a) {
return a.name;
})
}],
tooltip: {
},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series : [
{
type: 'graph',
layout: 'none',
symbolSize: 10,
categories: categories,
//是否可变化
roam: true,
label: {
normal: {
show: false
}
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
normal: {
textStyle: {
fontSize: 40
}
}
},
data: datas,
// links: [],
links: edges,
}
]
};;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
<!-- 'click'，'dblclick'，'mousedown'，'mouseup'，'mouseover'，'mouseout'，'globalout'，'contextmenu' -->
var g_clickTime=null;
var g_TimeFn = null;
var g_onItemName = null;
<!-- myDate.getMilliseconds(); -->
myChart.on('click', function (params) {
var myDate = new Date();
if (g_clickTime == null){
//第一次进来
g_clickTime = myDate.getMilliseconds();
g_onItemName = params.name;
//起一个定时器，进行重置
g_TimeFn = setTimeout(function(){
//要执行的代码
g_clickTime=null;
},300);
}else{
clearTimeout(g_TimeFn);
//第二次进来，
if( Math.abs(myDate.getMilliseconds()-g_clickTime) < 300 && g_onItemName == params.name){
//是双击操作
console.log(params);
}
g_clickTime=null;
}
});
<!-- 我是用这个双击是不管用 -->
<!-- myChart.on('dblclick', function (params) {
-->
<!-- console.log(params); -->
<!-- }); -->
</script>
</body>
</html>