在使用echarts繪制圖表時(shí), 如果需要使用漸變色, 則應(yīng)使用echarts內(nèi)置的漸變色生成器echarts.graphic.LinearGradient,echarts的官方API中都沒有對這個(gè)API添加說明文檔, 故用本篇文章來簡略說明其用法.
為方便講解, 先上示例代碼:
{
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#000'},
{offset: 0.5, color: '#888'},
{offset: 1, color: '#ddd'}
]
)
}
}
}
0锈麸，0畏铆，0顽照，1分別代表了右、下、左、上四個(gè)位置的顏色坐標(biāo)
通過修改這4個(gè)參數(shù), 可以實(shí)現(xiàn)不同的漸變方向, 如:
0 1 0 0 代表從正下方向正上方漸變;
1 0 0 1 代表從右上方向左下方漸變,
第5個(gè)參數(shù)則是一個(gè)數(shù)組, 用于配置顏色的漸變過程. 每一項(xiàng)為一個(gè)對象, 包含offset和color兩個(gè)參數(shù). offset的范圍是0 ~ 1, 用于表示位置, color不用多說肯定是表示顏色了. 像示例代碼的配置則表示:
整個(gè)漸變過程是從正上方向正下方變化
起始(offset: 0)顏色為#000, 變化到正中間(offset: 0.5)位置時(shí)顏色為#888, 變化到結(jié)束(offset: 1)位置時(shí)顏色為#ddd.
