如何基於 echarts 在柱狀圖或條形圖上實現轉換率？（有想法嗎？）_網頁設計公司


※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!



透過資料庫的網站架設建置，建立公司的形象或購物系統，並提供最人性化的使用介面，讓使用者能即時接收到相關的資訊



目錄

  • 需求

  • 探索一

  • 探索二

  • 探索三

    • 轉換實踐思路1

    • 轉換實踐思路2

    • 其他思路


  • 探索四（揭曉答案）

  • 答案篇說明

    • backgroundColor 用法

    • 雙柱合一

    • 始終在軸的中間

    • 百分在變，但是距離軸的距離固定

    • 源碼


  • 最後




我是沒想法啦（一開始）。其實，好久沒接觸 echarts 了，至少有一年多了，想起以前折騰地圖的情景了。



需求


兩張圖。沒有再多了...


柱狀圖：


條形圖：


探索一


俗話說，不知道怎麼辦的時候，百度來幫忙。百度一下。


輸入關鍵字：echarts 柱狀圖 轉換率


打開第一篇的結果：echarts實現漏斗轉化率圖表效果


文章描述的就是我想要的️。用的 series 中的markpoint 來實現。


找到思路了，找到 echarts 官網相關文檔：series-bar.markPoint


看遍並動手操作了，結果是不能解決需求。原因如下：



  1. 圖形（箭頭）：默認提供的沒有滿足的。[symbol]

  2. 圖形（箭頭）位置：無法設置在兩根柱子的中間，且距離軸固定距離。提供的可調整位置的參數都是針對當前柱子而言相對或絕對的距離。[symbolOffset 等位置參數]

  3. 圖形（箭頭）百分比：如何拿到參數計算兩根柱子直接的百分比。


一開始就被難倒了呢。不放棄，。


經過以上，對 markPoint 有了解了，並且也對需求要實現的點更清楚了。


百度/谷歌的結果，僅此一種思路。


探索二


那麼如何解決呢，找類似案例，尋找思路。案例在哪呢？官網案例上沒有類似的呢。


其實有個 echarts 的案例寶庫：gallery，上面有非常豐富且有創意的案例。


尋找中...


可借鑒案例(最終用到的，其實還看了更多呢):



  1. case1: 工作地top10，借鑒地方：條形圖，右側圓，更改形狀、位置等


  2. case2: 溫度計柱狀圖，借鑒地方：柱狀圖，底部圓，更改形狀、位置等


  3. case3: 立體柱狀圖，借鑒地方：柱狀圖，目標值，柱子中間問題解決了，只需改形狀


  4. case4: 柱形圖排名，借鑒地方：沒看到可借鑒地方，猜想可能有用就留着了，後面其實幫大忙了



探索三


案例收集好了，那麼開始吧，通過觀察案例，尋找思路，探索可行性，並進行實踐。


轉換實踐思路1


case1, cas2 是實現思路是一樣的，只是方向不一樣。都是基於 series，用其中一項作為圓，type: scatter，通過改變相關屬性來實現的。


由於之前看到 symbol 支持三角形，想到個思路，箭頭可以用三角形和矩形繪製而成。


看了結果，是不是很接近需求了，可以採用了。


答案是否定的。


失敗案例：


因素：增加了數據項


因為位置是相對柱子而言的，並不能準確的保證在柱子中間。可能改的位置不對


因素：更改了數據項的值


※想知道最厲害的網頁設計公司嚨底家"!



RWD（響應式網頁設計）是透過瀏覽器的解析度來判斷要給使用者看到的樣貌



因為比例有大小，而值會根據坐標軸定位


只能放棄了。


轉換實踐思路2


case3 是用 series 的 標註線實現的。


堪稱很完美了，還有動畫呢。


至於形狀，之前看文檔 backgroundColor 屬性，可以用背景圖。


是不是很接近需求了，可以採用了。


答案依舊是否定的。


失敗案例：


因素：增加了數據項


因為每條標註線只能有一個 label 值。其實如果數據項只有兩項，這樣實現還是可以的呢。


其他思路


case 4 還沒看呢。簡單看看吧，說不定有發現。


結果真有發現呢，值是不同的，但是圖形距離軸的距離是相等的，可借鑒呢。


探索四（揭曉答案）


找不到答案的時候，不妨回到起點看看，也許會有發現。


經過以上探索，雖然沒有結果，但是探索過程，也是很有幫助的。


以上案例，都是通過 series 多選實現的，其中一項用來显示柱狀圖，其他項用來繪製其他圖形。那麼我也可以這樣做，用兩根柱子表示一個維度，一個显示柱子，另一個显示轉換率。


至於位置，case4 也有了思路，至於答案，也近了。


至於圖形，case3 也有了思路，至於答案，也近了。


那麼動手吧。


更改數據項長度或值大小，相比於前面都能正常显示，可以說 90% 了（畢竟沒有完美的）。


至於如何再完美一些呢，舉例：



  1. 如果數據項特別多，可以考慮用條形圖，動態計算根據數據項的多少調整容器的高度，內滾動，外固定，不打破頁面布局。


答案篇說明


backgroundColor 用法


通常用法：


backgroundColor: 'red' // css 顏色值

其他用法：


backgroundColor: {
   image: 'xxx/xxx.png'
   // 這裏可以是圖片的 URL，
   // 或者圖片的 dataURI，
   // 或者 HTMLImageElement 對象，
   // 或者 HTMLCanvasElement 對象。
 }

怎麼用 HTMLImageElement 對象


backgroundColor: {
   image: image: document.getElementById('arrow-h') // html上的元素<img src="" id="arrow-h" />
 }

我最終實現時是採用的方案：


backgroundColor: {
   image: './arrow.svg',
 }

關於箭頭的 svg , 我一開始是到 iconfont 圖標庫找，結果沒找到


後來是自己實現的。（果然是自己動手，豐衣足食呢，）


雙柱合一


保證显示的柱子中間始終和軸的文字對齊。series 的另一項（非显示的那根柱子）


barGap: '-100%',

始終在軸的中間


不固定柱子寬度，而是根據百分比箭頭占的空間，固定柱子之間的間距（显示的那根柱子的 series 配置）


barCategoryGap: 40,

百分在變，但是距離軸的距離固定


外層數據固定值0（不显示柱子哦 ），內層數據显示百分比


let rateData = arrPercent(data); // arrPercent 根據显示的柱子的數據，計算百分比
 let rate = rateData.map((v, i) => {
   let item = {
     value: 0, // 外層
     label: {
       formatter: '{a|' + v + '%}', // 显示的百分比呢
     }
   }
   return item
 })

一切問題迎刃而解，給自己鼓個掌


源碼


實踐代碼哦


github


最後


有更好思路或想法的，請聯繫我，非常歡迎找我探討（渴望 ideal 似 渴望 ）。

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!



當全世界的人們隨著網路時代而改變向上時您還停留在『網站美醜不重要』的舊有思維嗎？機會是留給努力改變現況的人們，別再浪費一分一秒可以接觸商機的寶貴時間！



Orignal From: 如何基於 echarts 在柱狀圖或條形圖上實現轉換率？（有想法嗎？）_網頁設計公司

留言

張貼留言