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 05 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 Javascript
js封装可使用的构造函数继承用法分析
Jan 28 Javascript
javascript实现动态表头及表列的展现方法
Jul 14 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
微信小程序报错:this.setData is not a function的解决办法
Sep 27 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
浅析Vue中拆分视图层代码的5点建议
Aug 15 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 URL编码解码函数代码
2009/03/10 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
jquery键盘事件使用介绍
2011/11/01 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
Django时区详解
2019/07/24 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
CSS3绘制不规则图形的一些方法示例
2015/11/07 HTML / CSS
华为的Java面试题
2014/03/07 面试题
暑期实践思想汇报
2014/01/06 职场文书
单位创先争优活动方案
2014/01/26 职场文书
大学运动会通讯稿
2014/01/28 职场文书
学校卫生检查制度
2014/02/03 职场文书
党的群众路线学习材料
2014/05/16 职场文书
本科毕业生自荐信
2014/06/02 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
校车司机安全责任书
2015/05/11 职场文书
利用Python判断你的密码难度等级
2021/06/02 Python
Python使用openpyxl模块处理Excel文件
2022/06/05 Python