在使用echarts繪制圖表時(shí), 如果需要使用漸變色, 則應(yīng)使用echarts內(nèi)置的漸變色生成器echarts.graphic.LinearGradient,echarts的官方API中都沒(méi)有對(duì)這個(gè)API添加說(shuō)明文檔, 故用本篇文章來(lái)簡(jiǎn)略說(shuō)明其用法.

為方便講解, 先上示例代碼:

{
    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)

通過(guò)修改這4個(gè)參數(shù), 可以實(shí)現(xiàn)不同的漸變方向, 如:
0 1 0 0 代表從正下方向正上方漸變;
1 0 0 1 代表從右上方向左下方漸變,

第5個(gè)參數(shù)則是一個(gè)數(shù)組, 用于配置顏色的漸變過(guò)程. 每一項(xiàng)為一個(gè)對(duì)象, 包含offset和color兩個(gè)參數(shù). offset的范圍是0 ~ 1, 用于表示位置, color不用多說(shuō)肯定是表示顏色了. 像示例代碼的配置則表示:
整個(gè)漸變過(guò)程是從正上方向正下方變化
起始(offset: 0)顏色為#000, 變化到正中間(offset: 0.5)位置時(shí)顏色為#888, 變化到結(jié)束(offset: 1)位置時(shí)顏色為#ddd.