echarts label点击_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,

重要的事情说三遍：

刚刚因为忘记给myChart设置宽，导致图无法显示，找了一天才找到原因！！！

本文来源于网络：查看 >https://blog.csdn.net/anwenxixi/article/details/48437617