Heatmap 介紹
官網：Echarts 🔍
官網提供的範例如下：笛卡爾坐標系上的熱力圖
範例的 X 軸設定不同的時間，Y 軸設定星期，資料以 Array 的形式寫成。第一個放 Y 軸位置，第二個放 X 軸，第三個(固定是倒數第一個)放要設定的數值。
套用及客製化調整
首先，在 dashboard.html 加上 heat-map1-frame id，包這一層是為了繪圖完要 resize 時用的。其中的 heat-map1-message 部分，可以在 js 檔案撰寫資料讀取錯誤處理(使用 show/hide 顯示)。heat-map1 則是主要繪製熱力圖的區塊，高度預定為 350px。
這邊將 heatMap1 預先畫出來，不過詳細圖表內容還沒有置入。
接下來，撰寫 mapOption function，整個 function 很龐大，下方會針對其中比較特別的設定做說明。
首先，此 function 代入了三個參數，第一個 params是完整參數，第二個 metric 是判斷是哪一個類型單位(此專案中，有 6 種不同的對應單位，於此不多加記錄)，第三個參數 row 是資料的筆數，為了彈性繪製熱力圖的高度。
此圖表的 X 軸單位是時間，Y 軸是不同的 pipeline。圖例的部分依據不同 metric 對應到不同的單位劃分。
再往下餵資料給 data 變數的部分，這是為了準備好資料設定給圖表。特別值得注意的部分是時區設定， API 取回的值要做 UTC & GMT 轉換。
在 let opt 區塊即是主要設定圖表的程式碼。tooltip 使用 formatter 去客製內容及樣式，參數即是前面組的 data，tooltip 出現的位置也需要做調整(避免 hover 時超出圖表外)。
Y軸設定部分，考量到部分 pipeline 名稱過長，將超過 16 字元的做剪裁，以刪節符號取代後面。
visualMap 設定 dimension，即是設定色塊深淺憑據的值。
兩軸皆有 dataZoom 的設定，是設計給過多筆/欄位資料，要檢視部分的時候用的。一開始的預設是 start 0/ end 100，在一讀取到圖表時，即顯示完整的內容。
完成 function 的撰寫，將其套用在 heatmap1 上面。
其中依據資料筆數去彈性調整 heatmap 的高度。
📑 完成品：
跟官方網站範例相差許多吧！
小結
由於公司專案架構龐大，呼叫 API 回傳資料複雜，且此篇內容程式碼屬公司智慧資產。綜合以上因素考量，故未附上完整檔案的程式碼。
整個開發過程，從參考官方文件簡易的範例，一步步擴寫達成專案需求。最終完成時，回首會發現自己已經走了一段不短的距離。
⛵️ Keep moving forward.
