qcharts-react

基于 QCharts 封装的 React 图表组件库。使用上基本与 QCharts 一致。 → 详细文档

安装

npm

npm i spritejs @qcharts/core qcharts-react

CDN

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

<script src="https://unpkg.com/spritejs@3/dist/spritejs.min.js"></script>
<script src="https://unpkg.com/@qcharts/core@1/lib/index.js"></script>
<script src="https://unpkg.com/qcharts-react/lib/index.js"></script>

绘制

import React from 'react'
import ReactDOM from 'react-dom'
import { Chart, Bar, Axis } from 'qcharts-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 (
    <QChart data={data} dataFields={dataFields} forceFit={true}>
      <Bar />
      <Axis />
      <Axis orient={'left'} />
    </QChart>
  )
}
 
ReactDOM.render(<App />, document.querySelector('#app'))