echart字符云之添加点击事件
// 路径配置
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字符云之添加点击事件的更多相关文章
- iOS开发小技巧 - label中的文字添加点击事件
Label中的文字添加点击事件 GitHub地址:https://github.com/lyb5834/YBAttributeTextTapAction 以前老师讲过类似的功能,自己懒得回头看了,找了 ...
- 【Swift 2.1】为 UIView 添加点击事件和点击效果
前言 UIView 不像 UIButton 加了点击事件就会有点击效果,体验要差不少,这里分别通过自定义和扩展来实现类似 UIButton 的效果. 声明 欢迎转载,但请保留文章原始出处:) 博客园: ...
- ThinkPHP框架下,给jq动态添加的标签添加点击事件移除标签
jq移除标签主要就是$("#要移除的id").remove();不再赘述,这里要提醒的是jq中动态添加标签后怎样添加点击事件.一般的jq添加点击事件是用这种方法$("#i ...
- 继承UIView的子控件添加点击事件
UITapGestureRecognizer*tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:selfaction:@select ...
- 如何在UILable上添加点击事件?
最近开始学习iOS开发,今天上来写第一个iOS笔记 昨天碰到一个需求,在UILable上添加点击事件,网上找了写资料,有人建议用透明的UIButton覆盖,有人建议写一个集成自UILable的类,扩展 ...
- jquery无法为动态生成的元素添加点击事件的解决方法
遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...
- Qt:添加点击事件的Label并显示图片
1.给label添加点击事件 Qt中原本的label是没有点击事件的,如果想添加点击事件的话,可以继承QLabel类并重载鼠标事件(比如mousePressedEvent),然后在鼠标事件中发送一个信 ...
- echarts对每个data[i]的图片添加点击事件
1.综述:以饼图为例,只需要对echarts对象option添加以下几行代码即可 //添加点击事件(单击),还有其他鼠标事件和键盘事件等等 myChart1.on("click", ...
- C#给整个panel添加点击事件的方法
首先要明白两点: panel直接添加点击事件无效 panel添加透明按钮覆盖无法实现 那么方法就是 在panel上添加pictureBox 设置 //充满整个panel pictureBox1.Doc ...
随机推荐
- Linux学习笔记(一)2015.4.13
研究生由单片机转Linux学习 首先安装VMware虚拟机,用的是VMware 10.0 在VMware 10.0上安装视频上推荐的Red Hat Linux 5 安装后正式进入Linux学习 笔记1 ...
- HDU 1010 Tempter of the Bone(DFS+奇偶剪枝)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1010 题目大意: 输入 n m t,生成 n*m 矩阵,矩阵元素由 ‘.’ 'S' 'D' 'X' 四 ...
- 当SVN服务器端IP地址发生变化时,客户端重新定位
第一种方法: 重新设置URL: 第二种方法: 找到客户端数据库文件 ,在隐藏的文件夹.svn中,找到文件夹中的文件 *.db文件 ,用SQLite打开,修改表Repository中的数据
- C语言getopt()函数的使用
getopt(分析命令行参数) 相关函数表头文件 #include<unistd.h>定义函数 int getopt(int argc,char * ...
- Struts2中ModelDriven的陷阱及其预防
页面表单 <form action="updateInput.action" method="post"> <input type=" ...
- Java8初体验(二)Stream语法详解
感谢同事[天锦]的投稿.投稿请联系 tengfei@ifeve.com 上篇文章Java8初体验(一)lambda表达式语法比 较详细的介绍了lambda表达式的方方面面,细心的读者会发现那篇文章的例 ...
- jQuery EasyUI API 中文文档 - ComboGrid 组合表格
jQuery EasyUI API 中文文档 - ComboGrid 组合表格,需要的朋友可以参考下. 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults ...
- Checkstyle 简介 以及各版本下载地址
CheckStyle是SourceForge下的一个项目,提供了一个帮助JAVA开发人员遵守某些编码规范的工具.它能够自动化代码规范检查过程,从而使得开发人员从这项重要,但是枯燥的任务中解脱出来. C ...
- C#技术漫谈之垃圾回收机制(GC)(转)
GC的前世与今生 虽然本文是以.NET作为目标来讲述GC,但是GC的概念并非才诞生不久.早在1958年,由鼎鼎大名的图林奖得主John McCarthy所实现的Lisp语言就已经提供了GC的功能,这是 ...
- 单例模式singleton
在进行开发的时候,我们在有些情形下有些对象我们只需要一个.例如:配置文件.工具类.线程池.缓存.日志对象等. 如何保证我们的对象只有一个呢?我们可以通过单例来实现. 常用的单例有两种:饿汉模式和懒汉模 ...