-
Notifications
You must be signed in to change notification settings - Fork 303
Open
Description
故障描述: 载入组件, 打包app启动会自动闪退
- react-native-charts-pro 【1.9.0】
- react-native 【0.71.6】
- react-native-swiper 【1.6.0】
- Platform 【android】
- Demo
import React, { PureComponent } from 'react';
import {StyleSheet, View, Text, Image} from 'react-native';
import ECharts from 'react-native-echarts-pro';
class ChartView extends PureComponent {
state = {
startColor: '#F3FA20',
endColor: '#F7B90E',
htmlString: ''
};
componentDidMount() {
}
render() {
const service = this.props.info.service;
let records = JSON.parse(this.props.info.records);
const date = [];
const record = [];
records.map(item => {
date.push(item.date.substring(5, 10).split('-').join('.'));
record.push(item.count)
});
const option = {
grid: {
width: '95%',
height: 114,
top: '8%',
left: '2%',
right: '5%',
bottom: '0%',
containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
},
title: {
right: 15,
text: '近30天服务顾客趋势',
textStyle: {
fontSize: 9,
color: '#36C6EA'
}
},
xAxis: {
type: 'category',
boundaryGap: false, // 设置x轴两边的留白
axisTick: {
// x轴刻度尺
show: false
},
axisLabel: {
margin: 12,
fontSize:7, // 文字的字体大小
color: '4B84B0' // 刻度标签文字的颜色
},
axisLine: {
// x轴线条颜色
lineStyle: {
color: '#999'
}
},
data: date
},
yAxis: {
type: 'value',
axisLabel: {
margin: 12,
fontSize: 7, // 文字的字体大小
color: '#4B84B0' // 刻度标签文字的颜色
},
axisTick: {
show: false // 是否显示坐标轴刻度 默认显示
},
splitLine: {
// 网格线
show: false // 关闭网格线
},
axisLine: {
// y轴线条颜色
show: true,
lineStyle: {
color: '#999'
}
}
},
series: [
{
data: record,
type: 'line',
smooth: true, // 面积图改成弧形状
lineStyle: {
width: 1.5, // 外边线宽度
color: '#00FFD5' // 外边线颜色
},
showSymbol: false, // 去除面积图节点圆
areaStyle: {
// 区域填充渐变颜色
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 1,
color: 'rgba(7, 59, 69, 0)' // 0% 处的颜色
},
{
offset: 0,
color: 'rgba(35, 238, 221, 1)' // 100% 处的颜色
}
]
}
}
}
]
};
if (!Object.keys(this.props).length) return ;
return (
<View style={{flex: 1}}>
<View style={{height: 80, paddingTop: 6.5, paddingLeft: 30, position: 'relative'}}>
<Image source={{ uri: `${service}` }} style={styles.serviceBg} />
<Text style={{fontSize: 12, fontWeight: 'bold', color: '#fff'}}>今日服务顾客<Text style={{fontSize: 9}}>(人次)</Text></Text>
</View>
<View style={{justifyContent: 'center' }}>
<ECharts option={option} />
</View>
</View>
)
}
}
const styles = StyleSheet.create({
serviceBg: {
position: 'absolute',
top: 0,
left: 0,
width: 463,
height: 80,
},
textStyle: {
fontSize: 40,
},
text: {
fontSize: 20,
color: "#abe333"
},
});
export default ChartView
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels