VChart icon indicating copy to clipboard operation
VChart copied to clipboard

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

Open skie1997 opened this issue 1 year ago • 2 comments

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

skie1997 avatar Nov 21 '24 14:11 skie1997

下周五之前

skie1997 avatar Nov 21 '24 14:11 skie1997

暂不使用,优先级降低

skie1997 avatar Nov 27 '24 12:11 skie1997