// 路径配置
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. 谈谈我对PhoneGap的看法——(摘自唐巧的技术博客)

    源地址:http://blog.devtang.com/blog/2012/03/24/talk-about-uiwebview-and-phonegap/ 主题部分 我认为PhoneGap有以下3大 ...

  2. 数据库操作事务IsolationLevel 枚举

      成员名称 说明   Chaos 无法覆盖隔离级别更高的事务中的挂起的更改.   ReadCommitted 在正在读取数据时保持共享锁,以避免脏读,但是在事务结束之前可以更改数据,从而导致不可重复 ...

  3. centos 7.0 ssh 登陆

    CentOS 7.0 最小化安装 默认连接 默认端口是22 安装完查看IP 命令 ip addr ip: 192.168.1.103 自己家里练习的机子 都没改配置了 使用putty 远程连接 下载页 ...

  4. MySQL数据导出与导入

    工具 mysql mysqldump 应用举例 导出 导出全库备份到本地的目录 mysqldump -u$USER -p$PASSWD -h127.0.0.1 -P3306 --routines -- ...

  5. App Extension Today

     App Extensions 是iOS8新开放的扩展机制,之后不断增加功能.App Extension Programming Guide: Today   不喜欢废话,直接上干货!   一:重要概 ...

  6. JavaScript parseInt函数

    首先还是从很热门的实例parseInt("09")==0说起. parseInt(number,type)这个函数后面如果不跟第2个参数来表示进制的话,默认是10进制. 比如说pa ...

  7. 使程序在Linux下后台运行

    一.为什么要使程序在后台执行 我们计算的程序都是周期很长的,通常要几个小时甚至一个星期.我们用的环境是用putty远程连接到日本Linux服务器.所以使程序在后台跑有以下三个好处: 1:我们这边是否关 ...

  8. CF448C Painting Fence (分治递归)

    Codeforces Round #256 (Div. 2) C C. Painting Fence time limit per test 1 second memory limit per tes ...

  9. twoSum

    Given an array of integers, find two numbers such that they add up to a specific target number. The ...

  10. thinkPHP3.2.3集成swoole扩展

    swoole.php #!/bin/env php <?php /** * 默认时区定义 */ date_default_timezone_set('Asia/Shanghai'); /** * ...