echarts 对后端获取的值进行数据格式化处理

echarts是我们经常用到的数据可视化图形

但是后端反馈给我们的数据经常是数组包对象的集合类型 ， 我们常常需要进行一些数据格式化的算法取值操作 ， 这里我提供一种方法，希望对读者有所帮助！

// 后端返给我们的值
echarts:[
        {id:1,createData:2020-1-4,num:20},
        {id:2,createData:2020-2-6,num:120},
        {id:3,createData:2020-4-10,num:80},
        {id:4,createData:2020-5-1,num:90},
        {id:5,createData:2020-10-7,num:20},
        {id:6,createData:2021-1-5,num:20},
        {id:7,createData:2021-4-6,num:20},
        {id:8,createData:2022-5-4,num:20},
        {id:9,createData:2022-6-7,num:20},
        {id:10,createData:2022-7-10,num:20},
      ]

我们需要对获取的值进行进一步操作

// 中心思想是通过键名 , 对后期数据的统一格式化 , 所以我们需要获取到所有的键名


// 1.ES5 引入了Object.keys方法，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键名。

  let keyArray = Object.keys(this.echarts[0])  // [ 'id' , 'createData' , 'num'] 

// 2. 声明一个新的数组 , 等待获取我们处理格式化后的新的值 , 通过循环再赋值的形式获取新的格式化的数组
  let data = []

  keyArray.forEach(item=>{ // item就是keyArray数组中每一个key
   data.push({
        name:key,
        data:this.echarts.map(item=>item[key]), // 这里通过数组的map() 方法按照原始数组元素顺序依次处理元素。
    }) 
 })
  
  // 此时data 就是我们处理好的新的格式化数组