一、需求分析
每次实现各种图表时，总会用到echarts，不得不说确实是一个非常好用的开源库。不过由于需要，这次的需要实现的效果如下：
1.实现一个梯形图（每个数据组对应一个梯形）；
2.自定义echarts的右键功能，增加选项可以直接对数据项进行额外的操作；
二、思路及实现
2.1 自定义echarts的鼠标右键事件
我们知道一般在浏览器中鼠标右键点击都有自定义的事件
讯享网
那么就需要阻止原本的右键事件发生，然后再添加自己的事件。
在eventUtil事件中（为了平衡不同浏览器间实现事件的差异或事件的差异而存在）。
补充1：
eventUtil常用的方法：
（1）addHandler() 常常为对象添加事件并保证兼容性（如DOM0或DOM2级不同的指定方法有很大不同）；
（2）removeHandler()相应地是移除事件；
另外，在这个对象中，很多方法参数都是event事件对象，兼容DOM的浏览器会将event对象传入到事件处理程序中，这个event对象也支持许多属性和方法：
currentTarget 其事件处理程序当前正在处理事件的那个元素
preventDefault() 取消事件的默认行为
stopProgagation() 取消事件的进一步捕获或冒泡
targe 事件的实际目标
type 触发的事件类型
分析一下，右键事件的屏蔽应该只当在canvas部分，原本的思路实现，通过捕获到鼠标右键事件，然后自定义想要的效果。结果查询后发现了更简单的方法，果断使用。
document.getElementById('main').oncontextmenu = () => false;讯享网
查看echarts开发文档，发现API提供了右键事件接口。于是乎，改写即可。
讯享网初步代码如下： ... //定义自定义菜单项 <ul id = "menu"> <li class="menu" @click = "choose1">功能1</div> <li class="menu" @click = "choose2">功能2</div> <li class="menu" @click = "choose3">功能3</d
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/125889.html