react native使用百度echarts显示图表
echarts是百度推出的免费开源的图表组件,功能丰富,涵盖各行业图表。公司项目做h5项目用了不少,最近公司翻新h5页面,用react-native改造,来达到增强用户体验效果的目的。项目中遇到了一些坑,记录下。
1.安装native-echarts组件
首先我们需要在RN项目中安装native-echarts组件,该组件是兼容IOS和安卓双平台的。
github地址:https://github.com/somonus/react-native-echarts
搜索github发现其star、fork数量并不是很多,到现在为止加上我的star也就492。从这个数来看算是不太受欢迎吧!
npm install native-echarts--save
安装完成后在node_modules文件夹下会多出一个文件夹叫native-echarts。
页面引入
import Echarts from 'native-echarts';...render() {return (<Echarts option={option} height={rpx(420)} />)
}
该组件提供了三个props属性
component props:
- option (object): The option for echarts: Documentation。
- width (number): The width of the chart. The default value is the outer container width.
- height (number): The height of the chart. The default value is 400.
按照echart文档配置好参数后
运行效果,发现android平台下 图表滚轮上下滚动,左右拖动,双击缩小。
网上找到的办法是
修改/node_modules/native-echarts/src/components/ 下 Echarts 的 index.js 代码如下
<WebViewref="chart"scrollEnabled = {false}injectedJavaScript = {renderChart(this.props)}style={{height: this.props.height || 400,backgroundColor: this.props.backgroundColor || 'transparent'}}scalesPageToFit={Platform.OS === 'android'}source={require('./chart.html')}onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}/>
主要是设置 scalesPageToFit在android平台下为true
2.组件优化
修改node_modules模块的代码?
对于合作的项目,node_modules不会上传到git上的,需要和每一个开发人员说下?
其实没有那个必要了,现在的做法是
提取node_modules/native-echarts 里面的核心代码,直接放到项目中去。作为一个单独的组件改写。
源码地址:https://github.com/zuobaiquan/react-native/tree/master/Echarts/component
chart.html 里面引入echarts.min.js文件。通过webView 引入到react-native项目中。
当然了,觉得echarts.min.js 嫌大,可以去百度echart官网定制一份echarts.min.js即可(地址:http://echarts.baidu.com/builder.html),差不多300k左右吧。
3.遇到的坑
现在针对公司项目,有这么一个需求
问题1:图表底部只显示第一个日期和最后一个日期
我们都知道 在 interval设置下就行。。
interval: (index, value) => {return index === 0 || xData.length - 1 === index
},formatter: (value, index) => {if (index === 0) {return `{a|${value}}`} else if (index === xData.length - 1) {return `{b|${value}}`}
}
但是,这里的通过接口请求的数据 xData 值拿不到。 导致不显示最后一个日期的数据。
解决办法: 上文提到了该组件提供了三个props属性。此时为啥我们不能暴露更多的属性呢?
然后在使用组件时,设定chartContext 值就可以啦。。。
问题2:tooltips 滑动时,上面的一列文字的数据跟着变化。
首先想到的办法是 在 formatter 设置 setState 改变数值,渲染到DOM里面。但是和问题1情况一样,由于是echart图表是通过 WebView 嵌入的。无法实现render的渲染。
tooltip: {formatter: (params)=> {this.setState({number1:???,number2:???})}
}
此时的做法是
问题3:设置为渐变色, 此处设置的是针对网页的
areaStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(234, 243, 253)'}, {offset: 1,color: 'rgb(255, 255, 255)'}])}
}
RN项目这里并没有 暴露echarts 对象
因此想要设置渐变色,得需要用另外一种方式了。
areaStyle: {normal: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: '#A3C7F3' // 0% 处的颜色}, {offset: 1, color: '#FFFFFF' // 100% 处的颜色}],globalCoord: false // 缺省为 false}},origin:'start'}
路过的朋友,如果有更好的解决办法,欢迎email我哦,邮箱: zuobaiquan01@gmail.com
4.关于打包
/android/app/src/main 创建 assets文件夹 讲chart.html模板拷贝一份到该目录。
上面 设置 chartContext 解决了配置项拿不到外部变量的问题,看起来很完美,运行代码也没有什么问题,不过,在项目打包时,又出了问题,图表显示不出来了。
原因:打包时,由于自定义属性是手动加的,打包时转换成了简写,不能被识别
// renderChart.js var chartContext = ${toString(chartContext)}; 替换为 var g_chartContext = ${toString(chartContext)};// 使用时,把chartContext 全都替换为g_chartContext 就可以了 option.tooltip.formatter = (params) => {return `<div style="width: ${g_chartContext.width*690}px; font-size: ${g_chartContext.width*26}px;"></div>` // 此处deviceW并不生效,获取不到外部定义的变量 }
转载于:https://www.cnblogs.com/zuobaiquan01/p/9882500.html
react native使用百度echarts显示图表相关推荐
- React native 接入百度AI活体检测、人脸识别 iOS版本
前期准备工作参考:React native 接入百度AI活体检测.人脸识别 Android版本 iOS配置 1.将FaceSDK里面的文件导入到iOS项目 添加完之后是这样的 2.选择链接C++标准库 ...
- React Native app闪退 显示 “很抱歉, ‘xxx’ 无法运行”的解决方法
React Native app闪退 显示 "很抱歉, 'xxx' 无法运行" 这种情况一般是因为第三方库的配置有问题或者js 代码写的有问题 首先看看js代码是否有问题 去官方下 ...
- React native导入百度地图
开源地址:https://github.com/lovebing/react-native-baidu-map 今天在React native中导入百度地图组件遇到过许多坑,特此写一篇博客记录踩过的坑 ...
- 调用百度 Echarts 显示重庆市地图
因为 Echarts 官方不再提供地图数据的下载,在这里保存一份,供日后使用,重庆地图数据的 JSON 文件在 CSDN 上下载. <!DOCTYPE html> <html sty ...
- React Native TEXT 组件文字显示不全 异常解决(小米文字显示不全:小米10 ,Redmi k30出现)
开发中发现一处text组件 显示文字,总是丢末尾几个字符的异常.就很疑惑,拿小米11ultra(12.0.9)和小米8(12.0.3)测试正常,小米10(miui12.0.11)和redmi k30会 ...
- React Native 安卓人民币符号显示异常问题解决
在项目中经常会发现人民币符号 ¥ 在安卓机下的显示异常(只显示一横如下图),而 h5.iOS 均无误 这是因为全角半角的原因,全角 ¥ 会受系统影响,而半角 ¥ 则基本不受影响 那么知道原因之后,我再 ...
- React native ios长按显示粘贴,复制为英文改为中文
首先我们将项目用xcode打开,接下来如下图: 最后一步选择你需要显示的语言就OK了.
- native react 折线图_react native中使用echarts
开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...
- React Native Firebase
React Native Firebase 介绍 RNFirebase使用Firebase和React Native简单.它是一个轻量级的图层,位于iOS和Android的原生Fireb ...
最新文章
- php服务器日志在哪里看,云服务器日志在哪里看
- 使用Git工具下载android源码---带步骤
- php 输出带参数整个html页面,如何在PHP页面中原样输出HTML代码(是该找本php的数来看了)...
- 【转】使用Windows Backup备份Exchange 2007 SP2和Exchange 2010
- VTK:PolyData之ImplicitPolyDataDistance
- hadoop2.x的变化
- Qt 安装与配置记录
- android 输出字节数组,Android蓝牙通信字节数组的数据类型转换 求教!
- Oracle中表pagesize,Oracle 解决显示凌乱串行问题时column、pagesize、linesize的设定
- Nginx+Tomcat负载平衡
- VMware虚拟机安装系统
- 人人视频android app,人人视频安卓版
- 电脑上有哪些特别好用的小工具?盘点4个PC工具,个个都精品
- Python爬虫 | 手把手教你扒一扒贝壳网成交房源数据
- 徐思201771010132《面向对象程序设计(java)》第八周学习总结
- 基本粒子群算法matlab 程序
- 英语简单的6种构词法
- 51单片机点阵屏实现俄罗斯方块
- 人机交互-6-评估之用户测试
- 用ghost为服务器装系统,Ghost详解:使用Ghost来安装Windows操作系统
热门文章
- 计算机学具制作,6计算机模板教案6算机模板教案.doc
- mysql扩展使用_mysql的扩展应用
- 遍历字符串的每个字符python_Python之字符串的遍历的4种方式
- JSP EL表达式 将数组拼接成字符串
- 【oracle】日期类型 to_char
- nutch的index-writers.xml
- python中比较运算符用于比较两个数_python中的运算和运算符
- unity update 协程_Unity协程,停止协程及yield return使用_019
- python3虚拟环境搭建_python3 =虚拟环境的搭建
- linux2.6添加新硬盘,Linux_TurboLinux11添加新硬盘方法,一.Linux的硬盘识别2.6 kernel - phpStudy...