如何基於 echarts 在柱狀圖或條形圖上實現轉換率?(有想法嗎?)

ESnail發表於2020-05-31

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

需求

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

柱狀圖:

如何基於 echarts 在柱狀圖或條形圖上實現轉換率?(有想法嗎?)

條形圖:

如何基於 echarts 在柱狀圖或條形圖上實現轉換率?(有想法嗎?)

探索一

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

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

如何基於 echarts 在柱狀圖或條形圖上實現轉換率?(有想法嗎?)

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

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

找到思路了,找到 echarts 官網相關文件:series-bar.markPoint

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

  1. 圖形(箭頭):預設提供的沒有滿足的。[symbol]
  2. 圖形(箭頭)位置:無法設定在兩根柱子的中間,且距離軸固定距離。提供的可調整位置的引數都是針對當前柱子而言相對或絕對的距離。[symbolOffset 等位置引數]
  3. 圖形(箭頭)百分比:如何拿到引數計算兩根柱子直接的百分比。

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

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

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

探索二

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

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

尋找中...

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

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

    如何基於 echarts 在柱狀圖或條形圖上實現轉換率?(有想法嗎?)
  2. case2: 溫度計柱狀圖,借鑑地方:柱狀圖,底部圓,更改形狀、位置等

    如何基於 echarts 在柱狀圖或條形圖上實現轉換率?(有想法嗎?)
  3. case3: 立體柱狀圖,借鑑地方:柱狀圖,目標值,柱子中間問題解決了,只需改形狀

    如何基於 echarts 在柱狀圖或條形圖上實現轉換率?(有想法嗎?)
  4. case4: 柱形圖排名,借鑑地方:沒看到可借鑑地方,猜想可能有用就留著了,後面其實幫大忙了

    如何基於 echarts 在柱狀圖或條形圖上實現轉換率?(有想法嗎?)

探索三

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

轉換實踐思路1

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

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

如何基於 echarts 在柱狀圖或條形圖上實現轉換率?(有想法嗎?) 如何基於 echarts 在柱狀圖或條形圖上實現轉換率?(有想法嗎?)

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

答案是否定的。

失敗案例:

如何基於 echarts 在柱狀圖或條形圖上實現轉換率?(有想法嗎?)

因素:增加了資料項

如何基於 echarts 在柱狀圖或條形圖上實現轉換率?(有想法嗎?)

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

因素:更改了資料項的值

如何基於 echarts 在柱狀圖或條形圖上實現轉換率?(有想法嗎?)

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

只能放棄了。

轉換實踐思路2

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

如何基於 echarts 在柱狀圖或條形圖上實現轉換率?(有想法嗎?)

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

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

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

答案依舊是否定的。

失敗案例:

因素:增加了資料項

如何基於 echarts 在柱狀圖或條形圖上實現轉換率?(有想法嗎?)

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

其他思路

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

如何基於 echarts 在柱狀圖或條形圖上實現轉換率?(有想法嗎?)

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

探索四(揭曉答案)

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

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

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

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

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

那麼動手吧。

如何基於 echarts 在柱狀圖或條形圖上實現轉換率?(有想法嗎?) 如何基於 echarts 在柱狀圖或條形圖上實現轉換率?(有想法嗎?)

更改資料項長度或值大小,相比於前面都能正常顯示,可以說 90% 了(畢竟沒有完美的)。

如何基於 echarts 在柱狀圖或條形圖上實現轉換率?(有想法嗎?) 如何基於 echarts 在柱狀圖或條形圖上實現轉換率?(有想法嗎?)

至於如何再完美一些呢,舉例:

  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 似 渴望 ✨?)。

相關文章