Browse Source

fe-14 完成面积图组件和柱状图组件

master
Chunxian Zhang 2 years ago
parent
commit
10b8a5ff3b
3 changed files with 86 additions and 0 deletions
  1. +34
    -0
      lazy-timer-fe/src/pages/Charts/Area.jsx
  2. +35
    -0
      lazy-timer-fe/src/pages/Charts/Bar.jsx
  3. +17
    -0
      lazy-timer-fe/src/pages/index.jsx

+ 34
- 0
lazy-timer-fe/src/pages/Charts/Area.jsx View File

@ -0,0 +1,34 @@
import React from 'react';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, DateTime, SplineAreaSeries, Legend } from '@syncfusion/ej2-react-charts';
import { ChartsHeader } from '../../components';
import { areaCustomSeries, areaPrimaryXAxis, areaPrimaryYAxis } from '../../data/dummy';
import { useStateContext } from '../../contexts/ContextProvider';
const Area = () => {
const { currentMode } = useStateContext();
return (
<div className="m-4 md:m-10 mt-24 p-10 bg-white dark:bg-secondary-dark-bg rounded-3xl">
<ChartsHeader category="Area" title="Inflation Rate in percentage" />
<div className="w-full">
<ChartComponent
id="charts"
primaryXAxis={areaPrimaryXAxis}
primaryYAxis={areaPrimaryYAxis}
chartArea={{ border: { width: 0 } }}
background={currentMode === 'Dark' ? '#33373E' : '#fff'}
legendSettings={{ background: 'white' }}
>
<Inject services={[SplineAreaSeries, DateTime, Legend]} />
<SeriesCollectionDirective>
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
{areaCustomSeries.map((item, index) => <SeriesDirective key={index} {...item} />)}
</SeriesCollectionDirective>
</ChartComponent>
</div>
</div>
);
};
export default Area;

+ 35
- 0
lazy-timer-fe/src/pages/Charts/Bar.jsx View File

@ -0,0 +1,35 @@
import React from 'react';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, ColumnSeries, DataLabel } from '@syncfusion/ej2-react-charts';
import { barCustomSeries, barPrimaryXAxis, barPrimaryYAxis } from '../../data/dummy';
import { ChartsHeader } from '../../components';
import { useStateContext } from '../../contexts/ContextProvider';
const Bar = () => {
const { currentMode } = useStateContext();
return (
<div className="m-4 md:m-10 mt-24 p-10 bg-white dark:bg-secondary-dark-bg rounded-3xl">
<ChartsHeader category="Bar" title="Olympic Medal Counts - RIO" />
<div className=" w-full">
<ChartComponent
id="charts"
primaryXAxis={barPrimaryXAxis}
primaryYAxis={barPrimaryYAxis}
chartArea={{ border: { width: 0 } }}
tooltip={{ enable: true }}
background={currentMode === 'Dark' ? '#33373E' : '#fff'}
legendSettings={{ background: 'white' }}
>
<Inject services={[ColumnSeries, Legend, Tooltip, Category, DataLabel]} />
<SeriesCollectionDirective>
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
{barCustomSeries.map((item, index) => <SeriesDirective key={index} {...item} />)}
</SeriesCollectionDirective>
</ChartComponent>
</div>
</div>
);
};
export default Bar;

+ 17
- 0
lazy-timer-fe/src/pages/index.jsx View File

@ -0,0 +1,17 @@
export { default as Ecommerce } from './Ecommerce';
export { default as Kanban } from './Kanban';
export { default as Orders } from './Orders';
export { default as Employees } from './Employees';
export { default as Editor } from './Editor';
export { default as Customers } from './Customers';
export { default as ColorPicker } from './ColorPicker';
export { default as Calendar } from './Calendar';
export { default as Area } from './Charts/Area';
export { default as Bar } from './Charts/Bar';
export { default as ColorMapping } from './Charts/ColorMapping';
export { default as Financial } from './Charts/Financial';
export { default as Line } from './Charts/Line';
export { default as Pie } from './Charts/Pie';
export { default as Pyramid } from './Charts/Pyramid';
export { default as Stacked } from './Charts/Stacked';

Loading…
Cancel
Save