处理接口返回的统计数据 渲染到图表

项目场景：

根据后端统计后返回的数据 处理后渲染在图表上

数据展示 ~

后端返回的数据 需要处理才能渲染 可见如下：
data:{
file: [{NUMBER: 3, TERM: “永久”}, {NUMBER: 3, TERM: “定期30年”},{NUMBER: 11, TERM: “未填”}],
folder: [{NUMBER: 64, TERM: “长期”}, {NUMBER: 92, TERM: “永久”}, {NUMBER: 5, TERM: “定期30年”}]
}
希望的是file和folder的 TERM作为x轴(不能重复) file和folder的NUMBER作为y轴显示的值 并且对于未返回的值赋值为0

解决方案：

//这里固定了就只有 文件和文件夹 两个条件
this.option.series[0].data = [];
this.option.series[1].data = [];
let fileTerm =data.file;
let folderTerm=data.folder;
//先取出两个数组的x轴数组
let retentionList = new Set();
folderTerm.forEach(item =>{retentionList.add(item.TERM);});
fileTerm.forEach(item => {retentionList.add(item.TERM);});
this.option.xAxis.data=Array.from(retentionList); //这里是x轴的数据去重 
// 循环X轴 把对应的值依次存入
if(this.option.xAxis.data){
	this.option.xAxis.data.forEach(item=>{
		let findFolderItem = folderTerm.find(folderItem => folderItem.TERM === item)
	    this.option.series[0].data.push(findFolderItem ? findFolderItem.NUMBER : 0);
	    let findItem = fileTerm.find(fileItem => fileItem.TERM === item)
	    this.option.series[1].data.push(findItem ? findItem.NUMBER : 0);
	})
 }

好了 结束了 还是自己太菜 菜就多练~