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 就是我们处理好的新的格式化数组