56 lines
1.4 KiB
JavaScript
56 lines
1.4 KiB
JavaScript
import React, { useEffect, useState } from 'react'
|
|
import { Col, Container, Row } from 'react-bootstrap';
|
|
import ReactEcharts from "echarts-for-react";
|
|
import axios from 'axios';
|
|
|
|
const bubblechart = () => {
|
|
const [apiData2, setapiData2] = useState()
|
|
const scatterData = apiData2?.map((item)=>({
|
|
name: item?.title,
|
|
value: [item?.id, item?.discountPercentage, item?.title],
|
|
itemStyle: 'blue'
|
|
}));
|
|
const option2 = {
|
|
xAxis: {},
|
|
yAxis: {},
|
|
tooltip: {
|
|
triggerOn: "mousemove",
|
|
alwaysShowContent: true,
|
|
position: 'top'
|
|
},
|
|
series: [
|
|
{
|
|
symbolSize: 20,
|
|
data: scatterData,
|
|
type: 'scatter'
|
|
}
|
|
]
|
|
};
|
|
const onBubbleChartClick = (params) => {
|
|
console.log('Chart clicked', params);
|
|
};
|
|
const onEvents = {
|
|
click: onBubbleChartClick,
|
|
};
|
|
useEffect(()=>{
|
|
axios.get('https://dummyjson.com/products')
|
|
.then(res => {
|
|
const values = res?.data?.products;
|
|
setapiData2(values);
|
|
})
|
|
|
|
},[])
|
|
return (
|
|
<>
|
|
<Container fluid>
|
|
<Row>
|
|
<Col xs={12} sm={12} md={12} lg={12} xxl={12}>
|
|
<ReactEcharts option={option2} onEvents={onEvents}/>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default bubblechart |