[Refactor] LinearProgress 重构&优化

[xile611]

1. 进度条的实现方式需要重构

现在进度条和背景条的宽度是一样，通过往左偏移实现进度条的效果

带来的问题：

• 当使用extension-mark在终点绘制节点的时候，动画不一致

const spec4 = {
  type: 'linearProgress',
  tooltip: {
    visible: false
  },
  data: [
    {
      id: 'id0',
      values: [
        {
          type: 'Tradition Industries',
          value: 0.6,
          text: '79.5%'
        }
      ]
    }
  ],
  direction: 'horizontal',
  xField: 'value',
  yField: 'type',
  seriesField: 'type',
  height: 150,
  width: 550,
  cornerRadius: 0,
  bandWidth: 16,
  background: 'transparent',
  track: {
    style: {
      fill: 'transparent',
      background: 'https://p3.dcarimg.com/img/tos-cn-i-dcdx/17135e4a1f74492396ea51ee622f37ff~noop.png',
      fillOpacity: 1
    }
  },
  progress: {
    bottomPadding: 5,
    topPadding: 5,
    leftPadding: 3,
    rightPadding: 3,
    style: {
      height: 6,
      fill: 'rgba(255, 164, 26, 1)'
    }
  },
  axes: [
    {
      orient: 'right',
      type: 'band',
      domainLine: { visible: false },
      tick: { visible: false },
      label: {
        style: {
          text: '0m',
          fontSize: 12,
          fill: 'rgba(255, 255, 255, 0.5)',
          fontFamily: 'D-DIN EXP'
        }
      }
    },
    {
      orient: 'left',
      type: 'band',
      domainLine: { visible: false },
      tick: { visible: false },
      label: {
        style: {
          text: '200m',
          fontFamily: 'D-DIN EXP',
          fontSize: 12,
          fill: 'rgba(255,255, 255, 0.5)'
        }
      }
    },
    {
      orient: 'bottom',
      label: { visible: true, inside: true },
      type: 'linear',
      visible: false,
      grid: {
        visible: false
      }
    }
  ],
  extensionMark: [
    {
      type: 'image',
      dataId: 'id0',
      style: {
        image: 'https://p3.dcarimg.com/img/tos-cn-i-dcdx/f69142fd0e1541e7b1bcba5731bff936~noop.png',
        x: (datum, ctx, elements, dataView) => {
          return ctx.valueToX([datum.value]) - 25;
        },
        y: (datum, ctx, elements, dataView) => {
          return ctx.valueToY([datum.type]) - 15;
        },
        width: 50,
        height: 30
      },
      animationAppear: {
        type: 'moveIn',
        options: {
          direction: 'x'
        }
      },
      animationDisappear: {
        type: 'moveOut',
        options: {
          direction: 'x'
        }
      }
    },
    {
      type: 'text',
      dataId: 'id0',
      visible: true,
      style: {
        x: (datum, ctx, elements, dataView) => {
          return ctx.valueToX([0]);
        },
        y: (datum, ctx, elements, dataView) => {
          return ctx.valueToY([datum.type]) + 15;
        },
        maxLineWidth: (datum, ctx, elements, dataView) => {
          const length = ctx.valueToX([1]) - ctx.valueToX([0]);
          return length;
        },
        fontSize: 12,
        fill: '#999',
        text: '当前值 16,068,954.13 / 目标值 25,000,000.00 / 最大值 30,000,000.00',
        textAlign: 'start',
        textBaseline: 'top',
        dy: 12
      }
    }
  ]
};

• 不能实现左右pading的效果

2. 现在值域必须要是0-1，不支持自定义的范围

比较多的用户反馈值域需要能够设置自定义的范围，减少数据转换

[zamhown]

linearProgress 系列和 bar 系列分别实现了背景图元和柱图元裁剪，bar 系列的实现更新一点，功能应该也更全更好： https://github.com/VisActor/VChart/pull/1305 https://github.com/VisActor/VChart/pull/1816 https://github.com/VisActor/VChart/pull/2240

linearProgress 系列的代码应该尽量复用 bar 系列，linearProgress 可以在 bar 的基础上，增加一些 chart 层级的便利配置：

• min/max
• 统一的外侧圆角（同时修改背景图元和柱图元的圆角，目前 bar 没有类似配置）
• 进度图标注相关的配置

另外可以考虑去掉 linearProgress 系列的 group 图元，并且让 track 图元作为 barBackground 图元的别名？

[Gavinchen92]

多个数据的extensionMark.line只会展示一条