VChart
VChart copied to clipboard
[Refactor] LinearProgress 重构&优化
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,不支持自定义的范围
比较多的用户反馈值域需要能够设置自定义的范围,减少数据转换
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 图元的别名?
多个数据的extensionMark.line只会展示一条