我是沒想法啦（一開始）。其實，好久沒接觸 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 似 渴望 ✨🌜）。