echarts添加点击事件

// 路径配置
require.config({
	paths : {
		echarts : "jquery/echarts-2.2.7/build/dist"
	}
});
// 使用EChart.js画图
function drawChart() {
	require([ "echarts", "echarts/chart/force" // 使用柱状图就加载bar模块，按需加载
	], function(ec) {
		// 基于准备好的dom，初始化echarts图表
		var myChart = ec.init(document.getElementById("myChart"));
		// 添加点击事件
		var ecConfig = require("echarts/config");
		myChart.on(ecConfig.EVENT.CLICK, eConsole);  
		var option = {
			tooltip : {
				show : false,
				trigger : "item",
				formatter : "{a} : {b}"
			},
			toolbox : {
				show : true,
				feature : {
					restore : {
						show : true
					},
				}
			},
			series : [ {
				type : "force",
				name : "关系",
				ribbonType : false,
				clickable : true,
				draggable : false,
				categories : [ {
					name : "属性"
				}, {
					name : "实例"
				} ],
				itemStyle : {
					normal : {
						label : {
							show : true,
							textStyle : {
								color : "#333"
							}
						},
						nodeStyle : {
							brushType : "both",
							borderColor : "rgba(255,215,0,0.4)",
							borderWidth : 1
						},
						linkStyle : {
							type : "curve"
						}
					},
					emphasis : {
						label : {
							show : false
						// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
						},
						nodeStyle : {
						// r: 30
						},
						linkStyle : {}
					}
				},
				useWorker : false,
				minRadius : 15,
				maxRadius : 25,
				gravity : 1.1,
				scaling : 1.1,
				roam : false,
				nodes : [ {
					category : 1,
					name : "实例",
					value : 10,
					label : "宝马",
				}, {
					category : 0,
					name : "属性1",
					value : 6,
					label : "宝马X1"
				}, {
					category : 0,
					name : "属性2",
					value : 6,
					label : "宝马X5"
				}, {
					category : 0,
					name : "属性3",
					value : 6,
					label : "宝马3系"
				}, {
					category : 0,
					name : "属性4",
					value : 6,
					label : "宝马7系"
				}, {
					category : 0,
					name : "属性5",
					value : 6,
					label : "宝马X6"
				}, {
					category : 0,
					name : "属性6",
					value : 6,
					label : "宝马1系"
				}, {
					category : 0,
					name : "属性7",
					value : 6,
					label : "宝马i8"
				} ],
				links : [ {
					source : "属性1",
					target : "实例",
					weight : 1,
					name : "属性1"
				}, {
					source : "属性2",
					target : "实例",
					weight : 1,
					name : "属性2"
				}, {
					source : "属性3",
					target : "实例",
					weight : 1,
					name : "属性3"
				}, {
					source : "属性4",
					target : "实例",
					weight : 1,
					name : "属性4"
				}, {
					source : "属性5",
					target : "实例",
					weight : 1,
					name : "属性5"
				}, {
					source : "属性6",
					target : "实例",
					weight : 1,
					name : "属性6"
				}, {
					source : "属性7",
					target : "实例",
					weight : 1,
					name : "属性7"
				}, ]
			} ]
		};

		// 为echarts对象加载数据
		myChart.setOption(option);
		
	});
}

function eConsole(param) {  
    if (typeof param.seriesIndex == "undefined") {  
        return;  
    }  
    if (param.type == "click") {  
        alert(param.name);  
    }  
}  

在html中建一个空的div，id是myChart，onclick事件是drawChart()，即可运行得到结果。

实现节点可点击，重点在于三行代码，如下：

var ecConfig = require("echarts/config");
myChart.on(ecConfig.EVENT.CLICK, eConsole);
clickable : true,

重要的事情说三遍：<div id="myChart" class="myChart"></div>一定要设置宽和高、一定要设置宽和高、一定要设置宽和高！！！
刚刚因为忘记给myChart设置宽，导致图无法显示，找了一天才找到原因！！！