echarts添加点击事件

来源：互联网发布：日军退子弹知乎编辑：程序博客网时间：2024/06/07 05:52

// 路径配置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设置宽，导致图无法显示，找了一天才找到原因！！！

0 1