react-native native-echarts

强硕
2023-12-01

项目里面用到了  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}/>

 类似资料: