2 篇文章 含有標籤「website」

簡介：在現代移動應用程序開發中，數據可視化是一個至關重要的部分。圖表庫在React Native應用程序中起著關鍵作用，幫助開發人員以視覺方式呈現和分析數據。在本文中，我們將比較React Native社區中的三個流行圖表庫。讓我們開始這個比較之旅，深入探討React Native ECharts、Victory Native和React Native Chart Kit之間的差異。

圖表庫介紹​

• React Native Chart Kit

  React Native Chart Kit於2018年開發，至今已有5年的歷史。在GitHub上獲得了2.5k+的星星，累計下載次數達到2,840,757次。它已成為React Native社區中非常受歡迎的圖表庫。

• Victory Native

  Victory Native是一個於2015年開發的圖表庫。至今已有7年的歷史。它在GitHub上獲得了10.3k+的星星，累計下載次數高達7,434,044次。它是React Native歷史上使用最久、應用最廣泛的圖表庫。

• React Native ECharts

  React Native ECharts是今年新推出的圖表庫。目前已有2,565次下載，在GitHub上獲得了363顆星星。作為React Native圖表庫中的新星，它具有巨大的潛力。隨著時間的推移，相信React Native ECharts將成為最受歡迎的圖表庫之一。

  以下是基本數據的比較表格：

  	React Native Chart Kit	Victory Native	React Native ECharts
  創建日期	2018	2015	2023
  下載次數	2,840,757	7,434,044	2565
  解壓後大小	399kB	78.4kB	169kB
  GitHub星星數	2.5k+	10.3k+	363
  最後發布日期	一年前	一個月前	一個月前

基本原理比較​

• React Native Chart Kit 主要的方法是利用React Native的原生視圖組件來創建圖表的基本結構和布局，例如View、Text等。此外，還使用了react-native-svg和paths-js等庫來使用矢量圖形渲染圖表。

• Victory Native 也依賴於React Native的原生視圖，並使用SVG進行渲染。它還借鑒了D3（數據驅動文檔）的思想，通過將數據映射到圖表元素並使用比例尺來轉換數據值和位置。

• React Native ECharts 獲取ECharts圖表的SVG圖形數據，並重寫ECharts的SVGPainter。通過利用ECharts的現有圖表數據，在React Native端使用react-native-svg或react-native-skia渲染圖表。

代碼編寫比較​

讓我們以常用的面積圖為例，看看它們是如何使用以下代碼片段實現的：

• React Native Chart Kit

import { LineChart } from"react-native-chart-kit";
import { StyleSheet, View, Text } from 'react-native';
const chartConfig = {
   backgroundGradientFrom: "#fff",
   backgroundGradientFromOpacity: 0,
   backgroundGradientTo: "#fff",
   backgroundGradientToOpacity: 0.5,
   color: (opacity = 1) => `rgba(14, 17, 22, ${opacity})`,
   strokeWidth: 2, // optional, default 3
   barPercentage: 0.5,
   useShadowColorFromDataset: false // optional
};
export const LineChart1 = props => {
   const data = {
      labels: ['一', '二', '三', '四', '五', '六', '日'],
      // labels: props.date,
      datasets: [
       {
        data: [150, 230, 224, 218, 135, 147, 260],
        // color: (opacity = 1) => `rgba(134, 65, 244, ${opacity})`, // optional
        strokeWidth: 2 // optional
       }
      ],
    };
   return (
      <View style={styles.container}>
        <Text>React Native Chart Kit</Text>
        <LineChart
           data={data}
           width={400}
           height={200}
           yAxisInterval={1}
           animate
           chartConfig={chartConfig}
           withDots={false}
        />
    </View>
   )

}

• Victory Native

import { StyleSheet, View, Text } from "react-native";
import {
  VictoryArea,
  VictoryChart,
  VictoryLine,
  VictoryTheme,
  VictoryScatter,
} from "victory-native";

export const LineChart2 = props => {
  const data = [
    { x: '一', y: 150 },
    { x: '二', y: 230 },
    { x: '三', y: 224 },
    { x: '四', y: 218 },
    { x: '五', y: 135 },
    { x: '六', y: 147 },
    { x: '日', y: 260 },
   ];
  return (
   <View style={styles.container}>
    <Text style={styles.title}>Victory Native</Text>
    <VictoryChart
      theme={VictoryTheme.material}
      height={250}
      width={400}
    >
      <VictoryArea
       style={{ data: { fill: "rgba(230, 231, 231,0.8)" } }}
       data={data}
       animate={{
        duration: 2000,
        onLoad: { duration: 1000 },
       }}
      />
      <VictoryLine
       data={data}
       style={{ data: { stroke: "#d6d6d7", strokeWidth: 2 } }}
      />
      <VictoryScatter
       data={data}
       size={4}
       style={{ data: { fill: "#24262a" } }}
      />
    </VictoryChart>
   </View>
  );
};

• React Native ECharts

import { StyleSheet, Text, View } from 'react-native';
import { useRef, useEffect } from 'react';
import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
import { SVGRenderer, SkiaChart } from '@wuba/react-native-echarts';
echarts.use([SVGRenderer, LineChart, GridComponent]);
export const LineCharts = props => {
  const skiaRef = useRef(null);
  useEffect(() => {
   const option = {
    xAxis: {
      type: 'category',
      data:  ['一', '二', '三', '四', '五', '六', '日'],
      splitLine: {
       show: true,
       lineStyle: {
        type: 'dashed',
       },}
    },
    yAxis: {
      type: 'value',
      min: 'dataMin',
      splitLine: {
       show: true,
       lineStyle: {
        type: 'dashed',
       },}
    },
    series: [
      {
       data: [150, 230, 224, 218, 135, 147, 260],
       type: 'line',
       areaStyle: {
        color: 'rgba(230, 231, 231,0.8)'
       },
       lineStyle: {
        color: '#d6d6d7'
       },
       symbol: 'circle',
       symbolSize: 8,
       itemStyle: {
        color: '#24262a',
       },
      },
    ],
   };
   let chart;
   if (skiaRef.current) {
    chart = echarts.init(skiaRef.current, 'light', {
      renderer: 'svg',
      width: 400,
      height: 300,
    });
    chart.setOption(option);
   }
   return () => chart?.dispose();
  }, []);
  return (
   <View style={styles.container}>
      <Text style={styles.title}>React Native ECharts</Text>
      <SkiaChart ref={skiaRef} />
   </View>
  );
}

效果如下：

從代碼編寫的角度來看，Victory Native是數據驅動的，因此通常通過props傳入數據並配置相關樣式。最重要的是，它更像是一組工具，可以自定義圖表。您可以使用Victory提供的各種組件根據需要自定義圖表。例如，如果您想在面積圖中添加線條和數據點，則需要額外包含VictoryLine和VictoryScatter組件。

React Native ECharts和React Native Chart Kit在使用上類似。這兩個庫將數據和樣式集中在配置選項中。它們更像是功能齊全的工具，可以通過修改配置來轉換圖表。相比之下，React Native Chart Kit的配置代碼更簡單，但可能缺乏一些高級自定義選項。例如，啟用動畫或設置y軸的特定起始值可能無法實現。

在代碼編寫方面，我更喜歡基於配置的方法。它直觀、易於理解，可以提高開發效率。

開發體驗​

渲染性能比較​

在常見的面積圖、柱狀圖和餅圖等常規圖表中，三個庫在小數據集下都表現良好，提供流暢的渲染。然而，當數據量達到數千個時，性能差異變得明顯。Victory Native和React Native Chart Kit在處理大數據集時會出現明顯的延遲，而Victory甚至可能崩潰。另一方面，React Native ECharts通過ECharts的默認數據抽樣機制，渲染大量數據時可以避免圖表過度擁擠和性能下降。ECharts根據繪圖區域的寬度和數據點的數量自動抽樣相對較少的數據點，減少計算和渲染時間。利用這一機制，React Native ECharts在處理大數據集時展示出顯著更好的渲染性能。

以下是使用隨機生成的200個數據點渲染面積圖的示例：

可以看到，React Native ECharts仍然保持較好的渲染性能。另一方面，使用其他兩個庫需要對數據和坐標進行調整以滿足特定的業務需求。

當我們將測試數據增加到2000個點時，React Native Chart Kit出現明顯的渲染延遲，而Victory Native則報錯說超出了最大調用堆棧大小。與此同時，React Native ECharts由於數據抽樣的好處，在渲染大量數據時仍然提供滿意的渲染結果：

圖表種類比較​

• React Native Chart Kit 目前，React Native Chart Kit支持的圖表類型相對有限。它主要涵蓋了六種特定類型的圖表，可以滿足大多數基本業務需求。但是，如果需要其他類型的圖表，可能需要引入其他庫。

  以下圖像展示了React Native Chart Kit可以涵蓋的大部分圖表類型，可以看出種類相對有限。😭目前，開發人員正在持續維護該庫，未來可能會添加更多的圖表類型。

• Victory Native 在圖表種類方面，Victory Native相對於React Native Chart Kit提供了更多的選擇。然而，由於Victory的方法需要組合組件來創建不同類型的圖表，開發人員需要對組件組合有很好的理解並具備扎實的編碼能力。此外，官方Victory網站提供的示例可能對初學者來說不太友好，因為支持的圖表實例可能不是立即直觀的。總的來說，使用Victory Native需要更高的編碼能力和邏輯思維。

  以下圖像展示了Victory在其官方網站上提供的主要組件。可以看到相比React Native Chart Kit，這裡提供了更多的選項。此外，Victory Native主要依賴於組合這些組件，如點、線、區域和軸，來創建各種類型的圖表。這使得支持的圖表類型更多樣化。

• React Native ECharts 您可以直接參考ECharts官方網站上的示例，其中以高度直觀的方式展示了各種類型的圖表。開發人員可以使用配置選項根據自己的需求自定義圖表。目前，React Native ECharts支持渲染ECharts提供的大多數圖表類型。 React Native ECharts 利用 ECharts 提供的 SVG 數據，這意味著使用者可以通過參考 ECharts 網站上提供的示例並配置相應的設置，輕鬆渲染各種不同類型的圖表😍

下圖展示了一些其他庫難以實現或需要複雜組合的圖表類型。然而，使用 React Native ECharts，您可以輕鬆通過參考文檔來實現這些圖表🚀

指南比較​

開始使用 React Native Chart Kit 主要涉及使用庫作者提供的文檔和配置選項，這些可以在 GitHub 或 npm 上找到。通過參考這些資源，開發人員可以輕鬆在項目中實現圖表渲染。

另一方面，Victory Native 有自己的網站，開發人員可以通過參考文檔中提供的組件和相關代碼來組合圖表。然而，該網站提供了大量的組件和元素，使得開發人員很難快速找到所需的示例。實現複雜的圖表通常需要開發人員思考自己的實現方法，這可能降低開發效率。

相比於 Victory Native 和 React Native Chart Kit，React Native ECharts 具有以下幾個優勢：

• 文檔

  Victory Native 的官方文檔描述更清晰、全面，並提供了可直接使用的示例。開發人員可以通過文檔輕鬆理解庫的功能、配置和用法。此外，官方 ECharts 網站提供了大量的使用示例，進一步幫助開發人員快速實現各種類型的圖表。

• 在線預覽

  與 ECharts 库一樣，React Native ECharts 提供了在線預覽和測試支持。您可以直接複製圖表配置，查看它在 React Native 中的渲染效果。點擊此處進行在線預覽

• 多端代碼

  React Native ECharts 還支持在 Web 上重用組件，實現跨平台需求，並在多個平台上實現代碼共享。它輕鬆實現代碼統一性，確保不同平台上的圖表一致性，從而提高開發效率。

• 支持兩種渲染模式

  React Native ECharts 支持兩種渲染模式：Svg 和 Skia。它基於 react-native-svg 和 react-native-skia 實現。react-native-skia 利用 Skia Graphics Library，這是一個高性能的圖形渲染引擎，提供更快的繪製和渲染速度。對於希望體驗 Skia 能力的開發人員來說，這是一個福音。

總結​

無可否認，Victory Native 和 React Native Chart Kit 都是 React Native 的優秀圖表庫。然而，新引入的 React Native ECharts 在適用性和入門的易用性方面具有一定的優勢。特別是在一些相對複雜但常見的圖表中，例如路徑圖、雷達圖和K線圖，React Native ECharts 提供了示例，開發人員只需修改示例代碼中的數據即可輕鬆實現這些圖表。在這些場景中，強烈推薦使用 React Native ECharts，它大大提高了開發效率。此外，對於對各種類型的圖表需求較高的項目，React Native ECharts 提供的豐富的圖表示例使我們更容易應對多樣化的圖表需求😁

我們很高興地宣布 React Native ECharts 1.1 正式發布。在這個新版本中，我們新增了對 react-native-gesture-handler 手勢解決方案的支援，以及其他增強功能。繼續閱讀以了解更多詳情！

@wuba/react-native-echarts 是一個基於 Apache ECharts、並利用 react-native-svg 和 react-native-skia 的 React Native 圖表庫。相較於基於 WebView 的解決方案，它具有顯著的性能優勢。如果您想了解更多有關該項目的設計原則，可以點擊這裡。

為了提供更直觀和準確的項目功能理解，我們決定正式將初始版本 wrn-echarts 更名為 @wuba/react-native-echarts。在這個新版本中。

項目源代碼可在 https://github.com/wuba/react-native-echarts 找到。

功能​

支援豐富的圖表類型​

@wuba/react-native-echart 是一個將 ECharts 圖表庫引入 React Native 應用程序的解決方案。它利用 React Native 的原生組件的渲染能力，大大提高了渲染速度。它支援多種常用的圖表類型，包括折線圖、面積圖、柱狀圖和散點圖，還支援複雜的圖表類型，如蠟燭圖和熱力圖。它可以滿足不同場景下的各種可視化需求。

以下是一些常見圖表類型的示例：

除了常見的圖表類型外，@wuba/react-native-echart 還支援多種其他圖表，如樹狀圖、熱力圖和 K 線圖，並具有出色的渲染性能。

此外，我們還提供全面的支援各種動態圖表，以下是一些示例。圖表 1 和圖表 2 展示了多個國家人均收入的動態變化。圖表 1 展示了過去 70 年人均收入的增長趨勢，而圖表 2 展示了 1982 年 10 個國家人均收入的動態排序。圖表 3 顯示了一個隨時間變化並根據不斷變化的數值自適應的速度計，而圖表 4 則展示了一個動態節點添加圖表。這些圖表可以根據不斷變化的數據動態重新渲染。無論數據更新頻率如何，它們始終提供出色的渲染性能。

@wuba/react-native-echart 支援多種圖表類型，但這裡無法一一展示。如果您想探索更多全面的圖表類型，可以訪問 taro-playground 存儲庫查看。在那裡，您將找到展示各種 ECharts 圖表類型的示例演示。

支援 Svg 和 Skia​

@wuba/react-native-echart 支援兩種渲染模式：Svg 和 Skia。它基於 react-native-svg 和 react-native-skia 實現。如何在兩種渲染模式之間進行選擇？從渲染速度的角度來看，Svg 和 Skia 的性能相似，如下圖所示。然而，需要注意的是，Skia 渲染在支援中文語言方面存在一些限制。為了正確顯示中文字符，您需要單獨設置字體。因此，在選擇渲染庫時，請考慮項目的語言要求和對中文語言支援的重要性。我們建議根據具體情況選擇適當的渲染模式，以實現最佳性能和用戶體驗。

支援各種手勢​

支援點擊、拖動和縮放等各種手勢。默認情況下，我們使用 React Native 內置的 PanResponder 來處理這些手勢。從版本 1.1 開始，我們新增了對 react-native-gesture-handler 库的支援。如果您已經將這個手勢庫集成到項目中，我們建議直接使用它來處理手勢，以提升性能和用戶體驗。

以下是兩種手勢解決方案的比較。從圖表滾動的流暢度來看，默認手勢處理和使用 react-native-gesture-handler 都提供了出色的流暢度。您可以根據自己的需求選擇適合的方法。

Web 支援​

我們還支援在 Web 環境中重用 @wuba/react-native-echart 的組件，以滿足跨平台需求並實現代碼共享。這樣可以實現代碼統一，確保不同平台上的圖表一致性，提高開發效率。

ECharts 圖表庫提供了許多網絡渲染示例。但它在 React Native 上的表現如何？為了解決這個問題，我們提供了相應的在線預覽和測試支援。您可以直接複製圖表配置，查看它在 React Native 上的渲染效果。在線預覽點擊這裡

路線圖​

儘管我們已經對 ECharts 進行了廣泛和全面的支援，但我們致力於進一步優化和增強它。在我們即將開展的工作中，我們將重點關注以下領域的改進和增強，以提供更精緻的功能。點擊這裡查看更詳細的信息和進度更新。

性能優化​

相較於使用 Webview 的渲染解決方案，@wuba/react-native-echart 在整體渲染性能方面已經取得了顯著的改進。然而，在處理大數據集時，渲染速度和內存使用方面仍有進一步的優化空間。我們致力於優化處理大數據集的性能，以確保在各種複雜數據場景下實現卓越的性能和穩定性。

已知問題修復​

目前，對 ECharts 圖表庫的支援已經非常全面。然而，在某些圖表渲染方面仍存在一些需要改進的問題，例如不支援地圖顯示和 Skia 渲染模式下圖片顯示不正確。我們非常重視這些問題，將繼續努力修復它們，以提供更好的圖表呈現體驗。

支援 ECharts GL​

隨著 3D 可視化在各種業務場景中的廣泛應用，例如下面展示的 3D 圖表，我們將繼續探索和增強對 ECharts GL 的支援，以滿足更多的業務需求。您可以點擊這裡查看最新進展。

改進基礎設施​

未來，我們將繼續改進基礎設施，完善測試用例、添加用戶用例和其他內容。標準化的測試用例可以檢查開發過程中的任何更改是否對其他功能產生影響。我們將逐步添加更多的測試用例，標準化代碼並提高代碼質量。

致謝​

我們衷心感謝 @wuba/react-native-echarts 開源社區中的所有朋友。無論您是否對代碼庫做出了貢獻，提供了帶有上下文信息的錯誤報告，還是分享了增強現有功能的想法，您的貢獻對這個項目來說都是非常寶貴的。我們衷心歡迎您加入我們，積極參與項目的討論和協作開發。

最後，我們要特別感謝為項目的成功做出貢獻的開發人員：