Browse Source

fe-19 金字塔图

master
Chunxian Zhang 2 years ago
parent
commit
8337cc3cde
1 changed files with 48 additions and 0 deletions
  1. +48
    -0
      lazy-timer-fe/src/pages/Charts/Pyramid.jsx

+ 48
- 0
lazy-timer-fe/src/pages/Charts/Pyramid.jsx View File

@ -0,0 +1,48 @@
import React from 'react';
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend, AccumulationDataLabel, AccumulationTooltip, PyramidSeries, AccumulationSelection } from '@syncfusion/ej2-react-charts';
import { PyramidData } from '../../data/dummy';
import { useStateContext } from '../../contexts/ContextProvider';
import { ChartsHeader } from '../../components';
const Pyramid = () => {
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="Pyramid" title="Food Comparison Chart" />
<div className="w-full">
<AccumulationChartComponent
id="pyramid-chart"
legendSettings={{ background: 'white' }}
tooltip={{ enable: true }}
background={currentMode === 'Dark' ? '#33373E' : '#fff'}
>
<Inject services={[AccumulationDataLabel, AccumulationTooltip, PyramidSeries, AccumulationLegend, AccumulationSelection]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective
name="Food"
dataSource={PyramidData}
xName="x"
yName="y"
type="Pyramid"
width="45%"
height="80%"
neckWidth="15%"
gapRatio={0.03}
explode
emptyPointSettings={{ mode: 'Drop', fill: 'red' }}
dataLabel={{
visible: true,
position: 'Inside',
name: 'text',
}}
/>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
</div>
</div>
);
};
export default Pyramid;

Loading…
Cancel
Save