需要展示的效果如下圖家肯,可能是2~x個(gè)柱。后端返回的數(shù)據(jù)類似:
{
old:[
{name:"1",value:1},{name:"2",value:2},{name:"3",value:3}
],
new:[
{name:"1",value:1},{name:"3",value:3}
]
}
可以看到 new數(shù)據(jù)里面缺少了{(lán)name:"2"},如果簡(jiǎn)單得循環(huán)遍歷取值填充到ecahrt的話盟猖,那么name:"3"
的值會(huì)顯示在x軸刻度為2的地方讨衣,3的地方反而沒有值了,按理說x軸刻度為2的地方式镐,第二根柱子應(yīng)該是0反镇。
前端處理思路如下:JS
1.先將old new 數(shù)據(jù)里X軸都取出來拼接,然后去重娘汞,暫定為Arr歹茶;
2.命名一個(gè)新的數(shù)組對(duì)象,用Arr 去遍歷生成 倆這樣的數(shù)組 [{name:arr[index] ,value:0}......],暫命名AARR? BARR;
3.用AARR套原始數(shù)據(jù)old雙層遍歷价说,如果old中有name和AARR中name相同的辆亏,AARR.item.value=old.value,否則不處理 還是0;得到完整的,補(bǔ)0以后的AARR
4.同理:用BARR套原始數(shù)據(jù)new雙層遍歷鳖目,如果new中有name和BARR中name相同的,BARR.item.value=new.value,否則不處理 還是0缤弦;得到完整的,補(bǔ)0以后的BARR领迈;
5.再去處理AARR? BARR 生成echart 所需要的數(shù)據(jù)。
目前能想出來的最笨的辦法碍沐,有大神有好方法歡迎交流狸捅。最后貼一下代碼怕自己忘了