安装

npm

npm i spritejs @qcharts/core cat-charts-react

CDN

<scriptsrc="https://unpkg.com/spritejs/dist/spritejs.min.js"></script><scriptsrc="https://unpkg.com/@qcharts/core/lib/index.js"></script><scriptsrc="https://unpkg.com/cat-charts-react/lib/index.js"></script>

绘制

importReactfrom'react'importReactDOMfrom'react-dom'import{Chart,Bar,Axis}from'cat-charts-react'functionApp(){constdata=[{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'}]constdataFields={row:'*',value:'value',text:'label'}return(<Chartdata={data}dataFields={dataFields}forceFit={true}><Bar/><Axis/><Axisorient={'left'}/></Chart>)}ReactDOM.render(<App/>,document.querySelector('#app'))