项目里面用到了 native-echarts画图,至于加载空白部分暂时先不讲,主要贡献画折线图代码:
react-native render里面写入
const optiondangyue = {
title: {
text: '当月四合一趋势图',
textStyle:{
color:'#000',
align:'left',
fontSize:15
},
left:'4%',
top:'12%',
},
legend: {
left:'20%',
top:'12%',
data:['回款','发货','坏账','应收']
},
calculable : false,
grid: {
left:'5%',
top:'25%',
right:'15%',
bottom:'5%',
width:"80%",
height:'70%',
containLabel:true
},
xAxis: {
name:'/月',
nameTextStyle:{
color:"#000"
},
type: 'category',
boundaryGap : false,
data: this.state.date,
axisLabel:{
rotate: 25,
interval:0,
fontSize:3,
color:'#000'
},
axisLine:{
lineStyle:{
color:'#000'
}
},
axisTick:{
show:false,
}
},
yAxis: {
name:'RMB',
nameTextStyle:{
color:"#000"
},
axisLine:{
lineStyle:{
color:'#000'
}
},
splitLine:{
show:false
},
type: 'value'
},
series: [
{
name:'回款',
type:'line',
stack: '总量',
areaStyle: {normal: {}},
symbol: 'none',
data:this.state.GetChartPaidChartData
},
{
name:'应收',
type:'line',
stack: '总量',
areaStyle: {normal: {}},
symbol: 'none',
data:this.state.GetChartArrearChartData
},
{
name:'坏账',
type:'line',
stack: '总量',
areaStyle: {normal: {}},
symbol: 'none',
data:this.state.GetChartBadDebtChartData
},
{
name:'发货',
type:'line',
stack: '总量',
areaStyle: {normal: {}},
symbol: 'none',
data:this.state.GetChartShippmentChartData
}
]
};
return 结构里面调用:
<Echarts option={optiondangyue}/>