快捷導(dǎo)航

聊聊ant?design?charts?獲取后端接口數(shù)據(jù)展示問(wèn)題

更新時(shí)間：2022年05月25日 10:42:25 作者：yqphare

今天在做項(xiàng)目的時(shí)候遇到幾個(gè)讓我很頭疼的問(wèn)題，一個(gè)是通過(guò)后端接口成功訪問(wèn)并又返回?cái)?shù)據(jù)，但拿不到數(shù)據(jù)值。其二是直接修改state中的data，console中數(shù)組發(fā)生變化但任然數(shù)據(jù)未顯示，這篇文章主要介紹了ant?design?charts?獲取后端接口數(shù)據(jù)展示,需要的朋友可以參考下

今天在做項(xiàng)目的時(shí)候遇到幾個(gè)讓我很頭疼的問(wèn)題，一個(gè)是通過(guò)后端接口成功訪問(wèn)并又返回?cái)?shù)據(jù)，但拿不到數(shù)據(jù)值。其二是直接修改state中的data，console中數(shù)組發(fā)生變化但任然數(shù)據(jù)未顯示。

import React, { useState, useEffect } from 'react';
import { Line } from '@ant-design/plots';
import { PageContainer } from '@ant-design/pro-layout';
import ProForm, { ProFormDateRangePicker } from '@ant-design/pro-form';
import queryString from 'qs';
const DemoLine = () => {
const [data, setData] = useState([]);
useEffect(() => {
asyncFetch();
}, []);
var obj=[]
var pre=[]
const asyncFetch = () => {
fetch('/api/v1.0/inquireRepairsAnalysisNumberListTenant.json',{
method: 'POST',
body:new URLSearchParams(queryString.stringify({
sessionUuid: window.localStorage.getItem('sid') ,
startDate: '2021-12-01',
endDate: '2022-05-30',
}, { indices: false }))
})
.then(response=>response.json())//將respose轉(zhuǎn)成json格式數(shù)據(jù)以便可以訪問(wèn)讀取
.then(response=>{
obj=response.datas[0];//獲取json數(shù)據(jù)中的data部分，并對(duì)其開(kāi)始進(jìn)行處理
console.log(obj)
for(var i = 0; i < obj.typeNameList.length;i++){
for(var j=0;j<obj.monthList.length-1;j++){
pre.push({ monthList:obj.monthList[j],
monthNumberList:obj.monthNumberList[j].numberList[i],
typeNameList:obj.typeNameList[i],
})
}
}
setData(pre)
}
)
.catch((error) => {
console.log('fetch data failed', error);
});
};
console.log(data,data.length)
const config = {
data,
xField: 'monthList',
yField: 'monthNumberList',
seriesField: 'typeNameList',
yAxis: {
},
legend: {
position: 'top',
},
smooth: true,
// @TODO 后續(xù)會(huì)換一種動(dòng)畫(huà)方式
animation: {
appear: {
animation: 'path-in',
duration: 5000,
},
},
};
return (
<PageContainer>
<ProForm
initialValues={{
dateRange: [Date.now(), Date.now() - 1000 * 60 * 60 * 24],
}}
>
<ProForm.Group title="日期區(qū)間選擇">
<ProFormDateRangePicker name="dateRange" />
</ProForm.Group>
</ProForm>
<Line {...config} />
</PageContainer>
)
};
export default DemoLine;

通過(guò)接口獲取到數(shù)據(jù)后，一直為response形式，處理很久，最后通過(guò) .then(response=>response.json())//將respose轉(zhuǎn)成json格式，但我們?nèi)稳蝗〔坏絇romiseResult中的內(nèi)容，需要再次通過(guò)then方法

此時(shí)數(shù)據(jù)為json格式，為了取到j(luò)son中的datas還需再 obj=response.datas[0];//獲取json數(shù)據(jù)中的data部分，并對(duì)其開(kāi)始進(jìn)行處理

.then(response=>{
obj=response.datas[0];//獲取json數(shù)據(jù)中的data部分，并對(duì)其開(kāi)始進(jìn)行處理
console.log(obj,'obj')

我們將取到的數(shù)據(jù)存在obj數(shù)組中

之后再對(duì)數(shù)據(jù)進(jìn)行操作，由于我這邊的用的多折線圖，ant design charts中他所需要的數(shù)據(jù)格式是數(shù)組內(nèi)以對(duì)象的形式放單個(gè)數(shù)據(jù)，如圖

所以我們需要對(duì)取到的obj數(shù)據(jù)數(shù)據(jù)進(jìn)行處理，轉(zhuǎn)換為對(duì)應(yīng)的數(shù)據(jù)形式。pre為暫存數(shù)據(jù)數(shù)組。

for(var i = 0; i < obj.typeNameList.length;i++){
for(var j=0;j<obj.monthList.length-1;j++){
pre.push({ monthList:obj.monthList[j],
monthNumberList:obj.monthNumberList[j].numberList[i],
typeNameList:obj.typeNameList[i],
})
}
}

將我們的數(shù)據(jù)轉(zhuǎn)換后通過(guò)usestate修改到data中

setData(pre)

通過(guò)設(shè)置折線圖的對(duì)應(yīng)屬性

const config = {
data,//簡(jiǎn)寫(xiě)data:data
xField: 'monthList',
yField: 'monthNumberList',
seriesField: 'typeNameList',
yAxis: {

},
legend: {
position: 'top',
},
smooth: true,
// @TODO 后續(xù)會(huì)換一種動(dòng)畫(huà)方式
animation: {
appear: {
animation: 'path-in',
duration: 5000,
},
},
};

最終效果