前端數據可視化--間斷圓環圖實現

最近用了一個多月的時間完成了一個數據可視化大屏，大概的效果是這個樣子的，固然這只是三屏中的其中一屏，我會用幾篇文章分別介紹各個點的實現方式和一些相應的知識點。

首先此次會介紹右下角的間斷圓環圖的實現，圓環圖會根據數據多少，進行相應的變化。而且，圓環的內容是間斷的，且帶有從淺到深的漸變。

實現初嘗

看到圖形，咱們首先會想到它跟圓環的結構稍有相似，那咱們能夠按照實現圓環的思路能夠經過如下方式實現，使用左右兩個半圓，並控制其遮罩的旋轉，來控制進度，相似如下這種：

而後，咱們能夠將兩邊的半圓，換作咱們的底圖，進行拼接。這時候咱們會發現，若是想要遮罩徹底遮住底圖的話，咱們的整個圖形就沒辦法作成透明的了。尷尬，只能換思路。

快樂的使用SVG

頭痛之餘，借鑑了一下網上的其餘圓環的解決方案，發現了一篇張鑫旭大神的文章，很巧妙的用stroke-dasharray實現了圓環進度。

大概原理以下：

stroke-dasharray在SVG中表示描邊是虛線，兩個值，第一個是虛線的寬度，第二個是虛線之間的間距。因此，咱們只要讓這根線，保持只有一段實線+一段虛線就好了，也就是

實線長度(對應數據) + 虛線長度 = 圓環周長

代碼以下(直接):

<svg width="440" height="440" viewbox="0 0 440 440">
    <circle cx="220" cy="220" r="170" stroke-width="50" stroke="#D1D3D7" fill="none"></circle>
    <circle cx="220" cy="220" r="170" stroke-width="50" stroke="#00A5E0" fill="none" transform="matrix(0,-1,1,0,0,440)" stroke-dasharray="0 1069"></circle>
</svg>

朝最終效果進發

按照前面的思路，實現一個間斷圓環的思路也就瓜熟蒂落的出來了。咱們能夠把整個圓環分紅N份，每份包含一段實線，一段虛線。例如咱們要實現80%的圓環，對應的stroke-dasharray就是:

const dashItemLength = (周長 / (N * 2))
// 向上取整 保證有整數個數據
const dashItemNum = Math.ceil(N * 0.8)

// 這裏 實線虛線的長度是相同的, 減1 是預留出最後的空白
const dashLine = `${dashItemLength} ${dashItemLength},`.repeat(dashItemNum - 1)

// 最後須要將最後的虛線長度進行補齊
const restLength = 周長 - (dashItemLength * dashItemNum)

const dashLineArray = dashLine.split(',')

dashLineArray.push(`${dashItemLength} ${restLength}`)

const result = dashLineArray.join(' ')

大概效果就是這樣子:

最終漸變

咱們會發現，圓環的漸變不是簡單的線性漸變，它是環繞着圓環進行的。這個時候，把裏面的圓環直接加上漸變是達不到效果的，這時候，咱們須要把整個圓環拆成兩份，例如我想要從黃色漸變到紅色，那就是，右邊是黃色到中間色，左邊是中間色到紅色。 對應的虛線計算，也須要拆成兩部分進行了。

具體代碼就不在這裏贅述，關鍵要實現如下幾個步驟:

1. 拆分紅左右兩個圓環
2. 若是數值小於50%，則左側所有爲虛線，右邊按照正常計算補齊
3. 若是數值多餘50%，則右側所有爲虛實線，左邊按照正常補齊
4. 須要考慮每一個單位的寬度，使50%的時候，單元正好卡在虛線中間

最終效果: