echarts之漸變色設定

2021-10-08 13:50:13 字數 1566 閱讀 1561

用過echarts的朋友們應該都知道,裡邊的一般都是單色的,但是如果ui把它設計成了漸變色,前端該怎麼處理呢?

echarts內建的漸變色生成器echarts.graphic.lineargradient可以用來設定漸變色那該怎麼寫嗎?下面是乙個線性漸變的柱狀圖的例子(此處只附上series中的**,重點是itemstyle中的部分):

series: [               

,

]

)}},,

]

)}},,

] //陣列, 用於配置顏色的漸變過程. 每一項為乙個物件, 包含offset和color兩個引數. offset的範圍是0 ~ 1, 用於表示位置)}

}]

其中barborderradius是用來設定圓角的,顏色部分使用的是echarts內建的漸變色生器echarts.graphic.lineargradient,第乙個引數是4個0,1引數,用於配置漸變色的起止位置,這4個引數依次對應右/下/左/上四個方位,而0 1 0 0則代表漸變色從正下方開始。第二個引數是個陣列,用於配置顏色的漸變過程,每一項為乙個物件, 包含offset和color兩個引數,offset的範圍是0 ~ 1, 用於表示位置。

這個圖中的y軸都是0是因為資料太長,到圖外邊去了,就被遮住了,但是這不重要。圖中的漸變色可能不太明顯,不過仔細看是看的出來漸變的。

在echarts中series屬性中,有乙個itemstyle的屬性是用來設定每一項的樣式的,在itemstyle中的color屬性用於設定顏色,支援單色、線性漸變、徑向漸變和紋理填充等,好像是每個樣式(line、bar等)的都有這個屬性,大家可以在官網檢視。

還是原來那個圖,改變series中的第乙個物件中的color,其中x,x2,y,y2分別表示四個不同的方向( 此處指1 ——> 0的方向 ):

series: [               

, ],

global: false // 預設為 false

}}},,

]

)}},,

] )}

}]

效果圖如下:

這只是柱狀圖漸變色的例子,其他的幾種樣式配置都類似,感興趣的朋友可以自己嘗試哦!

echarts之漸變色設定

在echarts中series屬性中,有乙個itemstyle的屬性是用來設定每一項的樣式的,在itemstyle中的color屬性用於設定顏色,支援單色 線性漸變 徑向漸變和紋理填充等,好像是每個樣式 line bar等 的都有這個屬性,大家可以在官網檢視。還是原來那個圖,改變series中的第乙...

繪製漸變色

迴圈改變的畫素值,請注意每一行使用乙個顏色。int data new int fontimage.getwidth fontimage.getheight fontimage.getrgb data,0,fontimage.getwidth 0,0,fontimage.getwidth fontim...

漸變色原理

引用 作為計算機圖形學中重要的原色混合系統,rgb 紅綠藍 加色系統廣泛應用於發光體,如彩色crt顯示或彩色燈光.這三種單色是得以匹配或生成可見光譜中幾乎所有顏色的最小數量的原色.為了適應不同的顏色深度,使用0 1來表示r,g,b顏色深淺.使用三維座標分別表示rgb.如下圖1所示.這樣原點rgb 0...