如何利用echarts3绘制梯形波图

一、需求分析

每次实现各种图表时，总会用到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">功