ECharts 添加点击事件
2018-03-09 15:05
1681 查看
版权声明:本文为博主原创文章,未经博主允许不得转载。
由于工作需要,需要用echarts 进行展示图表,却又个新的需求,要点击展示的地方,同时下面出现table展示内容
如图所示:
一开始找了好多博客,发现都不好用,大部分都是用到了
其实是echats2中的。
echart所在的div增加事件(onmousedown = “mousedown()”)
2
3
写js方法,在tooltip中增加回调函数赋值(需要声明一个全局变量Xindex 来接收x轴点击的处的值)
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
官方对回调函数的介绍
鼠标事件中增加相应
2
3
4
5
6
7
8
现在我已经实现了,点击阴影区域任何一个点,改变下面的值。
如果你只想点击点来进行触发事件,则要更简单,在设置option 前面增加
2
3
4
5
希望可以帮助到大家!玩的开心!
由于工作需要,需要用echarts 进行展示图表,却又个新的需求,要点击展示的地方,同时下面出现table展示内容
如图所示:
一开始找了好多博客,发现都不好用,大部分都是用到了
var ecConfig = require('echarts/config');
其实是echats2中的。
实现步骤:
echart所在的div增加事件(onmousedown = “mousedown()”)<div class="chart swiper-slide"> <div id="main" onmousedown = "mousedown()"></div> </div>1
2
3
写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; } },1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
官方对回调函数的介绍
鼠标事件中增加相应
mousedown:function(){ console.log(Xindex); //TODO },1
2
3
4
5
6
7
8
现在我已经实现了,点击阴影区域任何一个点,改变下面的值。
如果你只想点击点来进行触发事件,则要更简单,在设置option 前面增加
myChart.on('click', function (params) { //TODO });1
2
3
4
5
希望可以帮助到大家!玩的开心!
相关文章推荐
- echarts饼图扇区添加点击事件的实例
- echarts图表文字显示问题,给图表添加点击事件
- ECharts 给X轴文字添加点击事件
- ECharts3.0如何给X轴中显示的文字添加点击事件!
- echarts添加点击事件
- echarts添加点击事件
- ECharts 添加点击事件
- 给ECharts添加右键点击事件,实现右键功能菜单
- echarts 柱状图 如何添加点击事件
- Struts2 树形标签添加点击事件和取得ID的方法
- ehcarts之图标添加点击事件
- 图片轮播添加点击事件遇到的问题
- 富文本添加颜色大小及点击事件,防止最后一句断行显示。
- QT用信号和处理机制为事件添加处理动作(点击按钮显示helloworld)
- iOS7开发:为UIImageView添加点击事件
- ext Window点击右上角关闭(X按钮)添加监听事件
- Flash制作网页广告的并添加点击统计事件
- 为按钮添加点击事件的三种方式
- UINavigationController的title添加点击事件并nsstring转nsdictionary
- 给android的LinearLayout添加点击事件