wuba / wuba/react-native-echarts

不支持axisLabel.fomatter 中,返回react native组件

Open
#231 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

Describe the bug
不支持axisLabel.fomatter 中,返回react native组件,希望加入一些react native的点击时间

To Reproduce

// Original example: https://echarts.apache.org/examples/en/editor.html?c=line-simple
// The following code is modified from
// https://github.com/apache/echarts-examples/blob/gh-pages/public/examples/ts/line-simple.ts
// under Apache License 2.0.
import { useRef, useEffect } from 'react';
import { StyleSheet, View, Dimensions, Text } from 'react-native';
import { SkiaRenderer, SkiaChart, echarts } from '@wuba/react-native-echarts';

echarts.use([SkiaRenderer]);

const E_HEIGHT = 400;
const E_WIDTH = Dimensions.get('window').width;

export default function App() {
  const skiaRef = useRef<any>(null);
  useEffect(() => {
    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLabel: {
          formatter: value => <Text>{value}</Text>
        }
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line',
        },
      ],
    };
    let chart: any;
    if (skiaRef.current) {
      chart = echarts.init(skiaRef.current, 'light', {
        renderer: 'skia',
        width: E_WIDTH,
        height: E_HEIGHT,
      });
      chart.setOption(option);
    }
    return () => chart?.dispose();
  }, []);

  return (
    <View style={styles.container}>
      <SkiaChart ref={skiaRef} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Expected behavior
显示[object object]

Screenshots

Image

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

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

Reproduce the issue with the provided line-simple example using SkiaChart and an axisLabel.formatter callback that returns a React Native Text component. Inspect how formatter results are handled in the React Native ECharts and Skia rendering path; done means the label no longer renders as [object Object] and the requested React Native interaction behavior is supported.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
data-visualization, mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.