react-qcharts

> qhcarts 的 React 组件封装

安装

$3

``shell
npm i spritejs @qcharts/core @qcharts/react
`

$3

在 HTML 文件依次引入 spritejs、@qcharts/core 和 @qcharts/react

`html



`

使用

`javascript
import React from 'react'
import { Chart, Pie, Legend } from '@qcharts/react' // 按需要引入相关组件

class App extends React.Component {
static defaultProps = {
data: [
{ product: '茶叶', year: '2016', sales: 81.2 },
{ product: '茶叶', year: '2017', sales: 121.2 },
{ product: '茶叶', year: '2018', sales: 41.2 },
{ product: '牛奶', year: '2016', sales: 89.2 },
{ product: '牛奶', year: '2017', sales: 79.6 },
{ product: '牛奶', year: '2018', sales: 60.2 },
{ product: '咖啡', year: '2016', sales: 35.2 },
{ product: '咖啡', year: '2017', sales: 79.6 },
{ product: '咖啡', year: '2018', sales: 61.2 },
{ product: '椰汁', year: '2016', sales: 35.2 },
{ product: '椰汁', year: '2017', sales: 79.6 },
{ product: '椰汁', year: '2018', sales: 21.2 }
],
dataFields: { row: 'year', value: 'sales', text: 'product' },
size: ['100%', '100%'],
forceFit: true
}

render() {
const {
data = [],
dataFields = {},
size = [0, 0],
forceFit = false
} = this.props

return (
data={data}
dataFields={dataFields}
size={size}
forceFit={forceFit}
>

)
}
}

``