native-echarts 图形组件
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Button,
View,
TouchableOpacity,
Dimensions,
} from 'react-native';
import Echarts from 'native-echarts';
let {width,height} =Dimensions.get('window')
export default class EchartsTest extends Component { constructor(props) {
super(props); this.state ={
numDataY:["", "", "", "", "", "",''],
othernumDataY:["", "", "", "", "", "",''],
}
}
render() {
const option= {
//图形位置样式
grid:{
right:,
bottom:,
},
title: {
text: '访客数量',
textStyle:{
color:'#8e8e93',
fontSize:,
padding:[,,,],
},
top:,
left:,
},
//点击图形某个位置的显示弹框
tooltip: {
trigger:'axis',
},
//统计数据的种类切换
legend: {
orient:'vertical',
data: [{name:'访客数量',icon: 'circle',},{name:'付款金额',icon: 'circle'}],
selectedMode:'multiple',
backgroundColor:'#fff',
align:'left',
right:,//距离右边界20
top:,
},
toolbox:{
orient:'vertical',
show:true,
showTitle:true,
feature:{
magicType:{
type: 'bar',
},
},
},
xAxis: [
{
axisTick:{
show:true,
alignWithLabel:true,
},
data: ["周一", "周二", "周三", "周四", "周五", "周六","周日"],
}
],
yAxis: [
{
axisTick:{
show:false,
alignWithLabel:false,
},
nameLocation:'end',
nameTextStyle:{
color:'#8e8e93',
fontSize:,
align:'right',
padding:[,,,],
left:,
},
interval:,//强制分割间隔
nameGap:,
name:'访客数量(个)',
offset:-,
}
],
color:['#e62129','#007aff'],
//数据配置
series: [
{
name: '访客数量',
type: 'bar',
data:this.state.numDataY ,
},
{
name: '付款金额',
type: 'line',
data:this.state.othernumDataY ,
}
]
}
return (
<View style={styles.container}>
<Echarts option={option}
height={}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: ,
backgroundColor: '#f9f9f9',
},
echartstyle: {
height: ,
width: ,
},
button: {
backgroundColor: '#d9534f',
padding: ,
borderRadius: ,
marginBottom:
}
});
首先这个组件在模拟器上和debug模式下是没有任何问题但是但是在安卓打包apk运行时,显示出问题一片空白,看源码
<View style={{flex: , height: this.props.height || ,}}>
<WebView
ref="chart"
scrollEnabled = {false}
injectedJavaScript = {renderChart(this.props)}
style={{
height: this.props.height || ,
}}
source={require('./tpl.html')}
/>
</View>
Echarts用的webView然后引入一个文件,而这个文件的路径对于ios来说是没有问题的,但是在安卓来说这个路径就是错误的,那就在安卓里没有这个文件,所以copy一个tpl文件,复制到如下路径
然后在修改一下webView的source
const source = (Platform.OS == 'ios') ? require('./tpl.html') : {'uri':'file:///android_asset/tpl.html'}
return (
<View style={{flex: , height: this.props.height || ,}}>
<WebView
ref="chart"
scrollEnabled = {false}
injectedJavaScript = {renderChart(this.props)}
style={{
height: this.props.height || ,
}}
source={source}
/>
</View>
重新编译一下原始代码重新运行就ok,(太特么坑爹了),
补充一点,之后碰到上面改过之后还是显示不了,还是空白,后来在option把function()或()=>{}及属性:函数,就显示不了。坑死了
native-echarts 图形组件的更多相关文章
- 数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇
HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打 ...
- HTML5 例子学习 HT 图形组件
HTML5 例子学习 HT 图形组件 HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心 ...
- 在Vue中echarts可视化组件的使用
echarts组件官网地址:https://echarts.apache.org/examples/zh/index.html 1.找到脚手架项目所在地址,执行cnpm install echarts ...
- 数百个 HTML5 例子学习 HT 图形组件 – 3D建模篇
http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...
- 数百个 HTML5 例子学习 HT 图形组件 – 3D 建模篇
http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...
- 数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇
<数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>一文让读者了解了 HT的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT ...
- HTML5拓扑图形组件设计之道(一)
HT for Web(http://www.hightopo.com/guide/readme.html)提供了涵盖通用组件.2D拓扑图形组件以及3D引擎的一站式解决方案,正如Hightopo官网所表 ...
- react native之组织组件
这些组件包括<TabView>,<NavigatorView>和<ListView>,他们实现了手机端最常用的交互和导航.你会发现这些组件在实际的项目中会非常有用. ...
- HT图形组件设计之道(四)
在<HT图形组件设计之道(二)>我们展示了HT在2D图形矢量的数据绑定功能,这种机制不仅可用于2D图形,HT的通用组件甚至3D引擎都具备这种数据绑定机制,此篇我们将构建一个3D飞机模型,展 ...
- HT图形组件设计之道(三)
上篇我们通过定制了CPU和内存展示界面,体验了HT for Web通过定义矢量实现图形绘制与业务数据的代码解耦及绑定联动,这类案例后续文章还会继续以便大家掌握更多的矢量应用场景,本篇我们先切换个话题, ...
随机推荐
- mysql主从同步与读写分离
为了解决数据库服务的高可用问题以及负载均衡问题, 1正常情况下可以互为主从,均衡分担数据流量, 2防止数据库服务器在宕机的情况下可以顺利切换到正常的数据库服务器,减少公司的客户流量损失故公司需要搭建数 ...
- 【安卓进阶】Scroller理解与应用
项目中有个需求,就是在RecyclerView的item中进行侧滑,一开始同事推荐了一个开源库,使用起来确实也方便好用,直接在布局作为父布局即可实现侧滑. 自己也非常好奇这个开源库到底用了什么API能 ...
- 使用PsPing测试Azure虚拟机的连通性
Azure虚拟机启动后,如果在个人的PC上ping该虚拟机的public IP,会出现Request time out的信息,无法ping通.这是因为在 Azure 中,ICMP 包无法通过防火墙和负 ...
- Shovel Sale CodeForces - 899D (数位dp)
大意: n把铲子, 价格1,2,3,...n, 求有多少个二元组(x,y), 满足x+y末尾数字9的个数最多. 枚举最高位, 转化为从[1,n]中选出多少个二元组和为$x$, 枚举较小的数 若$n\g ...
- linux 复制文件
1 复制指定目录下的全部文件到另一个目录中. 若dir2目录不存在,则可以直接使用: cp -r dir1 dir2 若dir2目录存在,则需要使用: cp -r dir1/. dir2 若dir2目 ...
- Octopus501工作站环境配置
操作系统 Ubuntu18.04LTS(Ubuntu16.04) 远程桌面 Xtce4桌面系统(mate桌面系统)+vncserver远程桌面服务器 远程ssh连接登录 ssh服务器 文件系统 vsF ...
- 个人信息——头像更换(拍照或相册上传)~ 微信小程序
微信小程序中 在用户信息中关于用户头像更换(拍照或相册上传)功能实现. 图像点击触发事件: <image src='{{personImage}}' bindtap='changeAvatar' ...
- 常见程序入口点(OEP)特征
delphi: 55 PUSH EBP 8BEC MOV EBP,ESP 83C4 F0 ADD ESP,-10 B8 A86F4B00 ...
- sql server中的varchar和Nvarchar有什么区别?
很多开发者进行数据库设计的时候往往并没有太多的考虑char, varchar类型,有的是根本就没注意,因为存储价格变得越来越便宜了,忘记了最开始的一些基本设计理论和原则,这点让我想到了现在的年轻人,大 ...
- 利用Python进行数据分析(第二版)电子版书籍分享
资料下载地址: 链接:https://pan.baidu.com/s/1y1C0bJPkSn7Sv6Eq9G5_Ug 提取码:vscu <利用Python进行数据分析(第二版)>高清中文版 ...