https://github.com/spritejs/cat-charts-react
A visulization library based on spritejs , qcharts and React
https://github.com/spritejs/cat-charts-react
Last synced: 2 months ago
JSON representation
A visulization library based on spritejs , qcharts and React
- Host: GitHub
- URL: https://github.com/spritejs/cat-charts-react
- Owner: spritejs
- Created: 2019-06-13T09:06:16.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T01:00:35.000Z (about 3 years ago)
- Last Synced: 2025-01-08T23:11:18.388Z (about 1 year ago)
- Language: Vue
- Homepage: https://www.spritejs.com/cat-charts-react/
- Size: 7.3 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# cat-charts-react
> 基于 QCharts 封装的 React 图表组件库。使用上基本与 QCharts 一致。 → 详细文档
## 安装
### npm
```shell
npm i spritejs @qcharts/core cat-charts-react
```
### CDN
在 HTML 文件依次引入 `spritejs`、`@qcharts/core` 和 `cat-charts-react`
```html
```
## 绘制
```javascript
import React from 'react'
import ReactDOM from 'react-dom'
import { Chart, Bar, Axis } from 'cat-charts-react'
function App() {
const data = [
{ value: 6100, label: 'TOP1' },
{ value: 5200, label: 'TOP2' },
{ value: 4400, label: 'TOP3' },
{ value: 3700, label: 'TOP4' },
{ value: 2800, label: 'TOP5' },
{ value: 2000, label: 'TOP6' },
{ value: 1300, label: 'TOP7' },
{ value: 400, label: 'TOP8' }
]
const dataFields = {
row: '*',
value: 'value',
text: 'label'
}
return (
)
}
ReactDOM.render(, document.querySelector('#app'))
```
Demo：Quickstart