模拟点击触发 echarts 的 click 事件
2023-09-11 14:16:38 时间
手动触发 echarts 点击事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script> <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script> <style> .box { position: absolute; left: 0; top: 0; background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%); opacity: .5; } </style> </head> <body> <div id="app" style="width: 600px; height:400px;"></div> <div class='box' style="width: 600px; height:400px;"></div> </body> <script> const myChart = echarts.init(document.getElementById('app')) const option = { series: [{ type: 'pie', radius: [25, 95], center: ['50%', 140], roseType: 'area', clockWise: false, itemStyle: { normal: { label: { formatter: ['{b}', '占比{d}%'].join('\n'), textStyle: { color: '#000', fontSize: 16 } }, } }, data: [ { value: 5, name: '其他类' }, { value: 10, name: '就业保障类' }, { value: 15, name: '城市建设类' }, { value: 25, name: '民政救济类' }, { value: 20, name: '市场监管类' }, { value: 35, name: '市容城管类' }, { value: 30, name: '公共安全类' }, { value: 40, name: '公安消防类' } ] }] } myChart.setOption(option) myChart.on('click', function (e) { alert('触发点击事件') console.log(20211112141957, e) }) ////////////////////// // 模拟点击 - 核心代码 // ////////////////////// document.querySelector('.box').addEventListener('click', e => { const evmousedown = document.createEvent('HTMLEvents') evmousedown.initEvent('mousedown', false, true) const evmouseup = document.createEvent('HTMLEvents') evmouseup.initEvent('mouseup', false, true) const evmouseclick = document.createEvent('HTMLEvents') evmouseclick.initEvent('click', false, true) for(const key in event) { try { evmouseclick[key] = event[key] evmousedown[key] = event[key] evmouseup[key] = event[key] } catch (err) { /* event 对象中部分属性是只读,忽略即可 */ } } // 事件触发的容器,即不是 #app 也不是 canvas,而是中间这个 div const container = myChart._dom.firstElementChild container.dispatchEvent(evmousedown) container.dispatchEvent(evmouseup) container.dispatchEvent(evmouseclick) }) </script> </html>
事件触发的容器,即不是 #app 也不是 canvas,而是中间这个 div![](https://img2020.cnblogs.com/blog/922445/202111/922445-20211112152604634-802926847.png)
相关文章
- 程序员的量化交易之路(5)--Esper之Map事件(4)
- a标签绑定事件
- Java GUI 键盘事件
- “全”事件触发:阿里云函数计算与事件总线产品完成全面深度集成
- js响应鼠标滚轮事件
- javascript获取事件源
- kbone 高级 - 事件系统
- Google 和 Facebook 如何大规模处理 IT 事件管理 —— 2016 SRE 大会之我见
- Qt事件的接受和忽略
- Threejs 的场景查看 - 几个交互事件库助你方便查看场景
- Android页面事件挂接模拟
- Android 使用 sendevent 模拟鼠标和键盘事件
- .NET委托,事件和Lambda表达式
- Android红外功能模拟触摸鼠标事件唤醒屏幕
- 通过jquery库扩展移动端‘长按触发’事件(模拟浏览器‘长按识别二维码’功能)