native-echarts 图形组件
2024-10-19 00:24:22
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()或()=>{}及属性:函数，就显示不了。坑死了
最新文章
- 使用CSS和jQuery实现对话框
- jinkins在windows上的安装 配置C#编译
- IT技术博客收藏
- ***mysql中经度纬度字段用什么存储(关于mysql的float和decimal区别)
- solr中通过SFTP访问文件建立索引
- PHP中文URL编解码(urlencode()rawurlencode()
- ARMv8 Linux内核源代码分析：__flush_dcache_all()
- Qt 5.7 > Qt Applications
- JAVA提高十一：LinkedList深入分析
- 基于Django的python验证码
- PHP curl 常用操作
- ABAP调试
- C# GDI+之Graphics类 z
- laravel中消息通知功能
- IOS 数据存储之 Core Data详解
- Oracle 22表空间
- 历次PCB板修改意见汇总
- 两个有序单链表合并成一个有序单链表的java实现
- HDFS上传数据的流程
- CCF CSP 201503-4 网络延时