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

mac2025-10-22  4

需求: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

    }

},

最新回复(0)