echarts 原生是不支持弧形漸變的，本文只是取巧，利用線性漸變 linear 實現(xiàn)視覺上的弧形漸變。適用于以弧中點劃分，兩側(cè)顏色是對稱的情況。而對于嚴格意義上的弧形漸變（從起點到終點漸變）是不適用的。

環(huán)形圖是 echarts 中 pie 圖的一個變種，echarts 官方對于 pie 圖的顏色漸變只支持兩種：

1. linear 線性漸變
   與 css 3 的 Linear Gradients 相似，即向下/向上/向左/向右/角度方向漸變，類似與射線
2. radial 鏡像漸變
   與 css 3 的 Radial Gradients 相似，即從圓心向外一圈圈漸變出去，類似與太陽輻射

漸變顏色屬性

本文實現(xiàn)的弧形漸變是利用線性漸變的實現(xiàn)的，動手前需要了解到 itemStyle.color 屬性的配置與其子屬性表示的意義，可以參考 echarts 配置文檔 series-pie::itemStyle::color。主要了解這幾個屬性：

1. type：漸變類型，支持 linear/radial
2. x, y, x2, y2：向量坐標，即漸變開始的起點坐標 (x, y)，與結(jié)束坐標 (x2, y2)，會影響到 colorStops 中對圖表的著色，需要注意的是值的范圍在 0 ～ 1 之間
3. colorStops：色彩過程，值為元素是{ offset: PERCENTAGE, color: COLOR }的數(shù)組，每個元素表示在什么位置是什么顏色（如，在 30% 的位置是紅色，{ offset: 0.3, color: 'red' }）

實現(xiàn)流程

實現(xiàn)過程主要分為以下幾個步驟：

1. 確定環(huán)形圖旋轉(zhuǎn)展開的起始位置 P_s
2. 確定漸變顏色，0% 處的顏色即起點/終點的顏色，100% 處的顏色即弧線中點的顏色
3. 將環(huán)形圖看成是一個圓 O，圓心為 O₀，圓心坐標為 (x₀, y₀)，半徑 R
   根據(jù)上邊向量坐標值范圍的規(guī)定（必須在 0～1 之間），可以確定圓心坐標 (x₀, y₀) = (0.5, 0.5)，半徑 R = 0.5
4. 將圓 O 置入 echarts 的 linear 漸變坐標系中
5. 計算圓上點 P_s 的坐標 (x_s, y_s)
6. 根據(jù)你的數(shù)據(jù) val（如占比 62%，val === 62）確定弧度 α
   val / 100 = α / 2π，即 α = (val * π) / 50
7. 確定漸變向量的起點 M_s 與其坐標 (x, y)
   以 P_s 為起點沿環(huán)形圖展開方向（如順時針）旋轉(zhuǎn)弧度 α 后得到的圓上點 P_e，M_s 為線段 P_sP_e 的中垂線 L 與 P_sP_e 的交點。此處中垂線一定是穿過圓心O₀的
8. 確定漸變向量的終點 M_e 及其坐標 (x₂, y₂)
   M_e 為中垂線 L 與弧線 P_sP_e 的交點

以上過程建議在實現(xiàn)時通過紙筆畫出坐標系進行坐標求解，過程需要考慮占比大于等于 50 與小于 50 的 兩種情況，前者即弧度 α < π，后者即 α > π。具體求解坐標的過程為高中數(shù)學(xué)內(nèi)容。

以下是以 P_s 為環(huán)形圖起點， P_e 為環(huán)形圖終點在 echarts 的 linear gradients 坐標系中構(gòu)造出的環(huán)形圖結(jié)構(gòu)（也可以參考 GeoGebra 上本人繪制的坐標系統(tǒng)），只需要計算出向量 M_sM_e 的起/終點坐標即可。相關(guān)代碼參考 linear 實現(xiàn)偽弧形漸變

坐標系統(tǒng)

軟件推薦

強烈推薦 GeoGebra 數(shù)學(xué)繪圖軟件，可在線作圖