Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/geallenboy/react-chart
基于g2plot封装react图表库
https://github.com/geallenboy/react-chart
g2 react
Last synced: 14 days ago
JSON representation
基于g2plot封装react图表库
- Host: GitHub
- URL: https://github.com/geallenboy/react-chart
- Owner: geallenboy
- License: mit
- Created: 2022-04-01T06:02:36.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2022-04-12T07:53:51.000Z (almost 3 years ago)
- Last Synced: 2025-01-10T08:39:52.233Z (16 days ago)
- Topics: g2, react
- Language: TypeScript
- Homepage: http://reactchart.gejialun.vip
- Size: 16.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## 安装
```bash
npm install @garron/react-chart
```
## 使用
```js
import { LineChart } from '@garron/react-chart';
```
## Examples
```tsx
import React, { useCallback } from 'react';
import { LineChart, ColumnChart, PieChart, BarChart } from '@garron/react-chart';
const config = {
height: 350,
autoFit: true,
xField: 'year',
yField: 'value',
smooth: true,
meta: {
value: {
max: 15
}
},
data: [
{ year: '1991', value: 3 },
{ year: '1992', value: 4 },
{ year: '1993', value: 3.5 },
{ year: '1994', value: 5 },
{ year: '1995', value: 4.9 },
{ year: '1996', value: 6 },
{ year: '1997', value: 7 },
{ year: '1998', value: 9 },
{ year: '1999', value: 11 }
]
};
const pieConfig = {
height: 350,
autoFit: true,
padding: 'auto',
radius: 1,
data: [
{
type: 'A',
value: 27
},
{
type: 'B',
value: 25
},
{
type: 'C',
value: 18
},
{
type: 'D',
value: 15
},
{
type: 'E',
value: 10
},
{
type: 'Others',
value: 5
}
],
angleField: 'value',
colorField: 'type',
label: {
visible: true,
type: 'inner'
},
legend: {
visible: false
}
};
export default () => {
return (
);
};
```