隨之做大屏的項目越來越多，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啦，這里就沒有贅述了。