2019.04.10舊鏈接失效了，，貌似被誤刪、？放一個新的

https://github.com/Goddywu/EchartWithEvents

?https://goddywu.github.io/EchartWithEvents/

折線圖在波動比較大時，我們往往需要添加標注信息，來說明波動的原因。

此篇文章用于介紹通過echarts的graphic配置項達到添加 ‘事件’ 的目的。

先放一個在線demo哈: https://goddywu.github.io/Echarts/

github項目鏈接https://github.com/Goddywu/Echarts

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