ECharts 添加点击事件
来源:互联网 发布:优化教育结构 编辑:程序博客网 时间:2024/06/06 18:19
由于工作需要,需要用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 });
希望可以帮助到大家!玩的开心!
阅读全文
5 0
- echarts添加点击事件
- ECharts 添加点击事件
- echarts 柱状图 如何添加点击事件
- Echarts柱状图在label上添加点击事件
- ECharts 给X轴文字添加点击事件
- Angular2组件与Echarts饼状图交互之添加点击事件
- echarts图表文字显示问题,给图表添加点击事件
- echarts 点击事件
- Echarts柱状图的点击事件
- echarts饼图点击事件
- Echarts折线图点击事件
- echarts重写图例点击事件
- echarts 节点添加绑定事件
- Echarts饼图、柱状图、折线图(pie、bar、line)添加点击事件
- ECharts重写鼠标右键点击事件
- ECharts 点击事件的 param参数
- 【echarts】绘制带有点击事件的图表
- UIView 添加点击事件
- hdu 5446 lucas + 中国剩余定理 + 快速乘 (快速乘板子,中国剩余定理板子,lucas最新板子)
- spring事务管理方式
- 剑指Offer----合并两个排序的链表
- Java自己实现HTTP服务器来理解GET和POST区别
- ThreadPoolExecutor参数设置
- ECharts 添加点击事件
- 基于VC++的WinCE网络通信
- iOS 系统富文本
- python语言的类型
- SVN database is locked
- Linux与系统
- Python爬取数据的注意事项
- 排序算法之再总结
- context.Database.SqlQuery<>()查询