Переглянути джерело

fe-32 ej2-react-charts 饼状图

master
Chunxian Zhang 2 роки тому
джерело
коміт
2ec31b8711
1 змінених файлів з 46 додано та 0 видалено
  1. +46
    -0
      lazy-timer-fe/src/components/Charts/Pie.jsx

+ 46
- 0
lazy-timer-fe/src/components/Charts/Pie.jsx Переглянути файл

@ -0,0 +1,46 @@
import React from 'react';
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, AccumulationLegend, PieSeries, AccumulationDataLabel, Inject, AccumulationTooltip } from '@syncfusion/ej2-react-charts';
import { useStateContext } from '../../contexts/ContextProvider';
const Doughnut = ({ id, data, legendVisiblity, height }) => {
const { currentMode } = useStateContext();
return (
<AccumulationChartComponent
id={id}
legendSettings={{ visible: legendVisiblity, background: 'white' }}
height={height}
background={currentMode === 'Dark' ? '#33373E' : '#fff'}
tooltip={{ enable: true }}
>
<Inject services={[AccumulationLegend, PieSeries, AccumulationDataLabel, AccumulationTooltip]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective
name="Sale"
dataSource={data}
xName="x"
yName="y"
innerRadius="40%"
startAngle={0}
endAngle={360}
radius="70%"
explode
explodeOffset="10%"
explodeIndex={2}
dataLabel={{
visible: true,
name: 'text',
position: 'Inside',
font: {
fontWeight: '600',
color: '#fff',
},
}}
/>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
);
};
export default Doughnut;

Завантаження…
Відмінити
Зберегти