從ui圖到開發頁面該有的考慮

前言

開發經驗滿滿的前輩們，此篇文章或許對大家來說並不值得一提，這裏說的主要面向對象是小白，或者欠缺點經驗的開發者們（懂echarts的更佳）。這裏聊得是引導你們如何去思考一個問題，以我所在項目爲例子，闡述個人思考方式和思路，也許對於某些人來說，能給予一些啓發。這裏說的沒有對與錯之分，我說的也未必都是正解，純粹地一個我的總結和分享，我也是一個小小白。若有錯誤請多見諒，不喜勿噴！

例子

以這界面中紅框部分爲例子，用echarts實現，圖形都是比較基礎的餅圖和柱狀圖。想必你們都以爲這個很好實現吧。假設你知道echart的這兩種圖的基本配置項，你們的第一感受是否是以爲，這個so easy？

假設你的老闆叫你評估個時間作出來，可能你會憑感受地脫口而出，1-2個小時吧，甚至更短？

若是我在這裏加個提醒，叫你們儘量去考慮全面再去回答老闆的問題，是否，直到這裏，你跟剛剛的想法發生了較大的變化？

---

這是分界線，在這以前，你們仍是能夠好好考慮全面一下，跟接下來，我要說的，對比一下

總體佈局

咱們知道，這裏是有兩個echart圖，能夠當作兩個div，放在一行，能夠用

div {
    display: inline-block;
    width: 50%;
}
/** or **/
div {
    float: left;
    width: 50%;
}
複製代碼

來實現，想必各位第一反應也是這兩個吧，反正我是的。

進一步去想，屏幕會變大縮小，若是縮小到很小的話，相比二者擠不下一行了，這時就要換行。那麼，可能用flex佈局，更加方便，都不用本身寫媒體查詢就能夠智能的實現了。
然而，等到你真正去寫的時候，會發現，佈局亂糟糟，達不到預期，爲什麼？
緣由在echart圖形自己的佈局上，因爲本來讓echart正常展現的功能，會存在position等佈局css樣式，咱們都知道，使用flex佈局，其子元素的一些佈局樣式會失效。 所以，這種方案不可行。 很遺憾，咱們仍是經過媒體查詢去處理這種狀況吧。

接下來，在圖中看到

雖然說這是兩個div，可是其實並無緊挨在一塊兒的，從美觀上講，的確，須要用空白的間隔會更好看。那麼怎麼處理這個空白間隔呢？ 想必你們都以爲這個有什麼好講的，搞個margin或者padding不就行了嘛，emmm...我一開始也是這麼想的，可是準備寫代碼的時候，就會以爲好麻煩（- _ - 我懶）：

1. 爲第一個div設置個margin-left？那區別對待吧，加個類名，而後設置css。
2. 兩個div的寬度和margin值計算好分配好空間佔比
3. 那麼小屏幕換行的時候，就會多了個margin-left了，那媒體查詢處理掉吧

思路很清晰，實現起來也是很是簡單的。可是，我後來仍是放棄了，
第一我以爲，少點類名，代碼更漂亮；
第二，我以爲起名字好煩啊，用僞類？能夠啊，可是也要處理好可否真的定位好這個，撇去自己項目的代碼的一個總體環境，其實也是很簡單的，可是當置於一個複雜的代碼環境裏，各類命名錯綜複雜的狀況下，少用僞類仍是較爲保險；
第三，我不想計算；
第四，關鍵的關鍵是，我以爲存在更好的辦法。

更好的辦法（仍是要類名，可是項目裏我是統一了兩個類名）

/** 這兩個類名估計你們都很熟悉，可是我項目沒有引用boostrap，這是我本身定義的全局類名 **/
.pull-left {
    float: left!important;
}
.pull-right {
    float: right!important;
}
複製代碼

回到這個圖裏，我爲第一個div設置了pull-left類名，第二個div設置了pull-right類名。
可是他們的寬度再也不是width: 50%了，改爲更小的值，以便留出須要的空白空間。（固然，有些人可能一開始就想到用這個佈局了，這裏只是在引導一個思考方式，最終造成一個好的思路而已）

圖形的特殊狀況

開發者們都深有體會，要實現一個ui圖上的頁面不難，難就難在，存在多種狀況，多種未知因素，進而致使的個別特殊狀況或極端狀況。若是說，開發時間爲100%，那麼還原ui圖的狀況（正常的狀況），佔據了70%時間，30%就花在處理這些極端狀況上了。內心面就以爲很憤懣不平，明明這些特殊狀況和極端狀況出現機率那麼小，缺花費了那麼多時間去搞，甚至把代碼都搞得更復雜，維護也很差。可是，這就是現實，沒辦法了，咱們能作的就是，在開始coding前，儘可能全面考慮，從中制定方案，避免開發到一半發現寫不下去更換方案這就尷尬了。

廢話很少說，這裏會有什麼特殊狀況呢？以餅圖爲例子。

情景一

說一下大體背景需求，這裏的餅圖有多少組數據不是固定的，什麼意思，圖上不是有六組數據嘛（紅書發佈、搜狗搜索...），就是圖上六中顏色的數據嘛。這些數據個數，都是未知的，可能不少可能不多。

瞭解基礎背景後，你們有什麼想法。

因爲這些數據個數都是未知的，所以咱們要考慮好兩個極端的狀況，很是少數據的狀況（也就是1組數據），一個是不少數據（無窮）。 會對圖形有什麼影響？變如今？

數據的多少，會表如今圖例上，要考慮哪些問題呢（漸進式思考）？

1. 不論圖例多少，總體圖例的位置都要垂直居中於餅圖，所以legend的top值，不能是其餘數值，只能是'middle'，那麼數據不少的時候，是否會自動繼續往下堆疊，仍然保持垂直居中呢？
2. 包含echart的圖的container，必定要設置寬度和高度才能呈現出圖，所以，不能實現高度隨着圖例的變多而變高，所以光設置個middle仍不足。通常狀況下，既然設置了高度了，若是圖例數目往下排列的時候到達高度的極限，會自動新增第二列。可是在這裏，因爲一行存在兩個div，並且寬也設定了，明顯讓其自由這麼發展下去，只會有一部分圖例被遮擋住了。
3. 很遺憾，面對這種問題，雖然ui圖上沒有考慮到多圖例的狀況，產品經理也可能沒考慮到，那麼或許咱們須要本身決定改造一下了（最好諮詢一下產品吧），反正就是，咱們要有這個極端意識。解決辦法就是，利用echarts提供的圖例分頁功能了。相似這種

情景二

上面也說了，有多少組數據都是未知，那麼這些數據的名稱（小紅書發佈這些...）也是未知的，天然這些名稱長度也是未知的。那麼問題就來了，若是名字很長怎麼辦？
思路：

1. echarts的圖例很長的時候，不會自動換行的，固然選擇了canvas生成的圖，更加不可能經過樣式改變了。而咱們這裏，若是名稱很長了，會超出到屏幕外面，很差！
2. ui圖也沒告訴你這種狀況下該怎麼辦？可是，咱們必定要有這個意識（重複了不少遍了，我本身都嫌本身），能怎麼辦？截斷唄。至於截斷的方式，能夠用字符串的階段，也能夠用echart自帶的一個方法截斷（本身去查，印象才更深）

3. 是否是截斷了就沒事了？錯，圖例的水平位置就要考慮好了，若是仍是以ui圖那些圖例狀況來考慮水平位置的放置的話，可能真遇到須要截斷的狀況下，水平位置放得很差的話，就會出現就算你截斷了，可是仍是顯示不出來，直接被父層的元素給砍掉了內容。
4. 所以，要結合屏幕的狀況，考慮好截斷多少，而後以這種截斷後的狀況來調整圖例的水平位置，這樣才能避免上述問題。 既然截斷了，用戶也就不知道真正的名字了，那麼咱們天然也要須要爲截斷的圖例提供tooltip，用echart的圖例tooltip功能就行了

三） 既然數據的名稱會有很長的狀況，那麼天然而然，對應的tooltip上的名稱，也會很長。 這裏的tooltip有兩種，一種是懸浮在餅圖上的tooltip，一個是懸浮在圖例上的tooltip

不論哪一種tooltip，存在的問題性質上是同樣的。

1. 如圖，若是名稱像紅框那麼長，那麼tooltip也會這麼長，若是不幸tooltip的層級不夠高，還有可能被別的元素遮擋住了。
2. 對於圖例的tooltip，名稱必定要展現徹底的，否則都省略了，這個tooltip就沒啥意義了。可是也不能讓它那麼長，咋辦？那就讓他自動換行唄。至於自動換行的方法，我不知道能不能設置這個tooltip的寬度，若是能夠的話，能夠設置寬度，然裏面的文字自動換行就行了。若是不行，那就截斷字符串，用'\n'鏈接再展現出來就能夠了（我是用這種）。
3. 對於懸浮在餅圖上展現的tooltip，一樣用上述的換行方式也能夠，也能夠用截斷的方式，反正都有圖例說明了，可是仍是換行好點吧，具體問本身的產品經理吧。
4. 那麼問題就來了，到多寬才進行換行/截斷呢？先看個失敗的例子：
5. 截斷的寬度把握很差，就會仍是存在被強制遮蓋的狀況。所以，具體要多寬，本身要綜合頁面上的各類狀況來好好斟酌了，多測試。

最後

大概要想說的就這麼點了，其實真要處理起來，細節的東西仍是不少的，不過我也很少說了。但願你們之後在拿到ui圖拿到需求後，不要過於着急立刻進行開發，仍是先理解好需求，考慮好各類狀況下，在進行編碼。此篇文章或許對你思考起到那麼丁點做用，這樣我也感到開心。 祝各位開發者愈來愈厲害~~~