更新時(shí)間:2022-05-23 09:07:38 來源:動力節(jié)點(diǎn) 瀏覽4411次
使用echarts的時(shí)候遇到一個(gè)問題,就是color中應(yīng)該直接設(shè)置的多個(gè)顏色不能左右,只顯示第一個(gè)顏色
演示中的代碼示例:
選項(xiàng)= {
顏色: [ '#c23531' , '#2f4554' , '#61a0a8' ] ,
xAxis : {
type : 'category' ,
data : [ 'Mon' , 'Tue' , 'Wed' , 'Thu' , 'Fri' , 'Sat' , 'Sun' ]
} ,
yAxis : {
type : 'value'
} ,
系列: [ {
數(shù)據(jù): [ 120、200、150、80、70、110、130 ] ,
輸入:' bar ' } ] } ;_ _ _ _ _ _ _ _ _ _
對應(yīng)的顯示樣式為:
要在這種情況下更改柱形圖的顏色,可以編寫:
option = {
//這里不重要,可以刪除
顏色: [ '#c23531' , '#2f4554' , '#61a0a8' ] ,
xAxis : {
type : 'category' ,
data : [ 'Mon' , 'Tue' , 'Wed' , 'Thu' , 'Fri' , 'Sat' , 'Sun' ]
} ,
yAxis : {
type : '值'
} ,
series : [ {
data : [ 120 , 200 , 150 , 80 , 70 , 110 , 130 ] ,
type : 'bar' ,
itemStyle : {
normal : {
//這里是關(guān)鍵
顏色: function ( params ) {
//注意,如果顏色太少,后面的顏色不會自動循環(huán)。最好再定義幾個(gè)顏色
變量colorList = [ '#c23531' ,'#2f4554' , '#61a0a8' , '#d48265' , '#91c7ae' ,'#749f83' , '#ca8622' ] ;
返回顏色列表[參數(shù). 數(shù)據(jù)索引]
}
}
}
} ]
} ;
如果要自動循環(huán)已有的顏色循環(huán)顯示,可以加一個(gè)判斷:
//向圓柱體循環(huán)添加顏色大于確定的顏色
數(shù)量if ( params .dataIndex > = colorList .length ) {
index = params . 數(shù)據(jù)索引-顏色列表。長度;}
最終渲染:
初級 202925
初級 203221
初級 202629
初級 203743