我是沒想法啦（一開始）。其實，好久沒接觸 echarts 了，至少有一年多了，想起以前折騰地圖的情景了?。
需求
兩張圖。沒有再多了...
柱狀圖：
條形圖：
探索一
俗話說，不知道怎麼辦的時候，百度來幫忙。百度一下。
輸入關鍵字：echarts 柱狀圖 轉換率
開啟第一篇的結果：echarts實現漏斗轉化率圖表效果
文章描述的就是我想要的✌️。用的 series 中的markpoint 來實現。
找到思路了，找到 echarts 官網相關文件：series-bar.markPoint
看遍並動手操作了，結果是不能解決需求。原因如下：
- 圖形（箭頭）：預設提供的沒有滿足的。[symbol]
- 圖形（箭頭）位置：無法設定在兩根柱子的中間，且距離軸固定距離。提供的可調整位置的引數都是針對當前柱子而言相對或絕對的距離。[symbolOffset 等位置引數]
- 圖形（箭頭）百分比：如何拿到引數計算兩根柱子直接的百分比。
一開始就被難倒了呢。不放棄，?。
經過以上，對 markPoint 有了解了，並且也對需求要實現的點更清楚了。
百度/谷歌的結果，僅此一種思路。
探索二
那麼如何解決呢，找類似案例，尋找思路。案例在哪呢？官網案例上沒有類似的呢。
其實有個 echarts 的案例寶庫：gallery，上面有非常豐富且有創意的案例。
尋找中...
可借鑑案例(最終用到的，其實還看了更多呢):
-
case1: 工作地top10，借鑑地方：條形圖，右側圓，更改形狀、位置等
-
case2: 溫度計柱狀圖，借鑑地方：柱狀圖，底部圓，更改形狀、位置等
-
case3: 立體柱狀圖，借鑑地方：柱狀圖，目標值，柱子中間問題解決了，只需改形狀
-
case4: 柱形圖排名，借鑑地方：沒看到可借鑑地方，猜想可能有用就留著了，後面其實幫大忙了
探索三
案例收集好了，那麼開始吧，通過觀察案例，尋找思路，探索可行性，並進行實踐。
轉換實踐思路1
case1, cas2 是實現思路是一樣的，只是方向不一樣。都是基於 series，用其中一項作為圓，type: scatter，通過改變相關屬性來實現的。
由於之前看到 symbol 支援三角形，想到個思路，箭頭可以用三角形和矩形繪製而成。
看了結果，是不是很接近需求了，可以採用了。
答案是否定的。
失敗案例：
因素：增加了資料項
因為位置是相對柱子而言的，並不能準確的保證在柱子中間。可能改的位置不對?
因素：更改了資料項的值
因為比例有大小，而值會根據座標軸定位
只能放棄了。
轉換實踐思路2
case3 是用 series 的 標註線實現的。
堪稱很完美了，還有動畫呢。
至於形狀，之前看文件 backgroundColor 屬性，可以用背景圖。
是不是很接近需求了，可以採用了。
答案依舊是否定的。
失敗案例：
因素：增加了資料項
因為每條標註線只能有一個 label 值。其實如果資料項只有兩項，這樣實現還是可以的呢。
其他思路
case 4 還沒看呢。簡單看看吧，說不定有發現。
結果真有發現呢，值是不同的，但是圖形距離軸的距離是相等的，可借鑑呢。
探索四（揭曉答案）
找不到答案的時候，不妨回到起點看看，也許會有發現。
經過以上探索，雖然沒有結果，但是探索過程，也是很有幫助的。
以上案例，都是通過 series 多選實現的，其中一項用來顯示柱狀圖，其他項用來繪製其他圖形。那麼我也可以這樣做，用兩根柱子表示一個維度，一個顯示柱子，另一個顯示轉換率。
至於位置，case4 也有了思路，至於答案，也近了。
至於圖形，case3 也有了思路，至於答案，也近了。
那麼動手吧。
更改資料項長度或值大小，相比於前面都能正常顯示，可以說 90% 了（畢竟沒有完美的）。
至於如何再完美一些呢，舉例：
- 如果資料項特別多，可以考慮用條形圖，動態計算根據資料項的多少調整容器的高度，內滾動，外固定，不打破頁面佈局。
答案篇說明
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
})
一切問題迎刃而解，給自己鼓個掌?
原始碼
實踐程式碼哦 ?
最後
有更好思路或想法的，請聯絡我，非常歡迎找我探討（渴望 ideal 似 渴望 ✨?）。