隨之做大屏的專案越來越多，echarts用得就越來越多，但是每一個專案都會有不同的挑戰，因為並不是所有的需求都處理過，比如：ui小哥哥設計了一款日曆元件，如下圖：
看到這個設計圖，我首先就找了echarts官網中的日曆圖進行修改，但是改了一個下午一點進展都沒有，在網上搜尋也並沒有找到相似的，最後，我立了一個flag，怕啥，自己封裝一個吧！
於是，開啟封裝日曆元件的程式！
首先，看ui圖： 1.圖例有四種顏色，不同顏色代表不同範圍的值，也就是說下面每一個日期格子中的數值的大小決定了它這個格子的背景顏色；
2.格子是有規律可循的，比如：現在是2020年9月份，如果是蘋果手機，那麼1號出現在星期二，第一行的第3個格子（安卓是星期二第一行第2個格子）剛好是上圖的模樣，如果是別的月份，則也需要考慮1號應該在第一行的哪個位置
其次，與後端小哥哥溝通，對方究竟能給我們提供怎麼樣的資料（本次專案後端小哥哥和我說，只提供本月1號到本日的資料，如果某一日的資料是空的，則給我返回那一日為0的結果，但是後面的時間無法提供，也就是說今天27日，不可能給我提供到30日的資料）；
最後，在開始前，總結一下當前情況，1.需要自制一個圖例陣列 2.獲取本月1號是星期幾，以此得出第一行中有幾個格子應該是沒有資料的 3.根據後端的反饋，我們可以拿到本月1號到今天的資料，那麼如果今天不是本月最後 一日，那麼後面應該是空了幾個格子沒有資料的，這裡我們可以採用陣列拼接的方式：即 空白陣列+後端陣列+剩餘天數空白陣列 = 本月日曆
下面，開始敲程式碼......
在props中設定預設的圖例陣列範圍陣列，增加靈活性與複用性。
圖例有了，開始準備日曆格子，
在data中準備需要的資料：
寫一個函式，獲取本月的一號，也可順便得到一號前面的空陣列，因為這裡的字串1-7代表的就是星期日-星期六，另外也可以獲取本月一共有多少天。如下圖：
綜上，拿到後端返回的陣列之後，我們也可以計算出剩餘的空白天數的格子有幾個了，那集齊了本月總天數，一號前的空白長度，後端返回的資料長度，剩餘天數的空白長度，就可以用展開運算子開始拼接陣列了，如下圖：
陣列是從0開始的，所以，需要 -1
這裡順便格式化一下月份：小於10的前面補0
類名除了可以是欄位串以外，也可以是變數名，還可以是函式，這個函式可以根據數值的不同範圍，返回不同的類名，這樣就可以得到相應的背景顏色了。
呼叫一下就好了，
最後效果如下圖：
寫到這裡我停下來了，因為這是展示性的專案，所以我並沒有給圖例加上點選功能，echarts點選圖例的時候，通常都會取消高亮被點選的圖例色塊和對應資料的背景顏色或者是取消顯示對應資料，那麼，其實這裡也可以自己寫點選事件，只要點選了就將圖例顏色改成灰色，然後迴圈陣列，相應範圍的那些格子的背景顏色也改成灰色就可以了，自由發揮吧！辦法總比困難多！
對了，最後說一句，前面忘記說一下，樣式問題，這些個小格子，只要寫出一個其餘用迴圈就ok啦，這裡就沒有贅述了。