mirror of
https://github.com/zuiidea/antd-admin
synced 2026-10-28 03:04:48 +00:00
add UI Components: charts
This commit is contained in:
@@ -88,6 +88,14 @@ const Routers = function ({ history, app }) {
|
||||
cb(null, require('./routes/UIElement/editor/'))
|
||||
}, 'UIElement-editor')
|
||||
},
|
||||
}, {
|
||||
path: 'UIElement/charts',
|
||||
name: 'UIElement/charts',
|
||||
getComponent (nextState, cb) {
|
||||
require.ensure([], require => {
|
||||
cb(null, require('./routes/UIElement/charts/'))
|
||||
}, 'UIElement-charts')
|
||||
},
|
||||
}, {
|
||||
path: '*',
|
||||
name: 'error',
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
import React from 'react'
|
||||
import { Row, Col, Card } from 'antd'
|
||||
import {
|
||||
LineChart,
|
||||
Line,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
Legend,
|
||||
} from 'recharts'
|
||||
|
||||
const data = [
|
||||
{
|
||||
name: 'Page A',
|
||||
uv: 4000,
|
||||
pv: 2400,
|
||||
amt: 2400,
|
||||
}, {
|
||||
name: 'Page B',
|
||||
uv: 3000,
|
||||
pv: 1398,
|
||||
amt: 2210,
|
||||
}, {
|
||||
name: 'Page C',
|
||||
uv: 2000,
|
||||
pv: 9800,
|
||||
amt: 2290,
|
||||
}, {
|
||||
name: 'Page D',
|
||||
uv: 2780,
|
||||
pv: 3908,
|
||||
amt: 2000,
|
||||
}, {
|
||||
name: 'Page E',
|
||||
uv: 1890,
|
||||
pv: 4800,
|
||||
amt: 2181,
|
||||
}, {
|
||||
name: 'Page F',
|
||||
uv: 2390,
|
||||
pv: 3800,
|
||||
amt: 2500,
|
||||
}, {
|
||||
name: 'Page G',
|
||||
uv: 3490,
|
||||
pv: 4300,
|
||||
amt: 2100,
|
||||
},
|
||||
]
|
||||
|
||||
const colProps = {
|
||||
lg: 12,
|
||||
md: 24,
|
||||
}
|
||||
|
||||
const SimpleLineChart = () => (
|
||||
<LineChart width={600} height={300} data={data} margin={{
|
||||
top: 5,
|
||||
right: 30,
|
||||
left: 20,
|
||||
bottom: 5,
|
||||
}}>
|
||||
<XAxis dataKey="name" />
|
||||
<YAxis />
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{
|
||||
r: 8,
|
||||
}} />
|
||||
<Line type="monotone" dataKey="uv" stroke="#82ca9d" />
|
||||
</LineChart>
|
||||
)
|
||||
|
||||
const EditorPage = () => (
|
||||
<div className="content-inner">
|
||||
<Row gutter={32}>
|
||||
<Col {...colProps}>
|
||||
<Card title="SimpleLineChart">
|
||||
<SimpleLineChart />
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default EditorPage
|
||||
Reference in New Issue
Block a user