react-qcharts

qhcarts 的 React 组件封装

安装

npm

npm i spritejs @qcharts/core @qcharts/react

CDN

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

<script src="https://unpkg.com/[email protected]/dist/spritejs.min.js"></script>
<script src=""></script>
<script src=""></script>

使用

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 (
      <Chart
        data={data}
        dataFields={dataFields}
        size={size}
        forceFit={forceFit}
      >
        <Pie />
        <Legend />
      </Chart>
    )
  }
}