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 ...
随机推荐
- Java排序算法——选择排序
import java.util.Arrays; //================================================= // File Name : Select_S ...
- RouteData
[备忘]ASP.NET MVC中RouteData.GetRequiredString("key")方法和RouteData.DataTokens["key"] ...
- JAVA 注解的几大作用及使用方法详解
JAVA 注解的几大作用及使用方法详解 (2013-01-22 15:13:04) 转载▼ 标签: java 注解 杂谈 分类: Java java 注解,从名字上看是注释,解释.但功能却不仅仅是注释 ...
- WinForm使用皮肤图文步骤
Winfrom本身样式提供的是Windows经典样式.. 不说多丑也绝称不上好看..有时为了用户体验就不得不需要想办法弄漂亮一点..皮肤包会是一个不错的选择.. 不废话了..开整.. 首先从网上下载免 ...
- canvas代替img渲染图片
移动端用canvas代替img渲染图片,可以提高性能 var oImg = new Image(); oImg.src = url; oImg.onload = function(){ var cvs ...
- Storm:最火的流式处理框架
伴随着信息科技日新月异的发展,信息呈现出爆发式的膨胀,人们获取信息的途径也更加多样.更加便捷,同时对于信息的时效性要求也越来越高.举个搜索场景中的例子,当一个卖家发布了一条宝贝信息时,他希望的当然是这 ...
- spring InitializingBean接口
最近工作需要得到sping中的每个事物需要执行的sql,称机会简单研究了一下spring的事务,项目中管理事务比较简单,用TransactionTemplate,就直接以TransactionTemp ...
- iOS-设置UIPageControl 显示图片
UIPageControl 的默认样式是几个小圆点,系统没有提供属性供我们自定义这几个小圆点的样式,不过我们依然可以使用KVC来自定义PageControl的显示样式 UIPageControl *p ...
- 本地自定义了404 和500 错误处理 部署到IIS上显示 服务器内部错误
问题如图 解决办法如下,在IIS上设置一下即可
- css1-css3的那些模糊点
css很重要, 但也不是万能的, 也不能抛弃dom 元素和 元素的属性!! 很多时候, dom "元素" 的 "属性" 也很重要 也很实用! 要结合属性来写 包 ...