echart绑定点击事件
实例页面:http://echarts.baidu.com/echarts2/doc/example/event.html
option = {
tooltip : {
trigger: 'axis'
},
legend: {
data:['最高','最低']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {readOnly:false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
dataZoom : {
show : true,
realtime : true,
start : 40,
end : 60
},
xAxis : [
{
type : 'category',
boundaryGap : true,
data : function (){
var list = [];
for (var i = 1; i <= 30; i++) {
list.push('2013-03-' + i);
}
return list;
}()
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'最高',
type:'line',
data:function (){
var list = [];
for (var i = 1; i <= 30; i++) {
list.push(Math.round(Math.random()* 30) + 30);
}
return list;
}()
},
{
name:'最低',
type:'bar',
data:function (){
var list = [];
for (var i = 1; i <= 30; i++) {
list.push(Math.round(Math.random()* 10));
}
return list;
}()
}
]
};
var ecConfig = require('echarts/config');
function eConsole(param) {
var mes = '【' + param.type + '】';
if (typeof param.seriesIndex != 'undefined') {
mes += ' seriesIndex : ' + param.seriesIndex;
mes += ' dataIndex : ' + param.dataIndex;
}
if (param.type == 'hover') {
document.getElementById('hover-console').innerHTML = 'Event Console : ' + mes;
}
else {
document.getElementById('console').innerHTML = mes;
}
console.log(param);
}
/*
// -------全局通用
REFRESH: 'refresh',
RESTORE: 'restore',
RESIZE: 'resize',
CLICK: 'click',
DBLCLICK: 'dblclick',
HOVER: 'hover',
MOUSEOUT: 'mouseout',
// -------业务交互逻辑
DATA_CHANGED: 'dataChanged',
DATA_ZOOM: 'dataZoom',
DATA_RANGE: 'dataRange',
DATA_RANGE_HOVERLINK: 'dataRangeHoverLink',
LEGEND_SELECTED: 'legendSelected',
LEGEND_HOVERLINK: 'legendHoverLink',
MAP_SELECTED: 'mapSelected',
PIE_SELECTED: 'pieSelected',
MAGIC_TYPE_CHANGED: 'magicTypeChanged',
DATA_VIEW_CHANGED: 'dataViewChanged',
TIMELINE_CHANGED: 'timelineChanged',
MAP_ROAM: 'mapRoam',
*/
myChart.on(ecConfig.EVENT.CLICK, eConsole);
myChart.on(ecConfig.EVENT.DBLCLICK, eConsole);
//myChart.on(ecConfig.EVENT.HOVER, eConsole);
myChart.on(ecConfig.EVENT.DATA_ZOOM, eConsole);
myChart.on(ecConfig.EVENT.LEGEND_SELECTED, eConsole);
myChart.on(ecConfig.EVENT.MAGIC_TYPE_CHANGED, eConsole);
myChart.on(ecConfig.EVENT.DATA_VIEW_CHANGED, eConsole);
echart绑定点击事件的更多相关文章
- jQuery实现当按下回车键时绑定点击事件
jQuery实现当按下回车键时绑定点击事件 <script> $(function(){ $(document).keydown(function(event){ if(event.key ...
- (转载)js(jquery)的on绑定点击事件执行两次的解决办法
js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...
- 通过jQuery给<li>绑定点击事件
背景:有个需求需要js中实现li标签的事件绑定,li通过在ajax请求中动态添加,按照常理,使用jQuery,可以使用以下方法绑定点击事件: $(function(){ commonAjaxCall ...
- a标签绑定点击事件失败
如图 然后对a标签绑定点击事件 无效 换成span标签可以
- JQuery 动态加载 HTML 元素时绑定点击事件无效问题
问题描述 假设项目中有一个列表页面,如下: 当点击列表一行数据可以显示详情页面,而详情页面的数据是根据当前行的数据作为参数,通过 ajax 请求到后台返回的数据,再根据返回的结果动态生成 html 页 ...
- Angularjs 中使用指令绑定点击事件
项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的. 如html <ul id="main-menu"> ...
- jq回车触发绑定点击事件
//jq绑定回车事件触发点击事件<script> $(function(){ $(document).keyup(function(event){ if(event.keyCode ==1 ...
- html A标签 绑定点击事件。跳转页面。处理
在平时的页面中,肯定有需要点击A标签 进行处理. 这时候习惯性的绑定一个点击事件进行数据处理. 在A标签中 herf="#" 然后绑定一个点击事件. 或者在A标签里面的元素里面有一 ...
- iOS小技巧 - 如何使UIView可以绑定点击事件
让我们这次直接进入正题,有时候我们想做以下这种界面: 目前我就想到三种方案: 做一个tableview,然后组织cell的界面如上图所示 做一个button子类,使得button的界面能如上图所示 做 ...
随机推荐
- 如何隐藏你的 Linux 的命令行历史
如果你是 Linux 命令行的用户,有的时候你可能不希望某些命令记录在你的命令行历史中.原因可能很多,例如,你在公司担任某个职位,你有一些不希望被其它人滥用的特权.亦或者有些特别重要的命令,你不希望在 ...
- 跟着百度学PHP[9]-session与cookie的异同
COOKIE cookie是将数据存储在客户端中,以此建立客户端与服务器之间的联系,但是cookie任然有一些局限性: 1.cookie相对不是很安全,容易被盗用导致cookie欺骗. 2.单个的co ...
- Oracle复习(有记录才能沉淀.......)
一.Oracle准备工作 1.安装Oracle Oracle数据库产品是免费的,我们可以从Oracle的官方网站(http://www.oracle.com)下载到程序安装包,Oracle在Windo ...
- C# 注册表修改 立即生效 [转]
修改注册表后不重启计算机边生效. const int WM_SETTINGCHANGE = 0x001A; const int HWND_BROADCAST = 0xffff; IntPtr resu ...
- 未能加载文件或程序集“Autofac, Version=3.4.0.0,
遇到这个错误的时候:如下图 未能加载文件或程序集“Autofac, Version=3.4.0.0, Culture=neutral, PublicKeyToken=17863af14b0044da” ...
- am335x 打开内部 RTC
AM335X 打开内部 RTC 过程记录. kernel version: 3.2.0 先在 make menuconfig 里面打开内部RTC的配置: make menuconfig Device ...
- hdu6121 Build a tree 模拟
/** 题目:hdu6121 Build a tree 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6121 题意:n个点标号为0~n-1:节点i的父节点 ...
- [工具使用] 如何访问github
1.ping github.com,记录github的ip:192.30.252.129 2.找到系统的 hosts文件位置: C:\Windows\System32\drivers\etc\host ...
- ubuntu14.04中安装jdk
1. 下载JDK http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 将下载的 .g ...
- 第二百四十八节,Bootstrap轮播插件
Bootstrap轮播插件 学习要点: 1.轮播插件 本节课我们主要学习一下 Bootstrap 中的轮播插件. 一.轮播 轮播插件就是将几张同等大小的大图,按照顺序依次播放. 基本实例. 第一步,给 ...