关于react-native:2023-年了React-Native-中怎么画图表

作者：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 TestApp

3、build App 包

用命令行生成包 ios android app 包。这里 ios 倡议用模拟器（不须要配证书），安卓我是连的真机

yarn android
yarn ios

生成包后，手机看到曾经装置了这个利用，就代表胜利啦。

4、装置相干依赖

yarn add @wuba/react-native-echarts echarts
yarn add @shopify/react-native-skia
yarn 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.157
react-native-svg@13.4.0

从新构建 app 后加载进去了，针不戳；（安卓遮住了点，看来应该自适应屏幕宽度）

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 模式，肉眼看不出显著差异

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';
// 开启图表 loading
const showChartLoading = (chart) =>
  chart.showLoading('default', {maskColor: '#305d9e',});
// 敞开图表 loading
const 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 上交互很丝滑，安卓上交互时感觉偶然会有卡顿（不会是因为我手机太差吧…）。

再换 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 模式目前还不能够。

以上仅代表个人观点，有问题欢送交换。