wuba / wuba/react-native-echarts

datazoom拖动时数据丢失

Open
#309 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
967
Forks
35
PR merge metrics
No merged PRs in 30d

Description

const option = {
  legend: { show: false },
  xAxis: {
    axisTick: { show: false },
    axisLine: { show: false },
    axisLabel: {
      fontSize: 10,
      color: '#717171',
      customValues: [0, 15, 29],
      alignMinLabel: 'left',
      alignMaxLabel: 'right',
    },
    splitLine: {
      lineStyle: { width: 1, color: 'rgba(0, 0, 0, 0.06)' },
    },
    type: 'category',
    boundaryGap: false,
    data: [
      '2026-06-11',
      '2026-06-12',
      '2026-06-15',
      '2026-06-16',
      '2026-06-17',
      '2026-06-18',
      '2026-06-22',
      '2026-06-23',
      '2026-06-24',
      '2026-06-25',
      '2026-06-26',
      '2026-06-29',
      '2026-06-30',
      '2026-07-01',
      '2026-07-02',
      '2026-07-03',
      '2026-07-06',
      '2026-07-07',
      '2026-07-08',
      '2026-07-09',
      '2026-07-10',
      '2026-07-13',
      '2026-07-14',
      '2026-07-15',
      '2026-07-16',
      '2026-07-17',
      '2026-07-20',
      '2026-07-21',
      '2026-07-22',
      '2026-07-23',
    ],
  },
  yAxis: {
    axisLabel: {
      fontSize: 10,
      color: '#717171',
      inside: true,
      verticalAlign: 'bottom',
      verticalAlignMaxLabel: 'top',
    },
    axisLine: { show: false },
    splitLine: {
      lineStyle: { width: 1, color: 'rgba(0, 0, 0, 0.06)' },
    },
    position: 'right',
    splitNumber: 4,
    type: 'value',
  },
  tooltip: {
    show: true,
    confine: true,
    trigger: 'axis',
    backgroundColor: 'rgba(59, 59, 59, 0.9)',
    borderColor: 'transparent',
    borderWidth: 0,
    textStyle: { color: '#FFF', fontSize: 12, fontWeight: 'normal' },
    axisPointer: {
      type: 'line',
      lineStyle: { width: 1, type: 'solid' },
    },
  },
  title: {
    text: '123321大唐电信市盈率(pe,ttm)',
    left: '4%',
    textStyle: { fontSize: 12, color: 'rgba(0, 0, 0)' },
  },
  grid: {
    left: '5%',
    right: '5%',
    top: '12%',
    bottom: '12%',
    containLabel: true,
  },
  series: [
    {
      type: 'line',
      name: '市盈率(pe,ttm)',
      data: [
        -251.204475, -245.331469, -250.136656, -257.077481, -247.200153,
        -240.526283, -242.394966, -248.534927, -242.394966, -255.475752,
        -260.280938, -246.666243, -257.61139, -257.878345, -252.005339,
        -242.128011, -223.70813, -226.377678, -216.233395, -225.576813,
        -224.242039, -215.699485, -196.478739, -195.41092, -191.139643,
        -182.597089, -183.130999, -187.936185, -182.330134, -184.198818,
      ],
      symbol: 'none',
      color: '#1678FF',
    },
  ],
  dataZoom: [
    {
      type: 'slider',
      show: true,
      showDetail: false,
      xAxisIndex: 0,
      bottom: 0,
      start: 0,
      end: 100,
      left: '7%',
      right: '7%',
      height: 22,
      brushSelect: false,
      borderRadius: 13,
      borderColor: '#f6f6f6',
      dataBackground: {
        areaStyle: { color: '#e0e0e0' },
        lineStyle: { color: '#e0e0e0' },
      },
      selectedDataBackground: {
        areaStyle: { color: '#ccd8f9' },
        lineStyle: { color: '#ccd8f9' },
      },
      handleStyle: {
        color: '#ffffff',
        borderColor: '#e0e0e0',
        borderWidth: 1,
      },
      emphasis: {
        handleStyle: {
          color: '#ffffff',
          borderColor: '#e0e0e0',
          borderWidth: 1,
          shadowBlur: 0,
          shadowColor: 'transparent',
        },
      },
    },
  ],
} as EChartsOption;

当使用 SkiaChart 时 ,配置了datazoom,但是datazoom在拖动时,datazoom 的数据会丢失,datazoom变成无数据

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.

Research direction

Start by reproducing the provided EChartsOption with SkiaChart and its slider dataZoom configuration, then drag the dataZoom handles while observing the chart. The issue is resolved when the dataZoom retains its data and continues displaying the chart after dragging.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
frontend, mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.