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 相关文章推荐
动态改变textbox的宽高的js
Oct 26 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
webpack入门必知必会
Jan 16 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
JavaScript页面加载事件实例讲解
Sep 01 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 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核心代码分析require和include的区别
2011/01/02 PHP
PHP四大安全策略
2014/03/12 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
javascript 常用代码技巧大收集
2009/02/25 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
javascript实现完美拖拽效果
2015/05/06 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
python封装对象实现时间效果
2020/04/23 Python
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法
2020/11/05 Python
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
一些PHP的面试题
2015/05/06 面试题
社区母亲节活动记录
2014/03/06 职场文书
小学生常见病防治方案
2014/06/06 职场文书
心得体会的写法
2014/09/05 职场文书
2014年计生工作总结
2014/11/21 职场文书
行政前台岗位职责
2015/04/16 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS