Echarts 如何配置颜色渐变

在根据需求对echarts的options进行配置的时候, 有时候会需要对数据项的颜色进行渐变配置，下面介绍echarts颜色的两种渐变配置方式。

一：线性渐变

1.1.通过new echarts.graphic.LinearGradient(a,b,c,d,data)函数配置线性渐变

a,b,c,d:取值 0|1，代表右下左上四个线性渐变的方向
比如：1，0，0，0  代表颜色从左至右渐变
data表示线性渐变的配置数组。其中每个对象包含两个属性offset:表示该颜色在图块中起始的位置，color,表示渐变颜色

series:[
    {
           
            type: 'pictorialBar',
            symbolSize: [barWidth, 16],
            symbolOffset: [0, -7],
            symbolPosition: 'end',
            z: 10,
            itemStyle:{
              normal:{
                   color: function(params){
                       return new echarts.graphic.LinearGradient(
                           0,0,1,1,[
                                    {
                                        offset:0,
                                        color:barBottomColor[params.dataIndex]
                                    },
                                    {
                                        offset:1,
                                        color:barTopColor[params.dataIndex]
                                    }
                               ]
                           )
                    },
              }  
            },
            zlevel: 2,
            data: newchartVal,
        },
]

1.2.配置式颜色渐变

主要是将series中的对象所包含的data配置数组中的数值换成下面的对象，该对象中的value属性就是data中要配置的对应数值

                   {
                      name:"".
                      value:"",
                      itemStyle:{
                       normal:{
                          color:{
                                type:"linear",
                                x:1,
                                y:0,
                                x2:0,
                                y2:0
                                colorSteps:[
                                    {
                                      offset:0,
                                       color:"#fff"
                                    },
                                    {
                                      offset:0,
                                      color:"black",
                                    }
                                 ]
                              }
                       }
                    }
                   }

series:[
    {
           
            type: 'pictorialBar',
            symbolSize: [barWidth, 16],
            symbolOffset: [0, -7],
            symbolPosition: 'end',
            z: 10,
            
            zlevel: 2,
            data: [
                   {
                      name:"name1".
                      value:"value1",
                      itemStyle:{
                       normal:{
                          color:{
                                type:"linear",
                                x:1,
                                y:0,
                                x2:0,
                                y2:0
                                colorSteps:[
                                    {
                                      offset:0,
                                       color:"#fff"
                                    },
                                    {
                                      offset:0,
                                      color:"black",
                                    }
                                 ]
                              }
                       }
                    }
                   },
                   {
                      name:"name2".
                      value:"value2",
                      itemStyle:{
                       normal:{
                          color:{
                                type:"linear",
                                x:1,
                                y:0,
                                x2:0,
                                y2:0
                                colorSteps:[
                                    {
                                      offset:0,
                                       color:"#fff"
                                    },
                                    {
                                      offset:0,
                                      color:"black",
                                    }
                                 ]
                              }
                       }
                    }
                   }



                ],
        },
]

二：径向渐变

2.1.通过new echarts.graphic.LinearGradient(x,y,r,data)方法进行函数式配置径向渐变

x：代表渐变起始颜色在图形中的x轴坐标，

y：代表渐变起始颜色在图形中的y轴坐标，

r：代表渐变半径，
data:表示渐变配置数组，同线性渐变使用方法

2.2，通过配置进行径向渐变

主要式将series中的配置项中的data属性中的数值换成一下对象

{
    name:"",
    value:"",
    itemStyle:{
        normal:{
          color:{
              type:"radial",
              x:0,
              y:0,
              r:0,
              colorSteps:[
                  {
                      offset:0,
                      color:"#fff",
                  },
                   {
                      offset:1,
                      color:"black",
                  }
              ]
           }
           opacity:0.5,

        }
    }
}