[JavaScript知识库][echart] 渐变内置生成器echarts.graphic.LinearGradient

const option = {
  title:{
    text:'▎商家销售统计',
    textStyle:{
      fontSize:30
    },
    left:20,
    top:20
  },
  // 配置图标的位置  不包含坐标轴中的文字
  grid:{
    top:'20%',
    left:'3%',
    bottom:'3%',
    right:'6%',
    containLabel:true // 包含坐标轴中的文字
  },
  xAxis:{
    type:'value',
  },
  yAxis:{
    type:'category',
    data:sellerName
  },
  series:[
    {
      type:'bar', // 柱状图
      data:sellerValue,
      barWidth:66,
      label:{
        show:true, // 显示数值
        position:'right',
        textStyle:{
          color:'#fff'
        }
      },
      itemStyle:{
        barBorderRadius:[0,33,33,0],
        // 指明颜色渐变的方向
        color:new this.$echarts.graphic.LinearGradient(0,0,1,0,[
          {
            offset:0,
            color:'#5052EE'
          },
          {
            offset:1,
            color:'#AB6EE5'
          }
        ])
      }
    }
  ]
}

前4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始.

第5个参数则是一个数组, 用于配置颜色的渐变过程. 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示颜色过渡位置, color表示颜色

echart 渐变内置生成器echarts.graphic.LinearGradient