108 lines
2.6 KiB
JavaScript
108 lines
2.6 KiB
JavaScript
import React, { useEffect, useState } from 'react'
|
|
import ReactEcharts from "echarts-for-react";
|
|
import { Col, Container, Row } from 'react-bootstrap';
|
|
import { getBarchartData } from '../TabulatorData';
|
|
|
|
let option;
|
|
var app = {};
|
|
const Barchart = () => {
|
|
const [apiData1, setapiData1] = useState()
|
|
const series = apiData1?.map((item)=>({
|
|
name: item?.name,
|
|
data: item?.data,
|
|
}))
|
|
app.config = {
|
|
rotate: 67,
|
|
align: 'right',
|
|
verticalAlign: 'middle',
|
|
position: 'bottom',
|
|
distance: 6,
|
|
};
|
|
const labelOption = {
|
|
show: true,
|
|
position: app.config.position,
|
|
distance: app.config.distance,
|
|
align: app.config.align,
|
|
verticalAlign: app.config.verticalAlign,
|
|
rotate: app.config.rotate,
|
|
formatter: '{c} {name|{a}}',
|
|
fontSize: 12,
|
|
rich: {
|
|
name: {
|
|
color: 'red',
|
|
fontSize: 12,
|
|
},
|
|
}
|
|
};
|
|
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
data: series?.map(item => item?.name),
|
|
top:"2%",
|
|
},
|
|
toolbox: {
|
|
show: true,
|
|
orient: 'vertical',
|
|
left: 'right',
|
|
top: 'center',
|
|
feature: {
|
|
mark: { show: true },
|
|
dataView: { show: true, readOnly: false },
|
|
magicType: { show: true, type: ['bar', 'line'] },
|
|
restore: { show: true },
|
|
saveAsImage: {
|
|
type: "svg"
|
|
}
|
|
}
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
axisTick: { show: false },
|
|
data: ['', '', '', '', ''],
|
|
boundaryGap: true,
|
|
triggerEvent : true
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
}
|
|
],
|
|
series: series?.map((item, index) => Object.assign(item, {
|
|
type: 'bar',
|
|
label: labelOption,
|
|
}))
|
|
};
|
|
useEffect(()=>{
|
|
// Echarts Barchart
|
|
const getBarChartResult = () => {
|
|
// ⚠️ This is where you should pull data in from your server
|
|
const barchartResultsResponse = getBarchartData();
|
|
setapiData1(barchartResultsResponse);
|
|
};
|
|
getBarChartResult();
|
|
// Echarts Barchart end
|
|
}, [])
|
|
return (
|
|
<>
|
|
<Container fluid>
|
|
<Row>
|
|
<Col>
|
|
<ReactEcharts option={option}/>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Barchart
|
|
|