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 ...
随机推荐
- 仿照jquery封装一个自己的js库(一)
所谓造轮子的好处就是复习知识点,加深对原版jquery的理解. 本文系笔者学习jquery的笔记,记述一个名为"dQuery"的初级版和缩水版jquery库的实现.主要涉及知识点包 ...
- ecshop变量介绍
获得商品的信息,get_goods_info($goods_id) 获取前10销量排名,get_top10()
- Quagga服务器安装和配置
使用本地源 一.安装软件包 # yum install quagga-0.99.15-7.el6_3.2.x86_64.rpm 或rpm # ls /etc/quagga/ bgpd.conf.s ...
- netstat--查看服务器[有效]连接数--统计端口并发数--access.log分析
简介 Netstat 命令用于显示各种网络相关信息,如网络连接,路由表,接口状态 (Interface Statistics),masquerade 连接,多播成员 (Multicast Member ...
- awk操作数组注意几点
awk的数组跟其他程序设计语言的数组有所不同:1.可以直接在awk中定义数组:2.数组元素的初始值为0或空字符串,除非他们被显示的指定初始化:3.数组可以自动扩展:4.都是关联数组,数字下标也会转成字 ...
- Python之路【第四篇】:模块
什么是模块: 模块就是一个功能的集合. 模块就和乐高积木差不多,你用这些模块组合出一个模型,然后也可以用这个模块加上其他的模块组合成一个新的模型 模块的种类: 1.内置模块(python自带的比如os ...
- PHP中的NULL类型
特殊的NULL值表示一个变量没有值,NULL类型唯一的值就是NULL.我们需要注意的是NULL不表示空格,也不表示零,也不是空字符串,而是一个变量的值为空.NULL不区分大小写,在下列情况下一个变量被 ...
- linux下生成core dump文件方法及设置
linux下生成core dump文件方法及设置 from:http://www.cppblog.com/kongque/archive/2011/03/07/141262.html core ...
- git log --stat常用命令
1,显示被修改文件的修改统计信息,添加或删除了多少行. git log --stat 2,显示最近两条的修改 git log --stat -2 3,显示具体的修改 git log -p -2 4, ...
- caller和callee
我们先来看下caller. caller:返回一个对函数(该函数调用了当前函数)的引用. functionName.caller:functionName对象是所执行函数的名称. 说明 对于函数来说, ...