位置: 编程技术 - 正文
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} />
在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 同级组件之间传值)
