VChart
VChart copied to clipboard
[Bug] 移动端滚动条,滑动到最后右侧,会跳变到最左侧
Version
1.12.12
Link to Minimal Reproduction
dongchedi
Steps to Reproduce
{
type: 'area',
padding: [0, 0, 0, 0],
background: '#fff',
scrollBar: [
{
orient: 'bottom',
height: 0,
// start: 0,
// end: 0.2,
roamDrag: {
enable: true,
rate: 0.1,
},
},
],
data: {
values: [
{
date: '10/30',
percent: 20,
},
{
date: '10/31',
percent: 80,
},
{
date: '11/01',
percent: 40,
isError: true,
},
{
date: '11/02',
percent: 90,
},
{
date: '11/03',
percent: 25,
isError: true,
},
{
date: '11/04',
percent: 40,
isError: true,
},
{
date: '11/05',
percent: 90,
},
{
date: '11/06',
percent: 25,
isError: true,
},
],
},
crosshair: {
xField: {
visible: false,
},
},
tooltip: {
visible: false,
},
xField: 'date',
yField: 'percent',
axes: [
{
type: 'linear',
orient: 'left',
range: {
min: 0,
max: 100,
},
grid: {
visible: true,
style: {
lineDash: [5, 5],
stroke: '#9DA2B2',
lineWidth: 0.5,
},
},
label: {
// formatMethod: (val: string) => `${val}${Number(val) === 0 ? '' : '%'}`,
style: {
fill: '#979AA8',
fontSize: 10,
},
space: 6,
offset: 0,
},
},
{
type: 'band',
orient: 'bottom',
sampling: false,
bandSize: 50,
// bandSize: (((lynx.__globalProps.contentWidth || 375) - 40) * 37) / 366, // bandSize在不同设备下数值不同,这里通过比例计算保证显示5条数据
label: {
style: {
fill: '#979AA8',
fontSize: 10,
},
autoIndent: true,
// formatMethod: (label: string) => {
// return {
// type: 'rich',
// text: [
// {
// text: `${label}`,
// fontSize: 10,
// },
// {
// image: getImage(values.find((v) => v.date === label)?.isError),
// width: 10,
// height: 10,
// },
// ],
// }
// },
space: 5,
},
domainLine: {
style: {
stroke: '#9DA2B2',
lineWidth: 0.7,
},
},
tick: {
tickSize: 0,
},
paddingInner: 0.5,
paddingOuter: 0,
},
],
markLine: [
{
y: 90,
label: {
visible: true,
position: 'end',
refY: -6,
text: '合格线:90%',
style: {
textAlign: 'right',
fill: '#FCB40A',
fontSize: 8,
},
labelBackground: {
visible: false,
},
},
line: {
style: {
stroke: '#FCB40A',
lineDash: [5, 5],
lineWidth: 0.5,
},
},
endSymbol: {
visible: false,
},
},
],
point: {
style: {
size: 9, // 数据点大小
fill: '#FFDAAD', // 数据点填充颜色
stroke: '#fff', // 数据点边框颜色
lineWidth: 1,
shadowColor: 'rgba(0,0,0,0.12)',
shadowOffsetX: 2,
shadowOffsetY: 4,
shadowBlur: 5,
},
},
label: {
visible: true,
offset: 1,
// formatMethod: (v: string) => `${v}%`,
position: 'top',
style: {
fontSize: 8,
fill: '#606370',
lineWidth: 0,
},
animation: false,
},
line: {
visible: false,
},
area: {
style: {
fill: {
gradient: 'linear',
x0: 0.5,
y0: 0,
x1: 0.5,
y1: 1,
stops: [
{ offset: 0.311, color: 'rgba(240, 150, 34, 1)' }, // 渐变起始点的颜色
{ offset: 1, color: 'rgba(240, 150, 34, 0)' }, // 渐变结束点的颜色
],
},
},
},
}
Current Behavior
Expected Behavior
不跳变
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
No response
下周五之前
暂不使用,优先级降低