echarts添加点击事件
2024-08-25 19:48:59
由于工作需要,需要用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
});
希望可以帮助到大家!玩的开心!
最新文章
- track by
- Java for LeetCode 212 Word Search II
- Struts2 标签库讲解
- WEB 开发工具分享
- hdu 1853 最小费用流好题 环的问题
- 微信公众号token验证失败的一些总结
- jmeter命令行运行-分布式测试
- Hibernate Tools
- mytop
- ios 字体设计
- javaMybatis映射属性,高级映射
- C++/C高质量编程指南-笔记
- mpvue小程序开发之 iconfont图标引入
- Glide图片加载框架小bug
- 【爬坑】远程连接 MySQL 失败
- element table 二次封装 父子组件传值 组件通信
- python 前后端分离 简单的数据库返回接口
- 背水一战 Windows 10 (80) - 本地化
- 您真的会修改Active Directory域控制器计算机名称吗
- scala+hadoop+spark环境搭建