ant design charts 获取后端接口数据展示


Posted in Javascript onMay 25, 2022

今天在做项目的时候遇到几个让我很头疼的问题,一个是通过后端接口成功访问并又返回数据,但拿不到数据值。其二是直接修改state中的data,console中数组发生变化但任然数据未显示。

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转成json格式数据以便可以访问读取
.then(response=>{
obj=response.datas[0];//获取json数据中的data部分,并对其开始进行处理
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 后续会换一种动画方式
animation: {
appear: {
animation: 'path-in',
duration: 5000,
},
},
};
return (
<PageContainer>
<ProForm
initialValues={{
dateRange: [Date.now(), Date.now() - 1000 * 60 * 60 * 24],
}}
>
<ProForm.Group title="日期区间选择">
<ProFormDateRangePicker name="dateRange" />
</ProForm.Group>
</ProForm>
<Line {...config} />
</PageContainer>
)
};
export default DemoLine;

通过接口获取到数据后,一直为response形式,处理很久,最后通过 .then(response=>response.json())//将respose转成json格式,但我们任然取不到PromiseResult中的内容,需要再次通过then方法

ant design charts 获取后端接口数据展示

此时数据为json格式,为了取到json中的datas还需再 obj=response.datas[0];//获取json数据中的data部分,并对其开始进行处理

.then(response=>{
obj=response.datas[0];//获取json数据中的data部分,并对其开始进行处理
console.log(obj,'obj')

我们将取到的数据存在obj数组中

ant design charts 获取后端接口数据展示

之后再对数据进行操作,由于我这边的用的多折线图,ant design charts中 他所需要的数据格式是数组内以对象的形式放单个数据,如图

ant design charts 获取后端接口数据展示

所以我们需要对取到的obj数据数据进行处理,转换为对应的数据形式。pre为暂存数据数组。

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],
})
}
}

将我们的数据转换后通过usestate修改到data中

setData(pre)

ant design charts 获取后端接口数据展示

通过设置折线图的对应属性

const config = {
data,//简写data:data
xField: 'monthList',
yField: 'monthNumberList',
seriesField: 'typeNameList',
yAxis: {

},
legend: {
position: 'top',
},
smooth: true,
// @TODO 后续会换一种动画方式
animation: {
appear: {
animation: 'path-in',
duration: 5000,
},
},
};

最终效果

ant design charts 获取后端接口数据展示

到此这篇关于ant design charts 获取后端接口数据展示的文章就介绍到这了!


Tags in this post...

Javascript 相关文章推荐
javascript 面向对象全新理练之数据的封装
Dec 03 Javascript
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
js常用系统函数用法实例分析
Jan 12 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
在 Express 中使用模板引擎
Dec 10 Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
vue中echarts引入中国地图的案例
Jul 28 Javascript
Vue页面跳转传递参数及接收方式
Sep 09 Javascript
vue3不同环境下实现配置代理
May 25 #Vue.js
Typescript类型系统FLOW静态检查基本规范
Web应用开发TypeScript使用详解
May 25 #Javascript
vue使用element-ui按需引入
May 20 #Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 #Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 #Vue.js
Vue组件化(ref,props, mixin,.插件)详解
You might like
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
动态添加js事件实现代码
2009/03/12 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python 正则表达式入门(初级篇)
2016/12/07 Python
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
Python模拟用户登录验证
2017/09/11 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
巴西购物网站:Submarino
2020/01/19 全球购物
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
中科前程Java笔试题
2016/11/20 面试题
粗加工管理制度
2014/02/04 职场文书
冬季施工防火方案
2014/05/17 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
同学会演讲稿
2019/04/02 职场文书
导游词之西安骊山
2019/12/20 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python