ECharts 支持常规的鼠标事件类型,包括 'click'、'dblclick'、'mousedown'、'mousemove'、
'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu' 事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。
 <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts-en.common.js"></script> //引入在线
</head>
<body>
<div id="demo1" style="width: 600px; height:400px"> </div>
</body> <script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var demo1 = echarts.init(document.getElementById('demo1')); // 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}; // 使用刚指定的配置项和数据显示图表。
demo1.setOption(option); //注册事件
demo1.on('click', function (params) {
//params包含很多的信息 下标索引 如横坐标名称 对应的值
console.log("click",params);
}); //ECharts 支持常规的鼠标事件类型,包括 'click'、'dblclick'、'mousedown'、'mousemove'、
// 'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu' 事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。 </script>

echarts-中的事件-- demo1.on('事件类型', function (params) {}的更多相关文章

  1. ECharts 中的事件和行为

    在 ECharts 的图表中用户的操作将会触发相应的事件.开发者可以监听这些事件,然后通过回调函数做相应的处理,比如跳转到一个地址,或者弹出对话框,或者做数据下钻等等. 如下是一个绑定点击操作的示例. ...

  2. 在 SharePoint Server 2013 中配置建议和使用率事件类型

    http://technet.microsoft.com/zh-cn/library/jj715889.aspx 适用于: SharePoint Server 2013 利用使用事件,您可以跟踪用户与 ...

  3. Javascript中的事件对象和事件类型

    接上次看JS的事件冒泡和捕获,所以顺带就把事件相关的知识都看完好了 而且想到一个好的学习方法,第一天自己看,第二天把前一天学习的东西写下来,一方面可以当复习,一方面当重新整理并且分享 事件对象 事件处 ...

  4. js中的事件委托或是事件代理详解

    起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...

  5. JS 中的事件绑定、事件监听、事件委托

    事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有 ...

  6. denounce函数:Javascript中如何应对高频触发事件

    在DOM Event的世界中,以scroll.resize.mouseover等为代表的高频触发事件显得有些与众不同.通常,DOM事件只有在明确的时间点才会被触发,比如被点击,比如XMLHttpReq ...

  7. [原创]java WEB学习笔记48:其他的Servlet 监听器:域对象中属性的变更的事件监听器 (3 个),感知 Session 绑定的事件监听器(2个)

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  8. js中冒泡事件和捕获事件

    js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获 ...

  9. ASP.NET中定制自己的委托和事件参数类

    本文笔记选自<庖丁解牛:纵向切入ASP.NET 3.5控件和组件开发技术>一书 一般在实际开发中,对于事件不需要传递数据信息时,像上面的KingTextBox控件的事件,在引发事件时传递的 ...

随机推荐

  1. 实例透彻分析CMS垃圾收集器执行过程

    CMS收集器收集步骤: 在上一次[https://www.cnblogs.com/webor2006/p/11055468.html]中已经对CMS的垃圾收集器有了一定的理论上的了解,其中提到了CMS ...

  2. C# WF 第12节 Timer控件

    本节内容: 1:Timer控件的简介 2:实例1  : 不停的弹出,恶意exe 3:实例2: :流水灯 4:实例3:给流水灯加上计时器和在规定的时间进行播放音乐 1:Timer控件的简介 2:实例1 ...

  3. java中的字符串二

    public class TestString { public static void main(String[] args) { // TODO Auto-generated method stu ...

  4. 用pip命令把python包安装到指定目录

    sudo pip install transforms3d --target=/usr/local/lib/python2.7/site-packages pip install transforms ...

  5. 用Node.js给邮箱发送邮件

    首先我们需要做的是下载发送邮件的包 cnpm install nodemailer --save 然后写发送邮件的代码,代码如下: 实现原理是:用你的邮箱给其他邮箱发送邮件,所以这里需要填写你的邮箱和 ...

  6. CF 938G Shortest Path Queries

    又到了喜闻乐见的写博客清醒时间了233,今天做的依然是线段树分治 这题算是经典应用了吧,假的动态图(可离线)问题 首先不难想到对于询问的时间进行线段树分治,这样就可以把每一条边出现的时间区间扔进线段树 ...

  7. [算法模版]Prim-完全图最小生成树

    [算法模版]Prim-完全图最小生成树 众所周知,对于常用的Kruskal算法,算法复杂度为\(O(m \log m)\).这在大多数场景下已经够用了.但是如果遇到及其稠密的完全图,Prim算法就能更 ...

  8. oracle导入Excel表文本数据

    首先导Excel表数据要先建和Excel表字段对应的表,然后将Excel表另存为Txt文本, 然后在Plsql客户端点击工具->文本导入器 然后这里要选择用户及其表,点击导入数据就可以

  9. Ubuntu18.04下修改快捷键

    Ubuntu下修改快捷键 Intelij Idea在Ubuntu下的快捷键几乎和windows差不多,最常用的一个快捷键与系统冲突: Ctrl + Alt + T idea是surround with ...

  10. redis的3种过期键删除策略

    Redis的过期键的过期时间都保存在过期字典中,过期键的删除策略有三种,分别是定时删除.惰性删除和定期删除. 定时删除 定时删除策略,是指在设置键的过期时间的同时,创建一个定时器,让定时器在键的过期时 ...