import React, { useEffect, useRef } from 'react';
import ReactEcharts from 'echarts-for-react';
const BarChart = () => {
const chartRef = useRef(null);
let timer;
useEffect(() => {
// 设置定时器，每隔2秒刷新图表数据
timer = setInterval(() => {
updateChartData();
}, 2000);
return () => {
// 组件卸载时清除定时器
clearInterval(timer);
};
}, []);
const updateChartData = () => {
// 更新图表数据
const chartInstance = chartRef.current.getEchartsInstance();
const option = chartInstance.getOption();
option.series[0].data = [10, 20, 30, 40, 50]; // 更新数据，这里假设获取了新的数据
chartInstance.setOption(option); // 更新图表
};
const option = {
// 图表的配置项
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
type: 'value'
},
series: [{
data: [10, 20, 30, 40, 50],
type: 'bar'
}]
};
return (
<ReactEcharts
ref={chartRef}
option={option}
style={{ height: '300px' }} // 设置图表的高度
/>
);
};
export default BarChart;
