mpandroidchart BarDataSet 渐变色 渐变数据条

需求

实现渐变色的仪表盘，进度条为渐变色，但整个数据轴的颜色范围固定，如下两图：

难点

该需求难点在于，正常思路配置仪表盘时，为数据设置渐变色，渐变范围是从起点到数据值（如下图）；而现在要实现的是，渐变范围总是从0开始到终点，进度条就像一个雨刷，刷过的部分渐变色可见，未刷过的部分不可见。

在Echarts官网翻遍了仪表盘的配置项，没有属性可以直接实现，所以思考后绕了个弯，能够实现类似的效果。

思路

需要给仪表盘使用以下从蓝绿到红的渐变色+纯红色的分段颜色：

const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
  {
    offset: 0,
    color: '#00FFE0',
  },
  {
    offset: 1,
    color: '#ab4141',
  },
]);
const colorSet = [
  [0.9, color],
  [1, '#FF0000']
];

可以通过倒转数据增长的方向（顺时针->逆时针），并相应倒转其他一些配置项的方式，以数据增长部分作为遮罩，数据轴背景色的剩余部分看起来就像是渐变增长的数据了。
关键代码：

// colorSet倒过来
// const colorSet = [
//   [0.9, color],
//   [1, '#FF0000']
// ];
const colorSet = [
  [0.1, '#FF0000'],
  [1, color]
];

{
  type: 'gauge',
  startAngle: 0,
  endAngle: 180,
  min: 240, // min和max倒过来
  max: 0,
  clockwise: false, // 设置数据逆时针增长
  itemStyle: {
    color: "#eee", // 用于替代背景色的颜色
    borderColor: "#eee", // 用跟上面一样的颜色遮住露出的背景色
  },
  progress: {
    show: true,
    roundCap: false, // 只适用于平角
    width: 100
  },
  axisLine: {
    roundCap: false, // 只适用于平角
    lineStyle: {
      width: 100,
      color: colorSet // 渐变色作为轴的背景色
    }
  }
}

完整代码

以下代码在ECharts官网示例的在线编辑里可以直接运行。

const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
  {
    offset: 0,
    color: '#00FFE0',
  },
  {
    offset: 1,
    color: '#ab4141',
  },
]);
// colorSet倒过来
const colorSet = [
  [0.1, '#FF0000'],
  [1, color]
];

option = {
  series: [
    {
      type: 'gauge',
      startAngle: 0,
      endAngle: 180,
      min: 240, // min和max倒过来
      max: 0,
      splitNumber: 8,
      clockwise: false, // 设置数据逆时针增长
      itemStyle: {
        color: "#eee", // 用于替代背景色的颜色
        borderColor: "#eee", // 用跟上面一样的颜色遮住露出的背景色
      },
      progress: {
        show: true,
        roundCap: false, // 只适用于平角
        width: 100
      },
      emphasis: {
        // 禁用高亮（从v5.3.0开始支持）低版本可以通过设置color为'inherit'或与普通状态相同颜色实现
        disabled: true 
      },
      pointer: {
        show: false // 隐藏指针
      },
      axisLine: {
        roundCap: false, // 只适用于平角
        lineStyle: {
          width: 100,
          color: colorSet // 渐变色作为轴的背景色
        }
      },
      axisTick: {
        splitNumber: 2,
        lineStyle: {
          width: 2,
          color: '#999'
        }
      },
      splitLine: {
        length: 8,
        lineStyle: {
          width: 3,
          color: '#999',
          roundCap: false
        }
      },
      axisLabel: {
        distance: 105,
        color: '#999',
        fontSize: 20
      },
      title: {
        show: false
      },
      detail: {
        show: false
      },
      data: [
        {
          value: 140
        }
      ]
    }
  ]
};

不适用场景

• 不适用于有点击和悬停高亮的场景（因为实际上数据部分在右边）
• 不适用于圆角（roundCap为true）样式，看起来会像凹进去