响应式 React Native Echarts 组件

最新推荐文章于 2024-05-11 10:04:52 发布
最新推荐文章于 2024-05-11 10:04:52 发布
阅读量426 收藏
点赞数
文章标签： react-native echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/entronad/article/details/81009943
版权

一种在 React Native 中封装的响应式 Echarts 组件，使用与示例请参见：react-native-echarts-demo

近年来，随着移动端对数据可视化的要求越来越高，类似 MPAndroidChart 这样的传统图表库已经不能满足产品经理日益变态的需求。前端领域数据可视化的发展相对繁荣一些，通过 WebView 在移动端使用 Echarts 这样功能强大的前端数据可视化库，是解决问题的好办法。

React Native 开发中，由于使用的是与前端相同的 JavaScript 语言，衔接 Echarts 的工作相对顺畅些，不过一些必要的组件封装还是能够大大提高开发效率的。

Echarts 官方推荐过一个第三方封装库：react-native-echarts（注：它对应的 nmp package 名字为 native-echarts ），目前有 400+ stars 和 100+ 的周下载量，可见还是被广泛使用的。但是我们经过调研，发现 react-native-echarts 存在以下一些问题：

  • 该库已半年多未更新，Echarts 版本停留在 3.0 ，Android 端打包需手动添加 assets 的问题也一直未处理

  • 库的接口灵活度较低，比如只能通过 width、height 设置大小；无法使用 Echarts 扩展包；无法进行事件注册、WebView 通信等

最低0.47元/天 解锁文章
entronad
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
react native使用echarts图表
XKFC1的博客
03-21 4623
react native使用echarts图表
react native中使用echarts
cnmeimei的博客
10-12 1760
开发平台：mac pro node版本：v8.11.2 npm版本：6.4.1 react-native版本：0.57.8 native-echarts版本：^0.5.0 目标平台：android端收银机，android7.0+ 最近在使用react native进行app的开发工作，rn开发的内容会与原生app混合，在一些使用场景下遇到了一些问题 使用场景：每日收益与每月收益的折线图统计 在pc/h5端的开发工作中，图标类的开发使用echarts/f2等三方工具都是比较常见的了，在r...
推荐开源项目：react-chartjs - 响应式React图表库
最新发布
gitblog_00024的博客
05-11 324
推荐开源项目：react-chartjs - 响应式React图表库 项目地址:https://gitcode.com/reactjs/react-chartjs 在数据可视化的世界里，一款强大的图表库能帮助我们更好地呈现复杂的数据信息。今天我们要向您推荐的是一款基于React和Chart.js的开源项目——react-chartjs。它不仅提供了丰富的交互式图表组件，还让React应用中的数据可...
react- native如何使用Echarts
m0_69210482的博客
06-24 384
这里小编建议使用native-echarts。
reactnativechartview一个基于highchart的图表RN组件
08-10
react-native-chart-view一个基于highchart的图表RN组件
React Native图表插件react-native-charts-wrapper集成教程
热门推荐
大灰狼的小绵羊哥哥的博客
03-28 1万+
之前写了些RN的第三方插件的教程，（比如react-native-baidu-map iOS端集成：http://www.jianshu.com/p/eceb7e66fa5e ，RN升级配置说明：http://www.jianshu.com/p/0c30e94de69b ） ，我觉得写博客来帮网友解决问题，比单纯的截图和QQ聊天效率更高，并且复用性高，不用再重复解答。可能很多朋友都在集成第三方
深入了解响应式React Native Echarts组件
10-16
近年来，随着移动端对数据可视化的要求越来越高，通过 WebView 在移动端使用 Echarts 这样功能强大的前端数据可视化库，是解决问题的好办法。下面就和小编来一起学习一下吧
使用 ReactART 的 React Native 评分组件。
06-08
react-native-grading react-native-grading 是一个 RN 组件，供用户对分数进行评分。 组件提供四种模式，弧/模拟/星星/板。 Example.gif 每种模式至少有 3 个示例，以显示不同状态的组件。 在每个测试组中，第一个...
ReactNative中组件的生命周期
02-25
就像Android开发中的View一样，ReactNative（RN）中的组件也有生命周期（Lifecycle）。所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。RN组件的生命周期整理如下图...
React Native 计算器和计算器输入组件
06-08
React Native Calculator 简单的 React Native 计算器和计算器输入组件。 安装使用 npm: npm i -S react-native-calculator 或 yarn: yarn add react-native-calculator Demo Calculator Component Usage import ...
react-native实现图表数据可视化native-echarts
shizhihua11的博客
03-09 1977
引入native-echarts import Echarts from 'native-echarts'; //配置参数 选人图表 render() { //图表参数配置 const option = { title: { text: '示例赛鸽分速(米/分)', }, ...
react-native-echarts-pro:一个基于native-echarts的更好的图表工具
05-03
react-native-echarts-pro English 更好的基于native-echarts的图表工具。 概括 Core： 1. Solve the problem of android tpl.html file reference; 2. echarts version upgraded to 5.0; 3. Support all kinds of original charts, new support map chart; 4. Continuous optimization... 入门 $ npm install react-native-echarts-pro --save 依靠 $ npm install react-native-webview --save 用法 1.基本用法 import React , { Component } from 're
react-native-chart-kit：actReact Native Chart Kit：折线图，贝塞尔曲线图，进度环，条形图，饼图，贡献图（热图）
02-05
如果您想建立网站或跨平台的移动应用程序，我们将竭诚为您服务！ 发送便笺至 ，我们将尽快与您联系。 要尝试Expo中的示例，请在使用expo run开始之前，将main更改为package.json ./node_modules/expo/AppEntry.js 。 你需要有expo-cli安装通过npm install -g expo-cli 。 React Native Chart Kit文档 导入组件 yarn add react-native-chart-kit yarn add react-native-svg安装对等依赖 与ES6语法一起使用以导入组件 import {
React Native图表插件
pugongyingyangyue的博客
02-14 1462
React Native图表插件react-native-charts-wrapper集成教程     https://www.jianshu.com/p/432517c5b531
ReactNative常用组件库 victory-native 图表
a82022424的博客
05-03 1663
victory-native 是不错的图表组件，支持很多种图表 地址： https://github.com/FormidableLabs/victory-native 先安装 react-native-svg： npm install react-native-svg --save react-native link react-native-svg 再安装...
reactnative 使用react-native-echarts-pro 组件使用 echarts图表
XKFC1的博客
05-16 1074
reactnative 使用react-native-echarts-pro 组件使用 echarts图表
React Native使用Echarts做统计图表
whuzjn的专栏
01-30 1747
画面截图： 画面代码： import React,{ Component } from 'react' import { Dimensions, View, Text } from 'react-native' import Echarts from 'native-echarts'; let { width, height } = Dimensions.get('window'); ...
react-native 一个页面使用多个Echarts图表 图表总有1、2个不显示 但数据是请求到后才渲染的图表
hzxOnlineOk的博客
06-21 1796
如下图所示，一共使用了2个图表（1柱状图、1饼图），正常情况是这样的： 是的，2个图表都出现了，但是有时候图表只展示1个，有时候2个都不展示，如下图： 为什么会出现这种现象？ 经排查，由于我们的echarts图表是用webview展示的，并且封装成了一个组件供调用，当多个组件同时调用echarts时，它只能处理一个，于是另外一个就出现渲染不出图表的情况，我称之为“竞引” 如何解...
react封装echarts公共组件
04-05
React封装echarts公共组件的步骤如下： 1. 安装echarts 使用npm安装echarts： ``` npm install echarts --save ``` 2. 创建ECharts组件 创建一个ECharts组件，该组件将呈现echarts图表。该组件将接受以下属性： - option： echarts图表的配置选项。 - style： echarts图表的样式。 ``` import React, { Component } from 'react'; import echarts from 'echarts'; class ECharts extends Component { componentDidMount() { this.renderEChart(); } componentDidUpdate() { this.renderEChart(); } renderEChart() { const { option, style } = this.props; const echartObj = echarts.init(this.chartRef); echartObj.setOption(option); echartObj.resize(); } render() { const { style } = this.props; return <div ref={ref => (this.chartRef = ref)} style={style} />; } } export default ECharts; ``` 3. 将ECharts组件添加到应用程序中 在您的应用程序中使用ECharts组件。将图表的选项和样式作为属性传递给该组件。 ``` import React, { Component } from 'react'; import ECharts from './ECharts'; class App extends Component { render() { const option = { // echarts图表的配置选项 }; const style = { // echarts图表的样式 }; return <ECharts option={option} style={style} />; } } export default App; ``` 这就是React封装echarts公共组件的基本步骤。您可以根据需要自定义ECharts组件，并在应用程序中使用它。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值