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表示顏色