折线图在波动比较大时，我们往往需要添加标注信息，来说明波动的原因。
此篇文章用于介绍通过echarts的graphic配置项达到添加 ‘事件’ 的目的。
1. 明确项目要求
在以下折线图的一月三号及一月五号添加 分别为 “去食堂”和“下馆子”的信息。
我们目前有的数据为
xAxisData：["01-01","01-02","01-03","01-04","01-05","01-06","01-07"];
yAxisData：[20,23, 15, 26, 50, 28, 22];
eventsData:[ { "date": "01-03", "content": "去食堂" }, { "date": "01-05", "content": "下馆子" }]
2. 解决思路
因为事件的纵向位置无关紧要，现在只看横向位置。
我们需要找到每个事件在x轴的位置。笔者是找出x轴第一项以及最后一项分别距离折线图画布左侧的宽度。通过知道事件对应时间在x轴的位置，以便找出事件对应的时间距离折线图画布左侧的宽度，从而判断 事件 放到折线图横向的位置。
关于找出事件在x轴的位置，以下有两种思路
a. 遍历时间数组，找到该事件对应时间数组的index，从而知道其位置
b. 通过时间数组的首尾时间，‘01-01’和‘01-07’来判断事件大概在x轴的横向位置
第一种方法需要时间数组包含事件的时间，适用于数据量小的折线图。
第二种方法适用于数据量较大的折线图。（因为大数据，无法知晓 事件的时间是否包含在时间数组中。）但是，该方法在某些特殊情况下，不能准确的对齐时间轴。
3. 配置事件属性
4. 定义找时间差的方法
var timeCompare=function(time1,time2){
var time1S=time1.split('-')[1];
var time2S=time2.split('-')[1];
return (time1S*1-time2S*1);
}
5. 计算事件的横向位置
6. 配置echarts的option