记录工作中处理折线图数据,兼容xAxis值显示问题

需求:xAxis时间是从数据中返回来显示的,因为数据有24小时、30天、180天、365天,当返回180天以上的时候数据太多,进行按月份处理

返回数据类型为[{"price":"334.24","time":"2019-10-05"},{"price":"334.24","time":"2019-10-04"},{"price":"334.24","time":"2019-10-03"}]

需要对数据进行同一月份处理

效果图

// 筛选数据

filterIndex(arr, baseIndex) {

  if(baseIndex == 5){

    return arr.filter((item,index) => index%baseIndex == 0)

  }

  if(baseIndex == 30){ //把大于等于180天的按月份处理的按照月份分组

    let listArr = []

    arr.forEach(ele => { ele.time = ele.time.slice(0,7)});

    arr.forEach(item=>{

      for(var i=0;i<listArr.length;i++){

        if(listArr[i].time == item.time){

          listArr[i].childInfo.push({

            time : item.time,

            price : item.price

          })

          return

        }

      } 

      listArr.push({

        time:item.time,

        childInfo:[{

          time : item.time,

          price : item.price

        }]

      })

    })

    var newArr = []

    listArr.map((item) => {

     newArr.push({

      time : item.time+'月',

      price : item.childInfo[0].price

     })

    })

    return newArr

  }

},

// 折线图

createSimulationData: function () {

    var categories = [];

    var data = [];

    var priceList = this.data.priceList

    var length = this.data.priceList.length

    priceList = length==30 ? this.filterIndex(priceList,5) : length==180 || length==365 ? this.filterIndex(priceList,30) : priceList

    categories = priceList.map((item)=>{

      return item.time

    })

    data = priceList.map((item)=>{

      return item.price

    })

    return {

        categories: categories,

        data: data

    }

},

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值