跳到主要内容

3 篇博文 含有标签「website」

查看所有标签

· 阅读需 16 分钟
xuanweiH

引言:在现代移动应用开发中, 数据可视化是至关重要的一部分。图表库在React Native应用中扮演着关键角色, 帮助开发人员以可视化的方式呈现和分析数据。React Native生态系统中有许多优秀的图表库可供选择, 本文将对三个 React Native 社区流行的绘图库进行对比, 让我们开始这个对比之旅, 深入了解React Native ECharts、Victory Native和React Native Chart Kit这三个图表库到底有哪些不同

图表库简介

  • React Native Chart Kit

    React Native Chart Kit 于2018年开发, 至今已有5年, 累计下载次数已达2,840,757次, 在github上已获得2.5k+的star, 是 react-native 端非常受欢迎的库了。

  • Victory Native

    Victory Native 是2015年开发的图表库,至今已有7年, 累计下载次数高达7,434,044次, 在github上更是获得10.3k+的star, 是 react-native 历史最久用户量最多的图表库了。

  • React Native ECharts

    React Native ECharts 是今年新发布的的图表库,目前下载量为2565次, 在github上获得363的star, 作为 react-native 端图表库的新星, 它具有巨大的潜力, 相信随着时间推移, 它会成为最热门的图表库之一。

    基础数据对比表格如下:

    React Native Chart KitVictory NativeReact Native ECharts
    创建时间2018年2015年2023年
    下载量2,840,7577,434,0442565
    包体积大小399kB78.4kB169kB
    github star2.5k+10.3k+363
    上一次更新a year agoa month agoa month ago

基本原理对比

  • React Native Chart Kit 主要是利用 React Native 的原生视图组件来创建图表的基本结构和布局, 例如 View、Text 等结合 react-native-svg、paths-js 等矢量库来进行对图表的绘制。

  • Victory Native 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: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
// 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: 'Mon', y: 150 },
{ x: 'Tue', y: 230 },
{ x: 'Wed', y: 224 },
{ x: 'Thu', y: 218 },
{ x: 'Fri', y: 135 },
{ x: 'Sat', y: 147 },
{ x: 'sun', 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: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
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 是基于数据驱动的类型, 所以通常是传入数据, 然后一些相关的样式由配置项传入。最最最重要的是, 它更像是一组可以自己diy的工具, 使用 Victory 暴露出的各个组件, 对自己需要绘制的图表进行diy, 如果在这个面积图中, 我如果需要增加折线以及拐点, 就需要再额外添加 VictoryLineVictoryScatter

React Native EchartsReact Native Chart Kit 的使用方法类似, 都将数据和样式集中在配置项里, 我们更像是使用一个完全体的工具, 通过修改配置来变换它的成品。相比较下React Native Chart Kit 的配置代码要更加简单, 不过也有一些劣势就是配置化不够完善, 有些想要更改的功能做不到比如开启渲染动画, y轴以指定值开始计数等功能。

从写法上来说, 本人还是更倾向于使用配置项的方式, 这种方式简便快捷, 上手难度低, 对于开发者来说可以提高开发效率。

使用体验

渲染性能对比

对于常规的图表, 面积图柱状图圆形图等在数据量不大的情况下, 三个库的表现都是不错的, 渲染时都比较流畅。但是当数据量达到1000量级时, 明显感觉到性能的差异了。Victory NativeReact Native Chart Kit 出现了明显卡顿, 数据量更大一些的情况 Victory 更是直接crash, 而 React Native ECharts 得益于 Echarts 默认使用了数据抽样(data sampling)的机制, 在绘制大量数据时减少数据点数量, 以避免图表过于拥挤和性能下降。Echarts 会自动根据绘图区域的宽度和数据点的数量来进行抽样, 只绘制相对较少的数据点, 以减少计算量和渲染时间。借用这一机制在渲染大数据时, React Native ECharts 的渲染表现要明显优秀许多。

使用随机生成200组数据来渲染面积图效果如下:

可以看到 React Native ECharts 的渲染效果还是相对较好的, 使用另外两个库还是要对数据以及坐标进行一些调整才能保证业务需求。

当我们把测试数据加到2000时, React Native Chart Kit 出现渲染的明显卡顿, 而 Victory Native 则是直接报错 Maximum call stack size exceede。而此时的 React Native ECharts 得益于数据抽样仍然可以有不错的渲染成果:

图表丰富性对比

从应用的角度来说。

  • React Native Chart Kit 目前 React Native Chart Kit 支持的图表类型还是相对较少的, 目前主要支持6种特定种类的图表, 虽然能涵盖大部分基础业务, 但是如果有些业务需要其他类型的图表, 可能还需要引入其他的库了。 下图是 React Native Chart Kit 能覆盖到的大部分图表,看的出来还是相对较少的😭。目前开发者还在持续维护后续会新增一些。

    (图片来源: https://github.com/indiespirit/react-native-chart-kit)
  • Victory Native Victory Native 能覆盖的图表种类相比 React Native Chart Kit 是会多些, 但是由于 Victory 的写法需要自己组装组件, 组合成不同类型的图表需要开发者有一定的组合思维, 并且官网的示例对初学者还是不太友好的, 能支持的图表实例不是特别直观, 总而言之使用 Victory Native 的开发者需要有一定的代码功底和不错的思维逻辑, 使用门槛较高。

    下图是victory官方网站上的demo提供的主要组件的展示图, 可以看的出来相对 React Native Chart Kit 还是要多不少的, 更重要的是 Victory Native 主要是以这些组件类似于点、线、面、轴的组合, 让开发者去组合生成新的类型图表, 可以支持的图表种类就更多了✅

    (图片来源: https://formidable.com/open-source/victory/docs/)
  • React Native ECharts 可以直接参照 Echarts 官网示例, 各种类型的图表示例非常直观, 开发者可以参照配置项配置自己需要的图表。目前 Echarts 支持的大部分图表, React Native ECharts 都是支持渲染的。

    React Native ECharts 使用了 Echarts 的svg数据, 所以使用者只要参照 Echarts 的网站示例来选择自己的配置便可以渲染大量不同类型的图表了😍

    (图片来源: https://echarts.apache.org/examples/zh/index.html)

    下图是一些使用其他库都无法实现或者需要很高难度的拼接组合才能实现的图表, 但是使用 React Native ECharts 完全可以参照文档轻松解决啦🚀

相关生态对比

上手 React Native Chart Kit 主要直接通过 github 或者 npm 上项目中作者提供文档配置项来实现图表渲染。 而 Victory Native 有自己的官方网站开发者可以自己根据 docs 中提供的组件以及相关代码来组装图表, 但是官网的组件和元素数量比较多, 开发者无法快速的找到想要的实例, 实现复杂图表更是需要开发者自己思考实现方式, 开发效率偏低。

React Native ECharts 相比于 Victory NativeReact Native Chart Kit 有以下几点优势

  • 官方文档

    官方文档的描述更为清晰, 详尽, 并且可以看到现成以及丰富的使用案例便于开发者上手和快速实现图表。

  • 在线预览测试 React Native ECharts 像 ECharts 图表库一样, 提供了相应的在线预览和测试支持, 你可以直接复制图表配置, 以查看其在 React Native 上的渲染效果: 点击在线预览

  • 多端代码复用

    React Native ECharts 也会支持组件复用到 Web 端, 以满足跨端需求并实现多端代码共享。轻松实现代码的统一性, 并确保图表在不同平台上的一致性, 也提升我们开发的效率。

  • Svg 和 Skia 两种渲染支持

    React Native ECharts 支持 Svg 和 Skia 两种渲染方式, 它基于 react-native-svg 和 react-native-skia 实现。react-native-skia 使用了 Skia Graphics Library, 这是一个高性能的图形渲染引擎可以提供更快的绘制和渲染速度, 对于想体验Skia的开发者无疑是一种福音。

总结

最后, 我们来看下这三个图表库的从下面几个角度上比较表现如何:

React Native Chart KitVictory NativeReact Native ECharts
基础图表适用性
图表丰富度
大数据渲染
开发易上手度
多端复用

不可否认 Victory NativeReact Native Chart Kit 都是很优秀的react-native端的图表库, 但是新出的 React Native ECharts 在适用性和入门难度上还是具有一定优势的, 尤其是在一些相对复杂但是常见的图表如路径图、雷达图K线图等 React Native ECharts 提供的用例可以让开发者只是稍微改变一下示例代码里的数据就轻松实现, 这些场景下是强推的 React Native ECharts 的, 极大的提高了开发效率。 此外, 项目中对各种图表种类需求度比较高的场景也是推荐 React Native ECharts 丰富的图表示例支持会让我们在面对多样的图表需求显得更加得心应手😁

· 阅读需 9 分钟
yechunxi

@wuba/react-native-echart 开源项目公开发布已经有一段时间了,我们非常高兴的宣布稳定版 1.1 正式发布了 🎉🎉🎉。

@wuba/react-native-echart是一个基于 react-native-svgreact-native-skia,使用 RN 原生组件来渲染 Echarts 的图表,相比 Webview 的解决方案,性能有了很大的提升。如果想要了解更多项目设计原理,可以参考这里

为了大家能够更加直观和准确的了解项目的特性,我们决定将最初的 wrn-echarts 正式更名为 @wuba/react-native-echarts。在新的版本中,我们增加对react-native-gesture-handler 手势方案的支持等等,接下来我们一起来看下有哪些特性吧。

特性

全面丰富的图表支持

@wuba/react-native-echart 是一个将 Echarts 图表库应用于 React Native 应用中的解决方案,它采用 React Native 原生组件的渲染方式,从而大幅提升了渲染速度。支持常见的各种折线图、面积图、柱状图、散点图,还是更复杂的 K 线图、热力图等,能够满足各种不同场景下的可视化需求。

以下是一些常见的图表类型示例:

除了常用的图表类型外,@wuba/react-native-echart 还支持其他各种图形,如树图、热力图和 K线图 等,下面是对应的图表示例:

此外,我们还支持各种动态图表,以下是一些图表示例。图一和图二展示了关于多个国家人均收入的动态变化。图一呈现了近 70 年人均收入的增长趋势,而图二展示了近 82 年时 10 个国家人均收入的动态排序。图三展示了随着时间变化而不断更新的速度仪表盘,而图四则展示了动态增加节点的图表。

这些图表能够根据不断变化的数据实现动态重新渲染。无论数据更新频率如何,它们都能够表现出色的渲染性能。

@wuba/react-native-echart 支持图表类型非常丰富,不一一在此展示。如果想了解更全面的图表类型,可以去taro-playground这里查看。在这里可以找到包含各种 Echarts 图表类型的示例 Demo。

支持 SVG 与 Skia

@wuba/react-native-echart 支持 Svg 和 Skia 两种渲染方式,它基于 react-native-svgreact-native-skia 实现。两种渲染方式如何选择?从渲染速度的角度来看,Svg 和 Skia 的性能表现相对接近,如下图所示。但是,需要注意的是,比如在中文支持方面,Skia 渲染存在一些限制,需要去声明设置字体才能正确显示中文字符。因此,在选择渲染库时,考虑项目的语言需求和对中文支持的重要性,根据具体情况选择合适的渲染方式,以实现最佳的性能和用户体验。

支持各种手势

支持点击、拖拽、缩放等各种手势。默认情况下,我们使用 React Native 自带的 PanResponder 来处理这些手势操作。在 1.1 版本之后,我们增加了对 react-native-gesture-handler 手势库的支持。如果项目中已经引入了该 手势库,建议直接使用该库来处理手势操作,以获得更出色稳定的性能和体验。

下面是对比两种手势方案的效果,从图表滑动的流畅程度来看,无论是默认手势处理还是采用 react-native-gesture-handler 处理,手势滑动都非常的流畅,您可以根据自己的需求选择采用哪种方式。

支持 Web 复用

我们还支持将 @wuba/react-native-echart 的组件复用到 Web 端,以满足跨端需求并实现多端代码共享。轻松实现代码的统一性,并确保图表在不同平台上的一致性,也提升我们开发的效率。

ECharts 图表库在 Web 端提供了丰富的在线渲染案例,那么在 React Native 上是否能够保持一致?我们为此提供了相应的在线预览和测试支持,你可以直接复制图表配置,以查看其在 React Native 上的渲染效果。点击在线预览

后续规划

尽管我们已经在对 Echarts 的支持方面做得相当丰富和完善,但我们仍然致力于进一步的优化和提升。在接下来的工作中,我们将从以下几个方面进行优化和改进,以提供更加精益求精的功能。点击这里查看更多详细信息和进展情况。

性能提升

相较于使用 Webview 的渲染方案 @wuba/react-native-echart 在整体渲染性能方面取得了显著的提升。然而,在处理大数据量时,组件的渲染速度和内存占用方面仍有进一步改进的空间。我们会努力优化在处理大数据量时的性能表现,以确保在各种复杂数据场景下,能够提供更出色的性能和稳定性。

功能完善

当前,Echarts 图表库的支持已经相当全面。但是,在某些图表渲染方面仍存在一些需要完善的问题,例如不支持地图展示和在 Skia 渲染模式下图片展示不正确的问题等。我们非常重视这些问题,并会持续努力修复它们,以提供更好的图表展示体验。

支持 ECharts GL

随着 3D 可视化在各个业务场景中的广泛应用,例如下方展示的 3D 图表,我们将持续探索并增加对 ECharts GL 的支持,以满足更多场景下的业务需求。您可以点击 这里 查看最新的进展情况。

完善用例

后续,我们会增加更多用户使用案例与测试用例。规范测试用例能检查出你的任何改动是不是对其他功能产生了影响。能够从根本上就保证项目的质量,后续我们也将逐步添加更多测试用例,规范代码,提升代码质量。

感谢

非常感谢 @wuba/react-native-echarts 开源社区的所有朋友们。无论是为代码库做出贡献,还是为解决bug提供报告和上下文信息,或是改进现有特性的想法,都是对这个项目非常宝贵的贡献。我们非常欢迎你加入我们,一起参与到项目交流共建。

最后,特别感谢为项目做出贡献的开发者:

· 阅读需 9 分钟
Zhiqing Chen

我们非常高兴地宣布 React Native Echarts 的官方网站已经上线!

我们将不断更新网站,为您提供关于我们项目的最新信息。在网站上,您可以找到完整的文档、在线编辑示例、查看常见问题的解决方案以及其他相关信息。

全新的 Logo 与设计

我们设计了一个体现项目核心特点的 Logo:高效、简洁和科技感。Logo 基于极坐标柱状图,经过改造,呈现出现代化和科技感。

希望您喜欢!