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 图形组件的更多相关文章

  1. 数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇

    HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打 ...

  2. HTML5 例子学习 HT 图形组件

    HTML5 例子学习 HT 图形组件 HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心 ...

  3. 在Vue中echarts可视化组件的使用

    echarts组件官网地址:https://echarts.apache.org/examples/zh/index.html 1.找到脚手架项目所在地址,执行cnpm install echarts ...

  4. 数百个 HTML5 例子学习 HT 图形组件 – 3D建模篇

    http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...

  5. 数百个 HTML5 例子学习 HT 图形组件 – 3D 建模篇

    http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...

  6. 数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇

    <数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>一文让读者了解了 HT的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT ...

  7. HTML5拓扑图形组件设计之道(一)

    HT for Web(http://www.hightopo.com/guide/readme.html)提供了涵盖通用组件.2D拓扑图形组件以及3D引擎的一站式解决方案,正如Hightopo官网所表 ...

  8. react native之组织组件

    这些组件包括<TabView>,<NavigatorView>和<ListView>,他们实现了手机端最常用的交互和导航.你会发现这些组件在实际的项目中会非常有用. ...

  9. HT图形组件设计之道(四)

    在<HT图形组件设计之道(二)>我们展示了HT在2D图形矢量的数据绑定功能,这种机制不仅可用于2D图形,HT的通用组件甚至3D引擎都具备这种数据绑定机制,此篇我们将构建一个3D飞机模型,展 ...

  10. HT图形组件设计之道(三)

    上篇我们通过定制了CPU和内存展示界面,体验了HT for Web通过定义矢量实现图形绘制与业务数据的代码解耦及绑定联动,这类案例后续文章还会继续以便大家掌握更多的矢量应用场景,本篇我们先切换个话题, ...

随机推荐

  1. canvas 水波纹

    <!DOCTYPE html> <html> <head> <title>水波背景</title> <meta charset=&qu ...

  2. Python进行JSON格式化输出,以及汉字显示问题

    格式化输出 转载地址  https://blog.csdn.net/real_tino/article/details/76422634 问题分析: Python下json手法的json在打印查看时, ...

  3. java比较排序Comparable和Comparator

    1       比较排序Comparable和Comparator 1.1      接口作用说明 Comparable和Comparator都是用来实现对象的比较.排序,对比时需要实现Compara ...

  4. 音频转化mp3 ,到底选vbr还是cbr

    毫无疑问,aac格式是最好的. 其次,应该是 vbr. 参考下面文章 http://tieba.baidu.com/p/1966991568 总结: 1.正版iTunes Plus 256K AAC格 ...

  5. structure

    https://wenku.baidu.com/view/a82b12d62dc58bd63186bceb19e8b8f67c1cef04.html?sxts=1541829436140

  6. LeetCode--029--两数相除(java)

    给定两个整数,被除数 dividend 和除数 divisor.将两数相除,要求不使用乘法.除法和 mod 运算符. 返回被除数 dividend 除以除数 divisor 得到的商. 示例 1: 输 ...

  7. hdoj3138

    题意:略 各点向原信念连INF+1的边,不同信念连INF的边,这样割原信念花费大一点.然后好友连1的边.最小割的结果-n*INF就是答案,因为割到哪边最少都要INF. #include <ios ...

  8. hbase的api操作之scan

    扫描器缓存----------------    面向行级别的.    @Test    public void getScanCache() throws IOException { Configu ...

  9. 虚拟机中安装Linux系统

    本教程的运行环境:Windows 10 , 虚拟机 VirtualBox,Ubuntu 16.04 1.准备 下载 VirtualBox 下载OVA镜像64位 http://releases.ubun ...

  10. 二十八、linux下权限管理chmod

    (1)查看权限 终端下需要查看文件或文件夹的权限时,可以使用ll查看当前目录的各文件权限. 如图,r代表读取权限,w代表写入权限,x代表执行权限:-代表普通文件,d代表文件夹.使用命令chmod可以修 ...