实例页面: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绑定点击事件的更多相关文章

  1. jQuery实现当按下回车键时绑定点击事件

    jQuery实现当按下回车键时绑定点击事件 <script> $(function(){ $(document).keydown(function(event){ if(event.key ...

  2. (转载)js(jquery)的on绑定点击事件执行两次的解决办法

    js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...

  3. 通过jQuery给<li>绑定点击事件

    背景:有个需求需要js中实现li标签的事件绑定,li通过在ajax请求中动态添加,按照常理,使用jQuery,可以使用以下方法绑定点击事件: $(function(){  commonAjaxCall ...

  4. a标签绑定点击事件失败

    如图 然后对a标签绑定点击事件  无效 换成span标签可以

  5. JQuery 动态加载 HTML 元素时绑定点击事件无效问题

    问题描述 假设项目中有一个列表页面,如下: 当点击列表一行数据可以显示详情页面,而详情页面的数据是根据当前行的数据作为参数,通过 ajax 请求到后台返回的数据,再根据返回的结果动态生成 html 页 ...

  6. Angularjs 中使用指令绑定点击事件

    项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的. 如html <ul id="main-menu"> ...

  7. jq回车触发绑定点击事件

    //jq绑定回车事件触发点击事件<script> $(function(){ $(document).keyup(function(event){ if(event.keyCode ==1 ...

  8. html A标签 绑定点击事件。跳转页面。处理

    在平时的页面中,肯定有需要点击A标签 进行处理. 这时候习惯性的绑定一个点击事件进行数据处理. 在A标签中 herf="#" 然后绑定一个点击事件. 或者在A标签里面的元素里面有一 ...

  9. iOS小技巧 - 如何使UIView可以绑定点击事件

    让我们这次直接进入正题,有时候我们想做以下这种界面: 目前我就想到三种方案: 做一个tableview,然后组织cell的界面如上图所示 做一个button子类,使得button的界面能如上图所示 做 ...

随机推荐

  1. jquery操作复选框(checkbox)十二技巧

    jquery操作复选框(checkbox)的12个小技巧. 1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$( ...

  2. U盘 格式化 ext3 ext4

    [root@ok Desktop]# mkfs.ext3 /dev/sdc mke2fs 1.41.12 (17-May-2010) /dev/sdc is entire device, not ju ...

  3. 一款基于jQuery的超酷动画幻灯片

    今天给大家带来一款仿步步高vivo手机网站的一款首页焦点幻灯展示特效,带有超酷炫的动画特效,动态效果丝毫不逊色于flash动画,具有很强的视觉冲击力,推荐下载学习! 提示:兼容360.FireFox. ...

  4. java POi excel 写入大批量数据

    直接贴代码: package jp.co.misumi.mdm.batch.common.jobrunner; import java.io.File; import java.io.FileNotF ...

  5. C语言 · 最大乘积

      算法提高 最大乘积   时间限制:1.0s   内存限制:512.0MB      问题描述 对于n个数,从中取出m个数,如何取使得这m个数的乘积最大呢? 输入格式 第一行一个数表示数据组数 每组 ...

  6. springMVC介绍

    http://www.iteye.com/blogs/subjects/springMVC —————————————————————————————————————————————————————— ...

  7. chrome显示小于12号字体的方法

    我现在做一个支持英文的网站,但是字体要设置小于12号字体,我百度方法是-webkit-text-size-adjust:none;  但是谷歌为什么不支持啊,  有没有解决办法 让谷歌浏览器 支持小于 ...

  8. josn 格式 解析

    格式为:{"lng":113.534634,"lat":22.274308} 解析步骤如下: <?php $a=json_decode($goods_in ...

  9. C++ 运算符重载四(自定义数组类)

    //自定义数组类 #include<iostream> using namespace std; //分析:能获取数组长度,添加元素,删除元素,修改元素 //要求重载[],=,==,!=运 ...

  10. spark 系列文章汇总

    源码导读 spark 源码导读1 从spark启动脚本开始 spark 源码导读2 进一步窥探Master.Worker启动及通信机制 spark 源码导读3 进一步理解脚本调用关系 spark 源码 ...