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 相关文章推荐
滚动经典最新话题[prototype框架]下编写
Oct 03 Javascript
javascript使用eval或者new Function进行语法检查
Oct 16 Javascript
关于jquery append() html时的小问题的解决方法
Dec 16 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
使用vue-resource进行数据交互的实例
Sep 02 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
linux 后台运行node服务指令方法
May 23 Javascript
es6基础学习之解构赋值
Dec 10 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 Javascript
JS图片预加载三种实现方法解析
May 08 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 ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
ExtJS下grid的一些属性说明
2009/12/13 Javascript
Ext 今日学习总结
2010/09/19 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
让JavaScript中setTimeout支持链式操作的方法
2015/06/19 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
python实现维吉尼亚算法
2019/03/20 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
软件测试题目
2013/02/27 面试题
美工的岗位职责
2013/11/14 职场文书
公司委托书范本
2014/04/04 职场文书
技术入股合作协议书
2014/10/07 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
英语教师求职信范文
2015/03/20 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
Python入门学习之类的相关知识总结
2021/05/25 Python
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS
Elasticsearch 数据类型及管理
2022/04/19 Python
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android