echarts.graphic.LinearGradient 渐变色⽣成器；设置渐变色仪表盘

一、渐变生成器说明

new echarts.graphic.LinearGradient(
    0, 0, 0, 1, 
    [
        { offset: 0, color: '#000' },
        { offset: 0.5, color: '#888' },
        { offset: 1, color: '#ddd' }
    ] 
)

可以看到，使用时传入了5个参数。

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

第5个参数则是一个数组， 用于配置颜色的渐变过程， 每一项为一个对象，包含offset和color两个参数。offset的范围是0 ~ 1， 用于表示位置，color表示颜色。

示例代码的配置则表示：

1. 整个渐变过程是从正上方向正下方变化。

2. 起始(offset: 0)颜色为#000，变化到正中间(offset: 0.5)位置时颜色为#888，变化到结束(offset: 1)位置时颜色为#ddd。

二、使用示例

设置仪表盘轴线颜色渐变：

const colors = ['#C51C1C', '#F5C212', '#1BE274']

// 轴线
axisLine: {
  show: true,
  lineStyle: {
    width: 10,
    // color: [[1, '#D7EAFF']]
    color: [
      [0.25, new echarts.graphic.LinearGradient(
        // 右下左上，渐变色从正下方开始，下面的以此类推
        0, 1, 0, 0,
        [
          { offset: 0, color: colors[0] },
          { offset: 0.5, color: colors[1] }
        ]
      )],
      [0.5, new echarts.graphic.LinearGradient(
        0, 1, 1, 0,
        [
          { offset: 0, color: colors[1] },
          { offset: 1, color: colors[2] }
        ]
      )],
      [0.75, new echarts.graphic.LinearGradient(
        0, 0, 1, 1,
        [
          { offset: 0.0, color: colors[2] },
          { offset: 1, color: colors[1] }
        ]
      )],
      [1, new echarts.graphic.LinearGradient(
        0, 0, 0, 1,
        [
          { offset: 0.5, color: colors[1] },
          { offset: 1, color: colors[0] }
        ]
      )]
    ]
  },
}

效果：

// 轴线
axisLine: {
  show: true,
  lineStyle: {
    width: 10,
    // color: [[1, '#BCEBDC']]
    color: [
      [0.5, new echarts.graphic.LinearGradient(
        // 右下左上，渐变色从左下方开始
        0, 1, 1, 0,
        [
          { offset: 0, color: colors[0] },
          { offset: 0.6, color: colors[1] }
        ]
      )],
      [1, new echarts.graphic.LinearGradient(
        0, 0, 1, 1,
        [
          { offset: 0, color: colors[1] },
          { offset: 0.6, color: colors[2] }
        ]
      )]
    ]
  },
}

效果：

完。记录于2022-6-16.