2019.04.10舊鏈接失效了，，貌似被誤刪、？放一個(gè)新的
https://github.com/Goddywu/EchartWithEvents
?https://goddywu.github.io/EchartWithEvents/
折線圖在波動(dòng)比較大時(shí)，我們往往需要添加標(biāo)注信息，來說明波動(dòng)的原因。
此篇文章用于介紹通過echarts的graphic配置項(xiàng)達(dá)到添加 ‘事件’ 的目的。
先放一個(gè)在線demo哈: https://goddywu.github.io/Echarts/
github項(xiàng)目鏈接https://github.com/Goddywu/Echarts
1. 明確項(xiàng)目要求
? ? 在以下折線圖的一月三號(hào)及一月五號(hào)添加 分別為 “去食堂”和“下館子”的信息。
我們目前有的數(shù)據(jù)為
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. 解決思路
因?yàn)槭录目v向位置無關(guān)緊要，現(xiàn)在只看橫向位置。
我們需要找到每個(gè)事件在x軸的位置。筆者是找出x軸第一項(xiàng)以及最后一項(xiàng)分別距離折線圖畫布左側(cè)的寬度。通過知道事件對(duì)應(yīng)時(shí)間在x軸的位置，以便找出事件對(duì)應(yīng)的時(shí)間距離折線圖畫布左側(cè)的寬度，從而判斷 事件 放到折線圖橫向的位置。
關(guān)于找出事件在x軸的位置，以下有兩種思路
a. 遍歷時(shí)間數(shù)組，找到該事件對(duì)應(yīng)時(shí)間數(shù)組的index，從而知道其位置
b. 通過時(shí)間數(shù)組的首尾時(shí)間，‘01-01’和‘01-07’來判斷事件大概在x軸的橫向位置
第一種方法需要時(shí)間數(shù)組包含事件的時(shí)間，適用于數(shù)據(jù)量小的折線圖。
第二種方法適用于數(shù)據(jù)量較大的折線圖。（因?yàn)榇髷?shù)據(jù)，無法知曉 事件的時(shí)間是否包含在時(shí)間數(shù)組中。）但是，該方法在某些特殊情況下，不能準(zhǔn)確的對(duì)齊時(shí)間軸。
3. 配置事件屬性
4. 定義找時(shí)間差的方法
var timeCompare=function(time1,time2){
? ? ? var time1S=time1.split('-')[1];
? ? ? var time2S=time2.split('-')[1];
? ? ? return (time1S*1-time2S*1);
}
5. 計(jì)算事件的橫向位置
6. 配置echarts的option
