由于工作需要,需要用echarts 进行展示图表,却又个新的需求,要点击展示的地方,同时下面出现table展示内容

如图所示:

一开始找了好多博客,发现都不好用,大部分都是用到了

var ecConfig = require('echarts/config');

其实是echats2中的。

实现步骤:

  • echart所在的div增加事件(onmousedown = "mousedown()")
					<div class="chart swiper-slide">
<div id="main" onmousedown = "mousedown()"></div>
</div>
  • 写js方法,在tooltip中增加回调函数赋值(需要声明一个全局变量Xindex 来接收x轴点击的处的值)
tooltip : {
trigger : 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
formatter:function(params){
var html = '';
if(params.length>0){
Xindex = params[0].dataIndex;
for ( var int = 0; int < params.length; int++) {
html+=params[int].seriesName+':'+params[int].data+'<br>';
}
}
return html; } },

官方对回调函数的介绍

  • 鼠标事件中增加相应
			mousedown:function(){

			    	console.log(Xindex);
//TODO },

现在我已经实现了,点击阴影区域任何一个点,改变下面的值。

如果你只想点击点来进行触发事件,则要更简单,在设置option 前面增加

					myChart.on('click', function (params) {

                  //TODO

					});

希望可以帮助到大家!玩的开心!

echarts添加点击事件的更多相关文章

  1. echarts对每个data[i]的图片添加点击事件

    1.综述:以饼图为例,只需要对echarts对象option添加以下几行代码即可 //添加点击事件(单击),还有其他鼠标事件和键盘事件等等 myChart1.on("click", ...

  2. ECharts问题--散点图中对散点添加点击事件

    1. 我们这次就没有先讲解怎么使用散点图了,这个跟之前的一些图还是很类似的,不会的可以去官网上面查看 API 使用.我们这次讲解的是为散点图中的散点添加点击事件,然后在图表之外的一个 div 里面显示 ...

  3. echart字符云之添加点击事件

    // 路径配置 require.config({ paths : { echarts : 'jquery/echarts-2.2.7/build/dist' } }); // 使用EChart.js画 ...

  4. iOS开发小技巧 - label中的文字添加点击事件

    Label中的文字添加点击事件 GitHub地址:https://github.com/lyb5834/YBAttributeTextTapAction 以前老师讲过类似的功能,自己懒得回头看了,找了 ...

  5. 【Swift 2.1】为 UIView 添加点击事件和点击效果

    前言 UIView 不像 UIButton 加了点击事件就会有点击效果,体验要差不少,这里分别通过自定义和扩展来实现类似 UIButton 的效果. 声明 欢迎转载,但请保留文章原始出处:) 博客园: ...

  6. ThinkPHP框架下,给jq动态添加的标签添加点击事件移除标签

    jq移除标签主要就是$("#要移除的id").remove();不再赘述,这里要提醒的是jq中动态添加标签后怎样添加点击事件.一般的jq添加点击事件是用这种方法$("#i ...

  7. 继承UIView的子控件添加点击事件

    UITapGestureRecognizer*tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:selfaction:@select ...

  8. 如何在UILable上添加点击事件?

    最近开始学习iOS开发,今天上来写第一个iOS笔记 昨天碰到一个需求,在UILable上添加点击事件,网上找了写资料,有人建议用透明的UIButton覆盖,有人建议写一个集成自UILable的类,扩展 ...

  9. jquery无法为动态生成的元素添加点击事件的解决方法

    遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...

随机推荐

  1. 关于iphone点击readonly的input虚拟键盘不消失的情况

    今天遇到了一个比较棘手的问题,事情是这样的: 咱有一个添加地址的页面,大概长这样: 收货地址后那个"请选择收货地址"是一个readonly的input, 咱一进页面,直接点击这个& ...

  2. vue初学实践之路——vue简单日历组件(1)

    ---恢复内容开始--- 最近做的项目有一个需求,需要有一个日历组件供预定功能使用,之前的代码过于繁琐复杂,所以我采用vue重写了这个组件. npm.vue等等安装. 只是一个简单的日历组件,所以并不 ...

  3. centos5.5下mangodb启动报错glibc

    mangodb启动报错glibc找不到(centos5.5) 报错形式 [root@test-172-16-0-139-ip mongodb-server]# /data/mongodb-server ...

  4. PHP代理访问网络资源

    第一种:使用DOMDocument  <? PHP $doc = new \DOMDocument(); $opts = array(     'http' => array(       ...

  5. Perl正则表达式例子

    Perl正则表达式 一.介绍 正则表达式各语言都有自己的规范,但是基本都差不多,都是由元字符的组合来进行匹配:由于Nmap内嵌的服务与版本探测是使用的Perl正则规范,因此此篇博客记录一下Perl正则 ...

  6. ex2:逻辑回归及正则条件下的练习

    EX2 逻辑回归练习 ​ 假设你是一个大学某系的管理员,你想根据两项考试结果来确定每个申请人的录取机会.你有以前申请人的历史资料以作为逻辑回归的训练集.对于每一个训练集,你拥有每个申请人的两项考试的分 ...

  7. jsp传到java的control层的方法

    jsp传到java的control层的方法1.form表单 用<input type="submit">提交,提交到后台的参数在form表单内<form meth ...

  8. html中p标签行间距的问题

    使用CSS行高样式line-height可以设置调整p行间距,但是同时会影响每行文字间的上下间距,所以使用line-height虽然可以用来设置html p 行距离间隔,但是不是很实用,一般line- ...

  9. java 单链表的实现

    package liaobiao;//链表测试public class Node { private int value; private Node next; //存放下一个节点的指针 //构造方法 ...

  10. ASP.NET MVC Bundling and RequireJS

    关于ASP.NET MVC Bundling and RequireJS的取舍问题,最近比较困惑,我希望有一种方式可以结合两者的优点.作为.NET程序员,难道你没有过这方面的困惑吗? 因为我感觉各自都 ...