※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!
透過資料庫的網站架設建置，建立公司的形象或購物系統，並提供最人性化的使用介面，讓使用者能即時接收到相關的資訊
目錄
- 需求
- 探索一
- 探索二
- 探索三
- 轉換實踐思路1
- 轉換實踐思路2
- 其他思路
- 探索四（揭曉答案）
- 答案篇說明
- backgroundColor 用法
- 雙柱合一
- 始終在軸的中間
- 百分在變，但是距離軸的距離固定
- 源碼
- 最後
我是沒想法啦（一開始）。其實，好久沒接觸 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 支持三角形，想到個思路，箭頭可以用三角形和矩形繪製而成。
看了結果，是不是很接近需求了，可以採用了。
答案是否定的。
失敗案例：
因素：增加了數據項
因為位置是相對柱子而言的，並不能準確的保證在柱子中間。可能改的位置不對
因素：更改了數據項的值
※想知道最厲害的網頁設計公司嚨底家"!
RWD（響應式網頁設計）是透過瀏覽器的解析度來判斷要給使用者看到的樣貌
因為比例有大小，而值會根據坐標軸定位
只能放棄了。
轉換實踐思路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
})
一切問題迎刃而解，給自己鼓個掌
源碼
實踐代碼哦
github
最後
有更好思路或想法的，請聯繫我，非常歡迎找我探討（渴望 ideal 似 渴望 ）。
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!
當全世界的人們隨著網路時代而改變向上時您還停留在『網站美醜不重要』的舊有思維嗎？機會是留給努力改變現況的人們，別再浪費一分一秒可以接觸商機的寶貴時間！