78 lines
2.0 KiB
JavaScript
78 lines
2.0 KiB
JavaScript
/**
|
||
* Created by gxl.gao on 2017/10/25.
|
||
*/
|
||
import React, { Component } from 'react';
|
||
// import PropTypes from 'prop-types'
|
||
import axios from 'axios';
|
||
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
|
||
import { Spin } from 'antd';
|
||
class StatisChart extends Component {
|
||
static propTypes = {};
|
||
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
showLoading: true,
|
||
chartDate: {
|
||
mockCount: 0,
|
||
mockDateList: []
|
||
}
|
||
};
|
||
}
|
||
|
||
UNSAFE_componentWillMount() {
|
||
this.getMockData();
|
||
}
|
||
|
||
// 获取mock 请求次数信息
|
||
async getMockData() {
|
||
let result = await axios.get('/api/plugin/statismock/get');
|
||
if (result.data.errcode === 0) {
|
||
let mockStatisData = result.data.data;
|
||
this.setState({
|
||
showLoading: false,
|
||
chartDate: { ...mockStatisData }
|
||
});
|
||
}
|
||
}
|
||
|
||
render() {
|
||
const width = 1050;
|
||
const { mockCount, mockDateList } = this.state.chartDate;
|
||
|
||
return (
|
||
<div>
|
||
<Spin spinning={this.state.showLoading}>
|
||
<div className="statis-chart-content">
|
||
<h3 className="statis-title">mock 接口访问总数为：{mockCount.toLocaleString()}</h3>
|
||
<div className="statis-chart">
|
||
<LineChart
|
||
width={width}
|
||
height={300}
|
||
data={mockDateList}
|
||
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
|
||
>
|
||
<XAxis dataKey="_id" />
|
||
<YAxis />
|
||
<CartesianGrid strokeDasharray="7 3" />
|
||
<Tooltip />
|
||
<Legend />
|
||
<Line
|
||
name="mock统计值"
|
||
type="monotone"
|
||
dataKey="count"
|
||
stroke="#8884d8"
|
||
activeDot={{ r: 8 }}
|
||
/>
|
||
</LineChart>
|
||
</div>
|
||
<div className="statis-footer">过去3个月mock接口调用情况</div>
|
||
</div>
|
||
</Spin>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default StatisChart;
|