VisActor / VisActor/VChart

[Bug] 移动端滚动条,滑动到最后右侧,会跳变到最左侧

Open
#3,449 2 comments 0 reactions 1 assignee View on GitHub

@skie1997 is already working on this.

Since Nov 21, 2024.

bug
Dominant language
TypeScript
Stars
1.8k
Forks
221
Avg merge
1d 6h
Merged PRs (30d)
26

Description

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

20241121223329_rec_

Expected Behavior

不跳变

Environment
- OS:
- Browser:
- Framework:
Any additional comments?

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.