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

今天在做项目的时候遇到几个让我很头疼的问题,一个是通过后端接口成功访问并又返回数据,但拿不到数据值。其二是直接修改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方法

此时数据为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中 他所需要的数据格式是数组内以对象的形式放单个数据,如图

所以我们需要对取到的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)

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

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后端接口数据内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Ant Design的可编辑Tree的实现操作

    前言 最近在用Ant Design写一个后台,遇到的需求就是实现一个可动态增减和编辑子节点的Tree.GitHub上看了一圈,没好用和合适的.索性就基于Ant Design中的Tree组件写一个. 实现的效果如下: 可以增加子节点 可以删除子节点 可以编辑子节点信息 可以取消编辑信息 具体的效果图如下: 主要的就是借助 TreeNode 的 title 属性,它的类型是string|ReactNode. 正文 经过分析,一个节点的数据结构应该是 { value: 'Root', // 显示的信息

  • 浅谈Ant Design Pro 菜单自定义 icon

    Ant Design Pro 官方文档说明 在菜单中使用自定义的 icon 由于 umi 的限制,在 router.config.js 是不能直接只是用组件的,Pro 中暂时支持 使用 ant.design本身的 icon type,和传入一个 img 的 url.只需要直接在 icon 属性上配置即可,如果是个 url,Pro 会自动处理为一个 img 标签. 如果这样还不能满足需求,可以自定义 getIcon 方法. 如果你想使用 iconfont 的图标,你可以使用ant.desgin的自

  • ant design的table组件实现全选功能以及自定义分页

    我就废话不多说了,大家还是直接看代码吧~ ant design的table组件实现全选功能以及自定义分页 直接附上全部代码以及截图了 import './index.scss'; import React from 'react'; import {Checkbox, Table, Popconfirm} from 'antd'; class TestComponent extends Component { constructor (props) { super(props); this.st

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

    今天在做项目的时候遇到几个让我很头疼的问题,一个是通过后端接口成功访问并又返回数据,但拿不到数据值.其二是直接修改state中的data,console中数组发生变化但任然数据未显示. import React, { useState, useEffect } from 'react'; import { Line } from '@ant-design/plots'; import { PageContainer } from '@ant-design/pro-layout'; import

  • vue中使用echarts实现动态数据绑定以及获取后端接口数据

    目录 前言 1.柱状图 2.折线图 3.饼状图 4.地图 总结 前言 之前几篇echarts的文章是实现了静态的柱状图.折线图.饼状图.地图,在项目中我们肯定是需要获取后端接口,将后端返回的数据显示在图表上,所以这次就记录一下如何实现echarts的动态数据绑定. 简单来讲,就是从接口获取到的数据,需要在图表的方法里再次定义一下,然后用setOption方法就可以获取到了. 1.柱状图 首先看接口传过来的数据,传过来一个数组,第一条年度2021,数量1,第二条年度2022,数量3 因为柱状图的数

  • php 获取xml接口数据的处理方法

    xml格式返回的是数据一般是这样的,但也有不同: <?xml version="1.0" encoding="gbk"?> <root> <head> <actdate>20170805</actdate> <trdate>20170805</trdate> <trtime>142410</trtime> <trseq>20170807001<

  • Vue实现获取后端接口API代码片段(已封装Service方法名)

    目录 Vue获取后端接口API代码片段 常用的Vue代码片段 (复制即用) 前三步 第四步(复制进去) 使用代码片段 Vue获取后端接口API代码片段 this.showLoading(); //显示加载动画 let data = { /*传参*/ id: this.id }; API.方法名(data) .then((d) => { if (d.code === 0) { /*这里写代码*/ } else { console.log("失败", d.msg); } this.h

  • 前端如何调用后端接口进行数据交互详解(axios和SpringBoot)

    目录 一.介绍 二.项目结构 三.代码编写 四.运用 总结 前端调用后端接口,获得数据并渲染 一.介绍 一个完善的系统,前后端交互是必不可少的,这个过程可以分成下面几步: 前端向后端发起请求后端接口接收前端的参数后,开始层层调用方法处理数据后端将最终数据返回给前端接口前端请求成功后,将数据渲染至界面 对于初学者而言,前后端交互感觉十分困难,其实并不难,现在,我们做一个小例子,在例子中,大家就明白了. 二.项目结构 前端技术:axios 后端技术:SpringBoot(这个也无所谓,但是你一定要有

  • ECharts调用接口获取后端数据的四种方法总结

    目录 方法一:在mounted中使用定时器调用eacharts方法(定时器可以获取到data中的数据) 方法二:在调用数据的时候调用图表(一个页面的所有数据都在这一个接口中) 方法三:使用chartes中的dataset数据集 方法四:在对应图表中,用ajax请求 注意 总结 使用eacharts做大屏,需要使用后端数据,下面的方法是自己试过有效的,有什么不对的,望各位大佬指点. 方法一:在mounted中使用定时器调用eacharts方法(定时器可以获取到data中的数据) mounted (

  • vue2.x 通过后端接口代理,获取qq音乐api的数据示例

    前言: 部分qq音乐的api接口不能直接通过jsonp访问,需要通过官方的代理才能获取,如:歌词,推荐歌单等 1. webpack.dev.conf.js中创建接口: // 开头调用: var express = require('express') var axios = require('axios') var app = express() var apiRoutes = express.Router() app.use('/api', apiRoutes) // devServer的最后

  • SpringBoot连接MySQL获取数据写后端接口的操作方法

    1.新建项目 2.添加依赖 <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.20</version> </dependency> <dependency> <groupId>org.springframework</groupId>

  • Vue Element前端应用开发之根据ABP后端接口实现前端展示

    概述 ABP(ASP.NET Boilerplate)框架主要是基于.net core 进行的后端Web API的开发,结合Swagger的管理界面我们可以看到发布的 API 的接口明细信息,这样前端技术人员可以很容易整合前端的API应用.Vue + Element的前端应用,是目前较为流行的前端技术整合,Vue提供了前端框架很好的支持,Element提供了非常不错的界面组件封装和处理,通过ABP后端API接口和前端Vue+Element的整合,可以很好实现前后端的分离处理,同时又极大提高各自开

  • Vue Element前端应用开发之获取后端数据

    概述 在前面随笔<循序渐进VUE+Element 前端应用开发之动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据用户角色对应的菜单实现本地路由的过滤和绑定,菜单顺利弄好了,就需要进一步开发页面功能了,本篇随笔介绍一个案例,通过获取后端数据后,进行产品信息页面的处理. 1.后端数据的获取处理 前后端的边界则非常清晰,前端可以在通过网络获取对应的JSON就可以构建前端的应用了. 我们通过Vue.config.js的配置信息,可以

随机推荐