React搭配好用的图表模块Recharts

如果你正在寻找一个图表库||插件||模块来为你的React应用绘制一些统计||分析图表，那么本文可能会给你一些解决方法，并且你会看到一个本人正在使用的插件效果示例。

福利推荐：一个拥有多个10+主题的网站，such as：

正题：

基本的使用方法就不多说了，官网中英文文档都有，下面上Demo（此类图表本人未找到官网示例）。

左侧（条形图）是数量指标，右侧（线型图）是百分比。

接下来上代码吧：

//data

const data = [
  {stage: original_driver, vol: 20000, percentage: 100.0},
  {stage: enriched_driver, vol: 17000, percentage: 65.0},
  {stage: madmen_all, vol: 20000, percentage: 90.0}
]

...
import {
  ComposedChart, Line, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Label,
  Legend,
} from recharts
...
<div style={
         
  {marginLeft: 10%}}>
    <h6>Stats of Vol</h6>
    <ComposedChart
    width={600}
    height={460}
    data={data}
    margin={
         
  {
      top: 10, right: 20, bottom: 20, left: 20,
    }}
  >
    <CartesianGrid stroke="#f5f5f5" />
    <XAxis dataKey="stage"/>
    <YAxis yAxisId="left" orientation="left" stroke="#73b2ff" label={
         
  { value: Count, angle: -90, offset: 13, stroke:"#73b2ff", position: left }}/>
    <YAxis yAxisId="right" orientation="right" stroke="#ff7300" label={
         
  { value: Percentage, angle: 90, offset: 0, stroke:"#ff7300", position: right }}/>
    <Tooltip />
    <Legend />
    <Bar yAxisId="left" dataKey="vol" barSize={50} fill="#73b2ff"/>
    <Line yAxisId="right" type="monotone" dataKey="percentage" stroke="#ff7300" />
  </ComposedChart>
</div>
...

通往异世界的路就在这，不多说了，想多学就在上边的链接多探索。