wuba / wuba/react-native-echarts

安装该包进行测试,工程一直报错

Open
#260 4 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

zhangxingchao@zhangxingchaodeMacBook-Pro android % npx react-native log-android
info Starting logkitty
[11:45:23] I | ReactNativeJS ▶︎ Running "RNEchartKline" with {"rootTag":1,"initialProps":{},"fabric":true}

[11:45:25] E | ReactNativeJS ▶︎ [TypeError: Cannot read property '__extends' of undefined]

[11:45:25] E | ReactNativeJS ▶︎ { [TypeError: Cannot read property 'brush' of undefined]
│ componentStack: '\n at EchartsDemo (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.rnechartkline&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:98915:38)\n at RCTView ()\n at View_withRef (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.rnechartkline&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:5590:75)\n at AppContent ()\n at RNCSafeAreaProvider ()\n at SafeAreaProvider (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.rnechartkline&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:131086:24)\n at App (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.rnechartkline&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:98866:54)\n at RCTView ()\n at View_withRef (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.rnechartkline&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:5590:75)\n at RCTView ()\n at View_withRef (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.rnechartkline&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:5590:75)\n at AppContainer (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.rnechartkline&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:51893:25)\n at RNEchartKline(RootComponent) (http://localhost:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.rnechartkline&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server:68857:28)',
└ isComponentError: true }

[11:45:25] E | ReactNativeJS ▶︎ [TypeError: Cannot read property 'brush' of undefined]

[11:45:25] E | ReactNativeJS ▶︎ [TypeError: Cannot read property '__extends' of undefined]

这是我的源码:
App.tsx:
/**

import { StatusBar, StyleSheet, useColorScheme, View } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import EchartsDemo from './src/EchartsDemo';

function App() {
const isDarkMode = useColorScheme() === 'dark';

return (

<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />


);
}

function AppContent() {
return (



);
}

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

export default App;

EchartsDemo.tsx:

import React, { useEffect, useRef } from 'react';
import { View, StyleSheet } from 'react-native';
// Import SVG-only entry to avoid requiring Skia package
import SvgChart, { SVGRenderer } from '@wuba/react-native-echarts/svgChart';
// Use the prebuilt ECharts bundle to avoid tslib ESM issues in Metro
// eslint-disable-next-line @typescript-eslint/no-var-requires
const echarts = require('echarts/dist/echarts');
// Register SVG renderer with the bundled build
echarts.use([SVGRenderer]);

const WIDTH = 360; // Adjust as needed or compute from layout
const HEIGHT = 260;

const EchartsDemo: React.FC = () => {
const chartRef = useRef(null);

useEffect(() => {
let chart: any;
if (chartRef.current) {
// @ts-ignore - RN target, width/height provided explicitly
chart = echarts.init(chartRef.current, 'light', {
renderer: 'svg',
width: WIDTH,
height: HEIGHT,
});

  const option = {
    title: { text: 'ECharts Line Demo' },
    tooltip: { trigger: 'axis' },
    legend: { data: ['Series A'] },
    grid: { left: 32, right: 16, top: 48, bottom: 32 },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: { type: 'value' },
    series: [
      {
        name: 'Series A',
        type: 'line',
        smooth: true,
        data: [120, 200, 150, 80, 70, 110, 130],
        areaStyle: {},
      },
    ],
  } as any;

  chart.setOption(option);
}
return () => chart?.dispose?.();

}, []);

return (



);
};

const styles = StyleSheet.create({
container: {
width: WIDTH,
height: HEIGHT,
alignSelf: 'center',
marginTop: 24,
},
});

export default EchartsDemo;

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 with App.tsx and src/EchartsDemo.tsx, then reproduce the Android failure using npx react-native log-android with the shown example. Trace the __extends and brush errors around the ECharts and SVG renderer setup; done means the sample chart renders without those runtime errors.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.