rechart入门

开头篇

在没用react之前也行用的图标库就是haightchart或者echarts，当你转向react之后，你就该用用recharts了，一个基于react组件的组合图表库。

简介

Recharts是一个基于react组件的组合图标库。

拥有三大特性：Composable(可组合的)、Reliable(可靠的)、Powerful(强大的);
1. Composable 快速用解耦的、可重用的React组件构建你的图表。
2. Reliable 一个在D3子模块基于SVG元素的轻量级依赖
3. Powerful 通过调整组件属性和传递自定义组件来自定义图表

安装方法

NPM安装

npm安装是最简单、最快速的开始使用Recharts的方法。这也是推荐的安装方式，对CommonJS的打包工具Webpack是绝配。

    $ npm install recharts

注意:要在项目路径安装，意思就是安装局部的，不是全局的。

使用方法

用一个example来介绍

js代码

    import React from 'react';
    import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend} from “recharts”;

    class SimpleLineChart extends React.Compent{
        render () {

            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},
            ];

        return (
            <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>
        );
      }
    }

    export default SimpleLineChart;

Tip

首先必须进入官网学习,刚入门先去看Examples,值得注意的是那上面的例子每一个都是一个应用，如果新手想集成进项目的话，格式按照我上面的例子来。然后就是每个例子右上角有个Edit in JSFiddle 点进去可以在线编辑，及时预览。这是新手学习react最好的地方。