// 路径配置
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);
}
}

实现节点可点击,重点在于三行代码,如下:

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

echart字符云之添加点击事件的更多相关文章

  1. iOS开发小技巧 - label中的文字添加点击事件

    Label中的文字添加点击事件 GitHub地址:https://github.com/lyb5834/YBAttributeTextTapAction 以前老师讲过类似的功能,自己懒得回头看了,找了 ...

  2. 【Swift 2.1】为 UIView 添加点击事件和点击效果

    前言 UIView 不像 UIButton 加了点击事件就会有点击效果,体验要差不少,这里分别通过自定义和扩展来实现类似 UIButton 的效果. 声明 欢迎转载,但请保留文章原始出处:) 博客园: ...

  3. ThinkPHP框架下,给jq动态添加的标签添加点击事件移除标签

    jq移除标签主要就是$("#要移除的id").remove();不再赘述,这里要提醒的是jq中动态添加标签后怎样添加点击事件.一般的jq添加点击事件是用这种方法$("#i ...

  4. 继承UIView的子控件添加点击事件

    UITapGestureRecognizer*tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:selfaction:@select ...

  5. 如何在UILable上添加点击事件?

    最近开始学习iOS开发,今天上来写第一个iOS笔记 昨天碰到一个需求,在UILable上添加点击事件,网上找了写资料,有人建议用透明的UIButton覆盖,有人建议写一个集成自UILable的类,扩展 ...

  6. jquery无法为动态生成的元素添加点击事件的解决方法

    遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...

  7. Qt:添加点击事件的Label并显示图片

    1.给label添加点击事件 Qt中原本的label是没有点击事件的,如果想添加点击事件的话,可以继承QLabel类并重载鼠标事件(比如mousePressedEvent),然后在鼠标事件中发送一个信 ...

  8. echarts对每个data[i]的图片添加点击事件

    1.综述:以饼图为例,只需要对echarts对象option添加以下几行代码即可 //添加点击事件(单击),还有其他鼠标事件和键盘事件等等 myChart1.on("click", ...

  9. C#给整个panel添加点击事件的方法

    首先要明白两点: panel直接添加点击事件无效 panel添加透明按钮覆盖无法实现 那么方法就是 在panel上添加pictureBox 设置 //充满整个panel pictureBox1.Doc ...

随机推荐

  1. VIM的姿势

    http://blog.csdn.net/vincent_czz/article/details/7900670 http://bbs.feng.com/read-htm-tid-7435912.ht ...

  2. javascript的propertyIsEnumerable()方法使用介绍

    hasOwnProperty() 方法用来判断某个对象是否含有指定的自身属性. propertyIsEnumerable()是用来检测属性是否属于某个对象的,如果检测到了,返回true,否则返回fal ...

  3. 利用Ramdisk为Firefox 加速

    用Firefox的人可能会羡慕Chrome的速度,但是又不舍得丢弃Firefox.Firefox的加速,可能通过一系列的方法,例如用fasterfox扩 展.但利用虚拟内存盘 Ramdisk ,将将内 ...

  4. MVC学习笔记一

    主要是为了复习昨天所学习到的MVC的基础内容,因为昨天还在申请博客,所以今天补上. 目前主要学习资料是<ASP.NET MVC4 Web 编程> 首先先来一个MVC请求的路径的流程说明. ...

  5. 自定义layout中需要重写的方法

    Layout类中,有3个方法是必定会被依次调用: prepareLayout: 准备所有view的layoutAttribute信息 collectionViewContentSize: 计算cont ...

  6. 几种常用的JS类定义方法(转)

    // 方法1 对象直接量 var obj1 = { v1 : "", get_v1 : function() { return this.v1; }, set_v1 : funct ...

  7. MySQL创建一个用户,指定一个数据库 授权

    Mysql 创建一个用户 hail,密码 hail,指定一个数据库 haildb 给 hail mysql -u root -ppassworduse mysql;insert into user(h ...

  8. Linux下用于查看系统当前登录用户信息的4种方法

    1. 使用w命令查看登录用户正在使用的进程信息 w命令用于显示已经登录系统的用户的名称,以及他们正在做的事.该命令所使用的信息来源于/var/run/utmp文件.w命令输出的信息包括: 用户名称 用 ...

  9. HighCharts日期及数值格式化

    1.函数原型   1 dateFormat(Stringformat,[Numbertime],[Booleancapitalize])::String 2.说明 格式化JavaScript 时间(也 ...

  10. django 初级(一) 配置与周边

    一.下载安装 从 https://www.djangoproject.com/download/ 下载最新的 django 版本,写本文时最新版本为 django 1.7,官方说只需要 python6 ...