Solusi Luar Biasa untuk React Native Charts di tahun 2023 | oleh Chen Zhiqing | Maret 2023 – Beragampengetahuan

Pustaka bagan yang paling umum digunakan untuk menulis kebutuhan terkait bagan adalah echart. Kinerja echart di situs web cukup matang, dan solusi resmi juga disediakan untuk sisi applet, tetapi tidak ada dukungan terkait di RN. Sebagian besar pencarian di pasar masih didasarkan pada esensi implementasi tampilan web, dan saya lebih suka solusi berbasis RN, karena pengalaman asli akan lebih baik daripada Web.

Jadi kami merilis @wuba/react-native-echarts untuk memenuhi permintaan. Teman-teman yang tertarik dengan prinsip realisasi silahkan klik disini.

Hari ini saya coba gunakan @wuba/react-native-echarts Buat aplikasi dunia nyata seperti tangkapan layar di bawah ini.

• Jika Anda sudah memiliki paket APP, Anda dapat mengabaikan proses pengemasan sebelumnya dan langsung memulai dari langkah 4.
• Kode lengkap untuk uji coba ada di GitHub: https://github.com/iambool/TestApp

Proses membangun lingkungan pengembangan RN lokal tersedia secara online, jadi saya tidak akan mengulanginya di sini. Bisa googling 🙂

Karena ini adalah uji coba, saya menggunakan expo untuk menginisialisasi proyek baru bernama TestApp.

npx create-expo-app TestApp

Hasilkan bundel aplikasi ios dan android menggunakan baris perintah. Disarankan untuk menggunakan simulator untuk iOS (tidak perlu mencocokkan sertifikat), dan saya terhubung ke mesin nyata untuk Android.

yarn android

yarn ios

Setelah paket dibuat, aplikasi seperti yang ditunjukkan di bawah ini telah dipasang di ponsel, menandakan bahwa pembuatan berhasil.

yarn add @wuba/react-native-echarts echarts
yarn add @shopify/react-native-skia
yarn add react-native-svg

Catatan: Jika diinstal di proyek yang sudah ada, paket harus dibangun kembali setelah penginstalan selesai, jika tidak, kesalahan akan dilaporkan jika ada kekurangan dependensi asli.

@wuba/react-native-echarts mendukung dua mode rendering (Skia dan Svg), pertama coba buat bagan sederhana dengan Skia. Dibagi menjadi langkah-langkah kecil ini:

• Perkenalkan dependensi seperti echart dan komponen bagan.
• Daftarkan komponen bagan.
• Buat instance bagan dan atur opsi.
• Hancurkan instance grafik secara serempak saat halaman dihancurkan.

Kode spesifiknya adalah sebagai berikut:

import { useRef, useEffect } from 'react';
import { View } from 'react-native';
/**
* 1. Import the echarts dependency, this example first tries the line chart
*/
import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
import { SVGRenderer, SkiaChart } from '@wuba/react-native-echarts';
/**
* 2. Register the required components
* SVGRenderer: it is required to register
* LineChart: because we want to show the line chart, we have to import LineChart
*      - If you don't know which components to import, just look at the error report and add whatever the error says is missing
* GridComponent: This is the prompt when the error is reported, and then I added the, ha ha
*/
echarts.use([SVGRenderer, LineChart, GridComponent]);
export default () => {
const skiaRef = useRef(null); // Ref for saving chart instances
useEffect(() => {
/**
* 3. chart option
*/
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
},
],
};
let chart;
if (skiaRef.current) {
/**
* 4. Initialize the chart, specifying the lower width and height
*/
chart = echarts.init(skiaRef.current, 'light', {
renderer: 'svg',
width: 400,
height: 400,
});
chart.setOption(option);
}
/**
* 5. To destroy the chart instance after the page is closed
*/
return () => chart?.dispose();
}, []);
return (
<View className='index'>
<SkiaChart ref={skiaRef} />
</View>
);
};

Setelah menulis kode, goyangkan ponsel, muat ulang paket bundel, dan laporkan kesalahan:

Error Constant Violation: requireNativeComponent: ‘SkiaDomView’ tidak ditemukan di UIManager.

Saya googling dan katanya perlu downgrade versi. Itu harus sesuai dengan versi pameran, dan akan ada prompt serupa saat menginstal dependensi, cukup instal versi yang diminta.

Jadi saya melakukan penurunan versi seperti yang diinstruksikan:

yarn add @shopify/react-native-skia@0.1.157
yarn add react-native-svg@13.4.0

Itu dimuat setelah membangun kembali aplikasi, dan itu bagus. (Namun, Android menutupi poin-poin penting. Sepertinya lebar layar harus adaptif.)

Gunakan Svg untuk menulis bagan batang pengurutan dinamis yang lebih kompleks, dan bandingkan Svg dan Skia. Kode lengkapnya ada di sini.

// ...Some unimportant code is omitted here
// Register the required components, such as BarChart and LegendComponent
echarts.use([SVGRenderer, BarChart, LegendComponent, GridComponent]);
export default () => {
const skiaRef = useRef(null);
const svgRef = useRef(null);
useEffect(() => {
// Skia mode
const skiaChartData = getData(); // Generate chart bar data
let skiaChart;
let skiaInter;
if (skiaRef.current) {
skiaChart = echarts.init(skiaRef.current, 'light', {
renderer: 'svg',
width: 300,
height: 300,
});
skiaChart.setOption(getDefaultOption(skiaChartData));
setTimeout(function () {
run(skiaChart, skiaChartData);
}, 0);
skiaInter = setInterval(function () {
run(skiaChart, skiaChartData);
}, 3000);
}
// Svg mode
const svgChartData = getData();
let svgChart;
let svgInter;
if (svgRef.current) {
svgChart = echarts.init(svgRef.current, 'light', {
renderer: 'svg',
width: 300,
height: 300,
});
svgChart.setOption(getDefaultOption(svgChartData));
setTimeout(function () {
run(svgChart, svgChartData);
}, 0);
svgInter = setInterval(function () {
run(svgChart, svgChartData);
}, 3000);
}
return () => {
skiaChart?.dispose();
svgChart?.dispose();
// The timer has to be cleaned up, otherwise it will still run after exiting the page
clearInterval(skiaInter);
clearInterval(svgInter);
};
}, []);
return (
<View>
<Text>skia</Text>
<SkiaChart ref={skiaRef} />
<Text>svg</Text>
<SvgChart ref={svgRef} />
</View>
);
};

Saya tidak bisa membedakan antara kedua mode dengan mata telanjang.

Sejauh ini, efeknya masih bagus, tetapi setiap kali saya menggunakan banyak barang untuk diimpor, itu sangat mengganggu saya. Mari kita rangkum secara singkat:

import { useRef, useEffect } from 'react';
import * as echarts from 'echarts/core';
import { BarChart, LineChart, PieChart } from 'echarts/charts';
import {
DataZoomComponent,
GridComponent,
LegendComponent,
TitleComponent,
ToolboxComponent,
TooltipComponent,
} from 'echarts/components';
import {
SVGRenderer,
SvgChart as _SvgChart,
SkiaChart as _SkiaChart,
} from '@wuba/react-native-echarts';
import { Dimensions } from 'react-native';
// Register the required components
echarts.use([
DataZoomComponent,
SVGRenderer,
BarChart,
GridComponent,
LegendComponent,
ToolboxComponent,
TooltipComponent,
TitleComponent,
PieChart,
LineChart,
]);
// Default width and height of the chart
const CHART_WIDTH = Dimensions.get('screen').width; // Default with the phone screen width
const CHART_HEIGHT = 300;
const Chart = ({
option,
onInit,
width = CHART_WIDTH,
height = CHART_HEIGHT,
ChartComponent,
}) => {
const chartRef = useRef(null);
useEffect(() => {
let chart;
if (chartRef.current) {
chart = echarts.init(chartRef.current, 'light', {
renderer: 'svg',
width,
height,
});
option && chart.setOption(option);
onInit?.(chart);
}
return () => chart?.dispose();
}, [option]);
return <ChartComponent ref={chartRef} />;
};
const SkiaChart = (props) => <Chart {...props} ChartComponent={_SkiaChart} />;
const SvgChart = (props) => <Chart {...props} ChartComponent={_SvgChart} />;
// Just export these two guys
export { SkiaChart, SvgChart };

Dengan membungkus itu, mari kita menulis halaman dengan banyak bagan dan lihat cara kerjanya. Ini adalah halaman “Analisis Data E-Commerce”, termasuk diagram garis, diagram batang, dan diagram lingkaran. Berikut ini adalah kode utama yang ditulis dalam mode svg, dan kode detailnya ada di sini.

import { SkiaChart } from '../../components/Chart';
import { ScrollView, Text, View } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { useCallback, useEffect, useState } from 'react';
import {
defaultActual,
lineOption,
salesStatus,
salesVolume,
userAnaly,
getLineData,
} from './contants';
import styles from './styles';
// Turn on chart loading
const showChartLoading = (chart) =>
chart.showLoading('default', {
maskColor: '#305d9e',
});
// Close chart loading
const hideChartLoading = (chart) => chart.hideLoading();
export default () => {
const [actual, setActual] = useState(defaultActual); // Recording real-time data
useEffect(() => {
// Assuming a recurring request for data
const interv = setInterval(() => {
const newActual = [];
for (let it of actual) {
newActual.push({
...it,
num: it.num + Math.floor((Math.random() * it.num) / 100),
});
}
setActual(newActual);
}, 200);
return () => clearInterval(interv);
}, [actual]);
const onInitLineChart = useCallback((myChart) => {
showChartLoading(myChart);
// Simulation of data requests
setTimeout(() => {
myChart.setOption({
series: getLineData,
});
hideChartLoading(myChart);
}, 1000);
}, []);
const onInitUserChart = useCallback((myChart) => {
// Simulate data request, similar to onInitLineChart
}, []);
const onInitSaleChart = useCallback((myChart) => {
// Simulate data request, similar to onInitLineChart
}, []);
const onInitStatusChart = useCallback((myChart) => {
// Simulate data request, similar to onInitLineChart
}, []);
const chartList = [
['订单走势', lineOption, onInitLineChart],
['用户统计', userAnaly, onInitUserChart],
['各品类销售统计', salesVolume, onInitSaleChart],
['订单状态统计', salesStatus, onInitStatusChart],
];
return (
<ScrollView style={styles.index}>
<StatusBar style='light' />
<View>
<View style={styles.index_panel_header}>
<Text style={styles.index_panel_title}>实时数据</Text>
</View>
<View style={styles.index_panel_content}>
{actual.map(({ title, num, unit }) => (
<View key={title} style={styles.sale_item}>
<View style={styles.sale_item_cell}>
<Text style={styles.sale_item_text}>{title}</Text>
</View>
<View style={[styles.sale_item_cell, styles.num]}>
<Text style={styles.sale_item_num}>{num}</Text>
</View>
<View style={[styles.sale_item_cell, styles.unit]}>
<Text style={styles.sale_item_text}>{unit}</Text>
</View>
</View>
))}
</View>
</View>
{chartList.map(([title, data, callback]) => (
<View key={title}>
<View style={styles.index_panel_header}>
<Text style={styles.index_panel_title}>{title}</Text>
</View>
<View style={styles.index_panel_content}>
<SkiaChart option={data} onInit={callback} />
</View>
</View>
))}
</ScrollView>
);
};

Muat ulang paket dan lihat hasilnya

Setelah rendering, interaksi iOS sangat lancar, dan interaksi Android terasa macet (bukankah ponsel saya terlalu buruk?  …)

Coba mode Skia lagi

Nah, meskipun mungkin, sepertinya karakter Cina tidak dapat ditampilkan secara normal, karakter Cina Android tidak ditampilkan, dan karakter iOS kacau. Setelah membaca dokumen tersebut, skia saat ini tidak mendukung bahasa Mandarin di sisi Android. Kita dapat menampilkan bahasa Mandarin dengan menyetel font ke ‘PingFang SC’ di sisi iOS, misalnya:

const option = {
title: {
text: '我是中文',
textStyle: {
fontFamily: 'PingFang SC', // setting the font type
},
},
};

Tapi setiap tempat yang menampilkan bahasa Mandarin perlu diatur fontnya.. Kemudian gunakan svg dulu, saya malas.