一、需求分析
每次实现各种图表时,总会用到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">功