echarts 原生是不支持弧形漸變的，本文只是取巧，利用線性漸變
linear實(shí)現(xiàn)視覺(jué)上的弧形漸變。適用于以弧中點(diǎn)劃分，兩側(cè)顏色是對(duì)稱的情況。而對(duì)于嚴(yán)格意義上的弧形漸變（從起點(diǎn)到終點(diǎn)漸變）是不適用的。
環(huán)形圖是 echarts 中 pie 圖的一個(gè)變種，echarts 官方對(duì)于 pie 圖的顏色漸變只支持兩種：
- linear 線性漸變
與 css 3 的 Linear Gradients 相似，即向下/向上/向左/向右/角度方向漸變，類似與射線 - radial 鏡像漸變
與 css 3 的 Radial Gradients 相似，即從圓心向外一圈圈漸變出去，類似與太陽(yáng)輻射
漸變顏色屬性
本文實(shí)現(xiàn)的弧形漸變是利用線性漸變的實(shí)現(xiàn)的，動(dòng)手前需要了解到 itemStyle.color 屬性的配置與其子屬性表示的意義，可以參考 echarts 配置文檔 series-pie::itemStyle::color。主要了解這幾個(gè)屬性：
-
type：漸變類型，支持linear/radial -
x,y,x2,y2：向量坐標(biāo)，即漸變開(kāi)始的起點(diǎn)坐標(biāo) (x, y)，與結(jié)束坐標(biāo) (x2, y2)，會(huì)影響到colorStops中對(duì)圖表的著色，需要注意的是值的范圍在 0 ～ 1 之間 -
colorStops：色彩過(guò)程，值為元素是{ offset: PERCENTAGE, color: COLOR }的數(shù)組，每個(gè)元素表示在什么位置是什么顏色（如，在 30% 的位置是紅色，{ offset: 0.3, color: 'red' }）
實(shí)現(xiàn)流程
實(shí)現(xiàn)過(guò)程主要分為以下幾個(gè)步驟：
- 確定環(huán)形圖旋轉(zhuǎn)展開(kāi)的起始位置 Ps
- 確定漸變顏色，0% 處的顏色即起點(diǎn)/終點(diǎn)的顏色，100% 處的顏色即弧線中點(diǎn)的顏色
- 將環(huán)形圖看成是一個(gè)圓 O，圓心為 O0，圓心坐標(biāo)為 (x0, y0)，半徑 R
根據(jù)上邊向量坐標(biāo)值范圍的規(guī)定（必須在 0～1 之間），可以確定圓心坐標(biāo) (x0, y0) = (0.5, 0.5)，半徑 R = 0.5 - 將圓 O 置入 echarts 的 linear 漸變坐標(biāo)系中
- 計(jì)算圓上點(diǎn) Ps 的坐標(biāo) (xs, ys)
- 根據(jù)你的數(shù)據(jù) val（如占比 62%，val === 62）確定弧度 α
val / 100 = α / 2π，即 α = (val * π) / 50 - 確定漸變向量的起點(diǎn) Ms 與其坐標(biāo) (x, y)
以 Ps 為起點(diǎn)沿環(huán)形圖展開(kāi)方向（如順時(shí)針）旋轉(zhuǎn)弧度 α 后得到的圓上點(diǎn) Pe，Ms 為線段 PsPe 的中垂線 L 與 PsPe 的交點(diǎn)。此處中垂線一定是穿過(guò)圓心O0的 - 確定漸變向量的終點(diǎn) Me 及其坐標(biāo) (x2, y2)
Me 為中垂線 L 與弧線 PsPe 的交點(diǎn)
以上過(guò)程建議在實(shí)現(xiàn)時(shí)通過(guò)紙筆畫(huà)出坐標(biāo)系進(jìn)行坐標(biāo)求解，過(guò)程需要考慮占比大于等于 50 與小于 50 的 兩種情況，前者即弧度 α < π，后者即 α > π。具體求解坐標(biāo)的過(guò)程為高中數(shù)學(xué)內(nèi)容。
以下是以 Ps 為環(huán)形圖起點(diǎn)， Pe 為環(huán)形圖終點(diǎn)在 echarts 的 linear gradients 坐標(biāo)系中構(gòu)造出的環(huán)形圖結(jié)構(gòu)（也可以參考 GeoGebra 上本人繪制的坐標(biāo)系統(tǒng)），只需要計(jì)算出向量 MsMe 的起/終點(diǎn)坐標(biāo)即可。相關(guān)代碼參考 linear 實(shí)現(xiàn)偽弧形漸變
軟件推薦
強(qiáng)烈推薦 GeoGebra 數(shù)學(xué)繪圖軟件，可在線作圖
