74 lines
1.8 KiB
JavaScript
74 lines
1.8 KiB
JavaScript
|
import React, { useEffect, useState } from 'react';
|
||
|
|
import ReactEcharts from "echarts-for-react";
|
||
|
|
import { Col, Container, Row } from 'react-bootstrap';
|
||
|
|
import axios from 'axios';
|
||
|
|
import { getPieChartData } from '../TabulatorData';
|
||
|
|
|
||
|
|
function pichart(){
|
||
|
|
const [apiData, setapiData] = useState()
|
||
|
|
const option = {
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item',
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
type:'scroll',
|
||
|
|
orient: "horizontal",
|
||
|
|
bottom : "0%",
|
||
|
|
legendHoverLink: true,
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'pie',
|
||
|
|
data: apiData?.map((item, index)=>{
|
||
|
|
return(
|
||
|
|
{ value: item?.value, name: item?.title }
|
||
|
|
)
|
||
|
|
}),
|
||
|
|
label: {
|
||
|
|
width: 64,
|
||
|
|
overflow: "break",
|
||
|
|
fontSize: 12,
|
||
|
|
fontWeight : 'normal'
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
width : 1.5,
|
||
|
|
length2: 7,
|
||
|
|
length: 7
|
||
|
|
},
|
||
|
|
width: "100%",
|
||
|
|
height: "100%",
|
||
|
|
center : ['48%', '50%']
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
const onChartClick = (params) => {
|
||
|
|
console.log('Chart clicked', params);
|
||
|
|
};
|
||
|
|
const onEvents = {
|
||
|
|
click: onChartClick,
|
||
|
|
};
|
||
|
|
useEffect(()=>{
|
||
|
|
const getPieChartResult = () => {
|
||
|
|
// ⚠️ This is where you should pull data in from your server
|
||
|
|
const piechartResultsResponse = getPieChartData();
|
||
|
|
setapiData(piechartResultsResponse);
|
||
|
|
};
|
||
|
|
getPieChartResult();
|
||
|
|
},[])
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Container fluid>
|
||
|
|
<Row>
|
||
|
|
<Col xs={12} sm={12} md={12} lg={8}>
|
||
|
|
<ReactEcharts option={option} onEvents={onEvents}/>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
</Container>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default pichart
|
||
|
|
|