Creating the Reports page
Now, we'll build the Reports page. Users can access helpful information on this page to get insights into the sales life cycle. We'll add three charts to this page using the chart component library bizcharts.
The bizcharts library is focused on business scenarios and dedicated to creating professional data visualization solutions. It's also an open source project licensed under the MIT license. You can learn more about bizcharts at https://bizcharts.taobao.com/:
- First, run this command to install the bizcharts package:
$ yarn add bizcharts
- Next, run this command to generate the Reports page:
$ yarn umi g page /Reports/index --typescript --less
Now, follow these steps to create the Reports page interface:
- Let's define the page layout with
antd
components. Add the following components to theindex.tsx
file under thesrc/pages/Reports
folder:import { PageContainer } from '@ant-design/pro-layout'; import...