React Native中怎么畫圖表？下面本篇文章就來給大家介紹一下怎么使用React Native+Echarts開發(fā)一個(gè)真實(shí)的電商數(shù)據(jù)統(tǒng)計(jì)頁面，希望對(duì)大家有所幫助！
平時(shí)寫圖表相關(guān)需求，用得最多的圖表庫就是echarts。echarts 在 web 端的表現(xiàn)已經(jīng)相當(dāng)成熟，官方對(duì)小程序端也提供了解決方案，而在 RN 方面卻沒有相應(yīng)支持。市面上搜到的，大多本質(zhì)還是基于 webview 實(shí)現(xiàn)，而我更傾向于基于 RN 的方案，畢竟原生的體驗(yàn)會(huì)比 Web 的更好一些。
所以我們發(fā)布了@wuba/react-native-echarts 來滿足需求。
接下來我將使用 @wuba/react-native-echarts來做一個(gè)實(shí)際項(xiàng)目中的應(yīng)用，截圖如下：
小提示
如果你已經(jīng)有 APP 包，可以忽略前面的打包流程，直接跳到第 4 步。
試用的完整代碼放在 github 上了，地址：github.com/iambool/Tes…
詳細(xì)使用過程如下
1、開發(fā)環(huán)境搭建
本地搭好 RN 開發(fā)環(huán)境，搭建過程網(wǎng)上一抓一大把，就不贅述了。
2、準(zhǔn)備 RN 工程
因?yàn)槭窃囉茫晕矣?expo 新初始化了一個(gè) rn 工程，叫 TestApp。
npx create-expo-app TestApp
3、build App 包
用命令行生成包 ios android app 包。這里 ios 建議用模擬器（不需要配證書），安卓我是連的真機(jī)
yarn android yarn ios
生成包后，手機(jī)看到已經(jīng)安裝了這個(gè)應(yīng)用，就代表成功啦。
4、 安裝相關(guān)依賴
yarn add @wuba/react-native-echarts echarts yarn add @shopify/react-native-skia yarn add react-native-svg
注意，如果你是在已有工程中安裝，安裝完成后要重新打個(gè)新包，不然缺少原生依賴會(huì)報(bào)錯(cuò)；
5、試用 Skia 模式
@wuba/react-native-echarts 支持兩種渲染模式（Skia 和 Svg），先用 Skia 試一個(gè)簡(jiǎn)單的圖表。大致分為這幾個(gè)小步驟：
引入 echarts、圖表組件等依賴
注冊(cè)圖表組件
創(chuàng)建圖表實(shí)例，并設(shè)置圖表的配置（option）
頁面銷毀時(shí)要記得同步銷毀圖表實(shí)例
具體代碼如下：
import { useRef, useEffect } from 'react';
import { View } from 'react-native';
/**
* 一、引入echarts依賴，這里先試下折線圖
*/
import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
import { SVGRenderer, SkiaChart } from '@wuba/react-native-echarts';
/**
* 二、注冊(cè)需要用到的組件
* SVGRenderer: 是必須注冊(cè)的
* LineChart: 因?yàn)橛玫恼劬€圖，所以要引入LineChart（如果不知道該引入哪些組件，就直接看報(bào)錯(cuò)，報(bào)錯(cuò)說缺什么就加什么）
* GridComponent: 這個(gè)就是報(bào)錯(cuò)的時(shí)候提示，然后我加的hhh
*/
echarts.use([SVGRenderer, LineChart, GridComponent]);
export default () => {
const skiaRef = useRef(null); // Ref用于保存圖表實(shí)例
useEffect(() => {
/**
* 四、圖表配置
*/
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) {
/**
* 五、初始化圖表，指定下寬高
*/
chart = echarts.init(skiaRef.current, 'light', {
renderer: 'svg',
width: 400,
height: 400,
});
chart.setOption(option);
}
/**
* 六、頁面關(guān)閉后要銷毀圖表實(shí)例
*/
return () => chart?.dispose();
}, []);
return (
<View className='index'>
<SkiaChart ref={skiaRef} />
</View>
);
};寫完搖一搖手機(jī)，reload bundle 包時(shí)出現(xiàn)了報(bào)錯(cuò)：
ERROR Invariant Violation: requireNativeComponent: "SkiaDomView" was not found in the UIManager.
google 了一下，說是需要降級(jí)解決。其實(shí)是要跟 expo 版本對(duì)應(yīng)，在安裝依賴的時(shí)候也會(huì)有類似這樣的提示，安裝提示的版本就可以了
于是按照提示做了版本降級(jí)：
@shopify/react-native-skia@0.1.157 react-native-svg@13.4.0
重新構(gòu)建 app 后加載出來了，針不戳；（安卓遮住了點(diǎn)，看來應(yīng)該自適應(yīng)屏幕寬度）
6、試用 Svg 模式
寫個(gè)復(fù)雜點(diǎn)的動(dòng)態(tài)排序柱狀圖，試試 Svg 模式，給 Svg 和 Skia 做個(gè)對(duì)比，完整代碼看這里。
// ...此處省略一些不重要的代碼
// 注冊(cè)需要用到的組件，BarChart-柱狀圖 LegendComponent-圖例
echarts.use([SVGRenderer, BarChart, LegendComponent, GridComponent]);
export default () => {
const skiaRef = useRef(null);
const svgRef = useRef(null);
useEffect(() => {
// Skia模式
const skiaChartData = getData(); // 生成圖表柱狀圖數(shù)據(jù)
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模式
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();
// 定時(shí)器得清理掉，不然退出頁面后還會(huì)運(yùn)行
clearInterval(skiaInter);
clearInterval(svgInter);
};
}, []);
return (
<View>
<Text>skia如下</Text>
<SkiaChart ref={skiaRef} />
<Text>svg如下</Text>
<SvgChart ref={svgRef} />
</View>
);
};Skia 和 Svg 模式，肉眼看不出明顯差別
| iOS | Android |
|---|---|
7、封裝 Chart 組件
效果不錯(cuò)，不過每次使用都要把一堆東西引進(jìn)去好煩，先簡(jiǎn)單封裝下吧
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';
// 注冊(cè)需要用到的組件
echarts.use([
DataZoomComponent,
SVGRenderer,
BarChart,
GridComponent,
LegendComponent,
ToolboxComponent,
TooltipComponent,
TitleComponent,
PieChart,
LineChart,
]);
// 圖表默認(rèn)寬高
const CHART_WIDTH = Dimensions.get('screen').width; // 默認(rèn)用手機(jī)屏幕寬度
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} />;
// 對(duì)外只暴露這哥倆就行
export { SkiaChart, SvgChart };8、多個(gè)圖表使用
封裝好了，咱就寫個(gè)多圖表同時(shí)使用的頁面看看效果。這里寫了個(gè)“電商數(shù)據(jù)分析”頁面，分別有折線圖、柱狀圖、餅圖。下方是主要代碼，用的 svg 模式，詳細(xì)代碼見這里。
// 頁面代碼
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';
// 開啟圖表loading
const showChartLoading = (chart) =>
chart.showLoading('default', {
maskColor: '#305d9e',
});
// 關(guān)閉圖表loading
const hideChartLoading = (chart) => chart.hideLoading();
export default () => {
const [actual, setActual] = useState(defaultActual); // 記錄實(shí)時(shí)數(shù)據(jù)
useEffect(() => {
// 假設(shè)循環(huán)請(qǐng)求數(shù)據(jù)
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);
// 模擬數(shù)據(jù)請(qǐng)求
setTimeout(() => {
myChart.setOption({
series: getLineData,
});
hideChartLoading(myChart);
}, 1000);
}, []);
const onInitUserChart = useCallback((myChart) => {
// 模擬數(shù)據(jù)請(qǐng)求，跟onInitLineChart類似
}, []);
const onInitSaleChart = useCallback((myChart) => {
// 模擬數(shù)據(jù)請(qǐng)求，跟onInitLineChart類似
}, []);
const onInitStatusChart = useCallback((myChart) => {
// 模擬數(shù)據(jù)請(qǐng)求，跟onInitLineChart類似
}, []);
const chartList = [
['訂單走勢(shì)', lineOption, onInitLineChart],
['用戶統(tǒng)計(jì)', userAnaly, onInitUserChart],
['各品類銷售統(tǒng)計(jì)', salesVolume, onInitSaleChart],
['訂單狀態(tài)統(tǒng)計(jì)', salesStatus, onInitStatusChart],
];
return (
<ScrollView style={styles.index}>
<StatusBar style='light' />
<View>
<View style={styles.index_panel_header}>
<Text style={styles.index_panel_title}>實(shí)時(shí)數(shù)據(jù)</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>
);
};重新加載 bundle，看看效果圖
| iOS | Android |
|---|---|
渲染出來后，iOS 上交互很絲滑，安卓上交互時(shí)感覺偶爾會(huì)有卡頓（不會(huì)是因?yàn)槲沂謾C(jī)太差吧…）。
再換 Skia 模式看看
emmm 雖然可以，但是好像中文不能正常顯示，安卓上中文都沒有顯示，iOS 則是亂碼。看了下文檔，目前 skia 在安卓端還不支持中文，在 iOS 端可以通過設(shè)置字體為 'PingFang SC'顯示中文，比如：
const option = {
title: {
text: '我是中文',
textStyle: {
fontFamily: 'PingFang SC', // 指定字體類型
},
},
};但是每個(gè)顯示中文的地方都要設(shè)置字體……那還是先用 svg 吧，我懶。
總結(jié)
使用了一段時(shí)間后，我總結(jié)了下：
支持度上，@wuba/react-native-echarts 除了 GL 系列、地圖類圖表還不支持外，其余類型的圖表都支持，對(duì)于日常業(yè)務(wù)來說已經(jīng)非常 enough 了。echarts 各種類型的圖表實(shí)現(xiàn)，都可以在taro-playground上找到；
交互上，iOS 很絲滑，安卓有時(shí)會(huì)出現(xiàn)掉幀的情況；
性能上，還挺好的。
個(gè)人試了下，不是超大數(shù)據(jù)量就不會(huì)有什么問題，但是數(shù)據(jù)量太大的時(shí)候（比如畫大數(shù)據(jù)量的熱力圖），渲染速度明顯下降了很多，這是一個(gè)等待官方去優(yōu)化的點(diǎn)。
另外頁面內(nèi)圖表多的話，真機(jī)調(diào)試時(shí)加載速度會(huì)變慢，建議先用模擬器。
中文支持，Svg 模式支持中文，但 Skia 模式目前還不可以。
