作者：iambool
前言
平时写图表相干需要，用得最多的图表库就是echarts。echarts 在 web 端的体现曾经相当成熟，官网对小程序端也提供了解决方案，而在 RN 方面却没有相应反对。市面上搜到的，大多实质还是基于 webview 实现，而我更偏向于基于 RN 的计划，毕竟原生的体验会比 Web 的更好一些。
所以咱们公布了@wuba/react-native-echarts 来满足需要。对实现原理感兴趣的能够看这里
接下来我将应用 @wuba/react-native-echarts来做一个理论我的项目中的利用，截图如下：
小提示
- 如果你曾经有 APP 包，能够疏忽后面的打包流程，间接跳到第 4 步。
- 试用的残缺代码放在 github 上了，地址：https://github.com/iambool/TestApp
具体应用过程如下
1、开发环境搭建
本地搭好 RN 开发环境，搭建过程网上一抓一大把，就不赘述了。
2、筹备 RN 工程
因为是试用，所以我用 expo 新初始化了一个 rn 工程，叫 TestApp。
npx create-expo-app TestApp3、build App 包
用命令行生成包 ios android app 包。这里 ios 倡议用模拟器（不须要配证书），安卓我是连的真机
yarn androidyarn ios生成包后，手机看到曾经装置了这个利用，就代表胜利啦。
4、 装置相干依赖
yarn add @wuba/react-native-echarts echartsyarn add @shopify/react-native-skiayarn add react-native-svg留神，如果你是在已有工程中装置，装置实现后要从新打个新包，不然短少原生依赖会报错；
5、试用 Skia 模式
@wuba/react-native-echarts 反对两种渲染模式（Skia 和 Svg），先用 Skia 试一个简略的图表。大抵分为这几个小步骤：
- 引入 echarts、图表组件等依赖
- 注册图表组件
- 创立图表实例，并设置图表的配置（option）
- 页面销毁时要记得同步销毁图表实例
具体代码如下：
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';/** * 二、注册须要用到的组件 * SVGRenderer: 是必须注册的 * LineChart: 因为用的折线图，所以要引入LineChart（如果不晓得该引入哪些组件，就间接看报错，报错说缺什么就加什么） * GridComponent: 这个就是报错的时候提醒，而后我加的hhh */echarts.use([SVGRenderer, LineChart, GridComponent]);export default () => { const skiaRef = useRef(null); // Ref用于保留图表实例 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); } /** * 六、页面敞开后要销毁图表实例 */ return () => chart?.dispose(); }, []); return ( <View className='index'> <SkiaChart ref={skiaRef} /> </View> );};写完摇一摇手机，reload bundle 包时呈现了报错：
ERROR Invariant Violation: requireNativeComponent: "SkiaDomView" was not found in the UIManager.
google 了一下，说是须要降级解决。其实是要跟 expo 版本对应，在装置依赖的时候也会有相似这样的提醒，装置提醒的版本就能够了
于是依照提醒做了版本降级：
@shopify/react-native-skia@0.1.157react-native-svg@13.4.0从新构建 app 后加载进去了，针不戳；（安卓遮住了点，看来应该自适应屏幕宽度）
| iOS | Android |
|---|---|
6、试用 Svg 模式
写个简单点的动静排序柱状图，试试 Svg 模式，给 Svg 和 Skia 做个比照，残缺代码看这里。
// ...此处省略一些不重要的代码// 注册须要用到的组件，BarChart-柱状图 LegendComponent-图例echarts.use([SVGRenderer, BarChart, LegendComponent, GridComponent]);export default () => { const skiaRef = useRef(null); const svgRef = useRef(null); useEffect(() => { // Skia模式 const skiaChartData = getData(); // 生成图表柱状图数据 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(); // 定时器得清理掉，不然退出页面后还会运行 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 组件
成果不错，不过每次应用都要把一堆货色引进去好烦，先简略封装下吧
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';// 注册须要用到的组件echarts.use([ DataZoomComponent, SVGRenderer, BarChart, GridComponent, LegendComponent, ToolboxComponent, TooltipComponent, TitleComponent, PieChart, LineChart,]);// 图表默认宽高const CHART_WIDTH = Dimensions.get('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} />;// 对外只裸露这哥俩就行export { SkiaChart, SvgChart };8、多个图表应用
封装好了，咱就写个多图表同时应用的页面看看成果。这里写了个“电商数据分析”页面，别离有折线图、柱状图、饼图。下方是次要代码，用的 svg 模式，具体代码见这里。
// 页面代码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';// 开启图表loadingconst showChartLoading = (chart) => chart.showLoading('default', { maskColor: '#305d9e', });// 敞开图表loadingconst hideChartLoading = (chart) => chart.hideLoading();export default () => { const [actual, setActual] = useState(defaultActual); // 记录实时数据 useEffect(() => { // 假如循环申请数据 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); // 模仿数据申请 setTimeout(() => { myChart.setOption({ series: getLineData, }); hideChartLoading(myChart); }, 1000); }, []); const onInitUserChart = useCallback((myChart) => { // 模仿数据申请，跟onInitLineChart相似 }, []); const onInitSaleChart = useCallback((myChart) => { // 模仿数据申请，跟onInitLineChart相似 }, []); const onInitStatusChart = useCallback((myChart) => { // 模仿数据申请，跟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> );};从新加载 bundle，看看效果图
| iOS | Android |
|---|---|
渲染进去后，iOS 上交互很丝滑，安卓上交互时感觉偶然会有卡顿（不会是因为我手机太差吧…）。
再换 Skia 模式看看
emmm 尽管能够，然而如同中文不能失常显示，安卓上中文都没有显示，iOS 则是乱码。看了下文档，目前 skia 在安卓端还不反对中文，在 iOS 端能够通过设置字体为 'PingFang SC'显示中文，比方：
const option = { title: { text: '我是中文', textStyle: { fontFamily: 'PingFang SC', // 指定字体类型 }, },};然而每个显示中文的中央都要设置字体……那还是先用 svg 吧，我懒。
总结
应用了一段时间后，我总结了下：
- 反对度上，@wuba/react-native-echarts 除了 GL 系列、地图类图表还不反对外，其余类型的图表都反对，对于日常业务来说曾经十分 enough 了。echarts 各种类型的图表实现，都能够在taro-playground上找到；
- 交互上，iOS 很丝滑，安卓有时会呈现掉帧的状况；
性能上，还挺好的。
- 集体试了下，不是超大数据量就不会有什么问题，然而数据量太大的时候（比方画大数据量的热力求），渲染速度显著降落了很多，这是一个期待官网去优化的点。
- 另外页面内图表多的话，真机调试时加载速度会变慢，倡议先用模拟器。
- 中文反对，Svg 模式反对中文，但 Skia 模式目前还不能够。
以上仅代表个人观点，有问题欢送交换。