位置: 编程技术 - 正文

React Native使用百度Echarts显示图表的示例代码(react native 应用)

编辑:rootadmin

推荐整理分享React Native使用百度Echarts显示图表的示例代码(react native 应用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:react native webgl,react native.,react native webgl,react native webgl,react native for web,react native.,react native app,react native app,内容如对您有帮助,希望把文章链接给更多的朋友!

Echarts是百度推出的免费开源的图表组件,功能丰富,涵盖各行业图表。相信很多同学在网页端都使用过。今天我就来介绍下在React Native中如何使用Echarts来显示各种图表。

首先需要在我们的React Native项目中安装native-echarts组件,该组件是兼容IOS和安卓双平台的。

安装

安装完成后在node_modules文件夹下会多出一个文件夹叫native-echarts。

目录结构如下图所示:

基础使用

native-echarts的使用方法基本和网页端的Echarts使用方法一致。组件主要有三个属性:

option (object):图表的相关配置和数据。详见文档:ECharts Documentation width (number):图表的宽度,默认值是外部容器的宽度。 height (number) :图表的高度,默认值是。

示例代码:

通过上面的代码我们就可以在React Native里面显示一个图表了。但是我们会发现显示的字体会偏小。我们需要适配下移动端的字体,我们需要在native-echarts文件下找到tpl.html文件,在head里面增加下面一句代码:<meta name="viewport" content="width=device-width, initial-scale=1"> 这样字体大小就显示正常了。

进阶使用:

在使用图表时,如果我们需要使用图表的点击事件,比如点击柱状图的某个柱子,获取到该柱子的信息,再跳转到详情页面,这该怎么做呢&#;组件本身是没有这个属性的,需要我们自己修改下代码,传递下消息。具体代码如下:

首先我们需要在renderChart.js文件中把需要的数据注入并传递出来(window.postMessage):

然后在index.js中做处理(handleMessage):

最后在使用图表的页面中,修改下代码来接受传递过来的消息:<Echarts option={option} height={height} width={theme.screenWidth} handleMessage={this.handleMessage} />

React Native使用百度Echarts显示图表的示例代码(react native 应用)

在handleMessage方法中就可以写自己的逻辑来处理传递过来数据了。

打包:

如果就这样打包的话,IOS是可以正常打包并显示的。但是在android端打包时会出错。

解决方法:

将index.js中的代码:source={require('./tpl.html')}修改为:

source= {Platform.OS === 'ios' &#; require('./tpl.html') : { uri: ' }}

同时将tpl.html文件拷贝到安卓项目下面的app/src/main/assets文件夹中。

在执行完react-native bundle命令后,需要手动将资源文件res/drawable-mdpi中生成的tpl.html文件删除,再执行cd android && ./gradlew assembleRelease命令,这样就能成功打包了。

Q1

当数据量比较大的时候,x轴的数据不显示。这个是echarts自己的一个功能,解决办法是设置xAxis-axisLabel-interval为0即可。

Q2

面积折线图中面积颜色“不正“,也就是说和设置的颜色对不上。这个可能是react-native-echarts组件封装的问题,解决办法是设置areaStyle-normal-shadowColor为'#ffffff',同理可以设置lineStyle等。

Q3

打release包的时候报错了, androidappsrcmainresdrawable-mdpinode_modules_nativeecharts_src_components_echarts_tpl.html Error:Error: The file name must end with .xml or .png

原因:

release打包的时候把node_modules_nativeecharts_src_components_echarts_tpl.html打到了drawable下,这是不行的,要放到assets下。

解决办法是

另外,release版本只能使用uri加载资源,android把tpl.html文件放在android/app/src/main/assets文件里,使用uri:'

浅谈react 同构之样式直出 前言上文讲到通过同构服务端渲染,可以直出html结构,虽然讲解了样式,图片等静态资源在服务端引入问题的解决方案,但是并没有实际进行相关操作

用Webpack构建Vue项目的实践 最近在内部项目中做了一些基于vue+webpack的尝试,在小范围和同事们探讨之后,还是蛮多同学认可和喜欢的,所以通过本篇文章分享给更多人开始之前,

原生JS实现 MUI导航栏透明渐变效果 mui内置有H5版本的透明渐变导航控件,教程参考mui官网;透明渐变导航是一种解决滚动条通顶的变通方案,相比双webview,具有更高的性能和更好的动画

标签: react native 应用

本文链接地址:https://www.jiuchutong.com/biancheng/369741.html 转载请保留说明!

上一篇:JS实现分页浏览横向图片(类轮播)实例代码(js分页逻辑)

下一篇:浅谈react 同构之样式直出(react 同级组件之间传值)

  • 每月计提什么费用
  • 印花税票是什么税种
  • 企业出售房产要交哪些税
  • 增值税发票的品名与报关单不一致
  • 存货成本核算方法有哪些
  • 公司之间往来款需要开收据吗
  • 申报增值税无附表怎么填写
  • 机械设备租赁印花税谁交
  • 个体工商户可以给员工交社保吗
  • 公积金需要每月缴纳吗
  • 一般纳税人销项税和进项税如何抵扣
  • 新公司注册资金需要实缴吗
  • 煤炭企业会计核算办法
  • 购入材料用于非增值税纳税项目
  • 工程款的税是怎么扣除的?
  • 开增值税专用发票需要合同吗
  • 农产品收购发票上的买价含税吗
  • 开汽车租赁发票需要什么资料?
  • 每月认证多少发票怎么算
  • 房地产企业自行开发的房地产项目
  • 股东转让股份怎么转让
  • 三证合一之后的税务登记
  • 备查账要如何设置?
  • 辅助生产费用的核算
  • 银行借款利息支出可以税前扣除吗
  • 找不到powershell.exe文件
  • 个体户需要交钱吗
  • 预算与决算对比分析
  • 结转已经销售商品成本
  • xmp是什么格式的文件是一种预设吗
  • 收到的销项负数要认证吗
  • ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法 原创
  • wirecut.exe
  • info是什么软件
  • 期间费用转入本年利润
  • 补缴税款怎么补
  • 增值税如何在报表里填写
  • 库存现金日记账的登记依据
  • 大堡礁的现状
  • 免抵退税帐务处理
  • 营业执照年检认缴和实缴怎么填
  • 为什么要进行税费改革
  • 【创作赢红包】ChatGPT引爆全网引发的AI算力思考
  • 公允价值模式的特点
  • 服务器连接方式包括直接相连,间接连接
  • pytorch自动编码器
  • 租房开的发票收的税怎么做账?
  • 完税证明可以作废吗
  • 进项税额年末账务处理
  • 支付宝提取到公积金账户
  • 进项票和销项票是什么意思
  • 新公司开基本户需要带什么材料
  • 企业所得税汇算表
  • mysql关闭连接命令
  • 免税企业税金及附加计算
  • 计提坏账准备的金额怎么算的
  • 不需要计提折旧的情况
  • 明细账分类账登记
  • 培训机构账务处理
  • 账面净值什么意思
  • 收回投标保证金 建立台账
  • 创建mysql表sql语句
  • 数据库性能优化面试题
  • 数据表的联接
  • MySQL PXC构建一个新节点只需IST传输的方法(推荐)
  • WINDOWS系统无法正常启动
  • 硬盘安装在机箱内,属于主机的组成部分
  • swupdtmr.exe - swupdtmr进程是什么意思 什么作用
  • win10怎么把中文系统改成英文
  • w10系统屏幕一直在闪
  • win7为什么会出现小黄锁
  • win7系统玩游戏怎么样
  • java dao框架
  • python制作爬虫教程
  • unity加密代码
  • 国家税务局总局河南官网
  • 广东电子税务局中山税务局网
  • 畜牧业企业所得税优惠政策最新
  • 企业卖旧房如何计算缴纳土地增值税
  • 注销税务登记存货如何处理
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设