echarts添加点击事件
2017-07-30 10:03
393 查看
由于工作需要,需要用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图表文字显示问题,给图表添加点击事件
- ECharts3.0如何给X轴中显示的文字添加点击事件!
- echarts添加点击事件
- ECharts 添加点击事件
- 给ECharts添加右键点击事件,实现右键功能菜单
- echarts饼图扇区添加点击事件的实例
- ECharts 添加点击事件
- ECharts 给X轴文字添加点击事件
- echarts 柱状图 如何添加点击事件
- ECharts 在同一个页面添加多个图表 并 给图表绑定事件
- JS为循环动态生成的节点添加点击事件
- textField可以添加点击事件监听器
- 给UIimageView添加UITapGestureRecognizer手势点击事件
- 将字符串中的电话号码标记并添加点击事件(SpannableString)
- ListView里面添加Button之类可点击事件Item不可点击的处理方法
- android 给选中的文字添加点击事件和修改audoLink 的超链接样式
- 为RecyclerView添加item的点击事件
- js动态添加点击事件
- 百度地图:为标记添加点击事件显示标注
- android——给ListView添加点击事件的三种方式