📈
React NativeでApache EChartsを使用する
React Native バージョンの Apache Echarts で、 react-native-svg と react-native-skia を基にしています。この素晴らしいライブラリは、WebViewベースのソリューションに比べてパフォーマンスを大幅に向上させます。
詳しいドキュメンテーションは こちら をご覧ください。
について
- 🔥 Apache EChartsと同じ使用方法
- 🎨 豊富なチャート、ほぼすべての使用シナリオをカバー
- ✨ 任意のレンダリングライブラリ:Skia または SVG
- 🚀 ウェブでコードを再利用
- 📱 タップ、ドラッグ、ズームなどのジェスチャーをサポート
インストール
yarn add @wuba/react-native-echarts echarts
あなたのニーズに合わせて、 react-native-svg または react-native-skia をインストールしてください。
echarts, react-native-svg, react-native-skia の最新バージョンを推奨します
使用方法
EChartsのほとんどのチャートはサポートされており、使用方法はほぼ一貫しています。さらに多くの使用事例やデモのプレビューについては、Taro Playground アプリをダウンロードできます。
例
// 好きなレンダラーを選択します
// import { SkiaChart, SVGRenderer } from '@wuba/react-native-echarts';
import { SvgChart, SVGRenderer } from '@wuba/react-native-echarts';
import * as echarts from 'echarts/core';
import { useRef, useEffect } from 'react';
import {
BarChart,
} from 'echarts/charts';
import {
TitleComponent,
TooltipComponent,
GridComponent,
} from 'echarts/components';
// 拡張機能を登録
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
SVGRenderer,
// ...
BarChart,
])
const E_HEIGHT = 250;
const E_WIDTH = 300;
// 初期化
function ChartComponent({ option }) {
const chartRef = useRef<any>(null);
useEffect(() => {
let chart: any;
if (chartRef.current) {
// @ts-ignore
chart = echarts.init(chartRef.current, 'light', {
renderer: 'svg',
width: E_WIDTH,
height: E_HEIGHT,
});
chart.setOption(option);
}
return () => chart?.dispose();
}, [option]);
// 好きなチャートコンポーネントを選択します
// return <SkiaChart ref={chartRef} />;
return <SvgChart ref={chartRef} />;
}
// コンポーネントの使用
export default function App() {
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
},
],
}
return <ChartComponent option={option} />
}
SvgChart または SkiaChart のどちらか一方だけを使用します
import SvgChart, { SVGRenderer } from '@wuba/react-native-echarts/svgChart';
もしくは
import SkiaChart, { SVGRenderer } from '@wuba/react-native-echarts/skiaChart';
貢献
貢献ガイド を参照して、リポジトリへの貢献方法と開発のワークフローについて学んでください。
Discussion