- 了解如何使用第三方组件库。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="react-with-addons.min.js"></script>
<script src="react-dom.js"></script>
<script src="react-dom-server.min.js"></script>
<script src="Recharts.min.js"></script>
<script src="babel.min.js"></script>
</head>
<body>
<div id="example" style="width: 1000px;height: 800px;"></div>
<script type="text/babel">
const {LineChart, Line, XAxis, YAxis, CartesianGrid} = 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 TinyLineChart = React.createClass({
render () {
return (
<LineChart width={1000} height={400} data={data}>
<XAxis dataKey="name"/>
<YAxis/>
<CartesianGrid stroke="#eee" strokeDasharray="5 5"/>
<Line type="monotone" dataKey="uv" stroke="#8884d8" />
<Line type="monotone" dataKey="pv" stroke="#82ca9d" />
</LineChart>
);
}
})
ReactDOM.render(
<TinyLineChart />,
document.getElementById('example')
);
</script>
</body>
</html>
复制代码
2334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
