echarts-for-react

import React, { useState, useEffect, useRef } from 'react'; import ReactECharts from 'echarts-for-react'; // Or use 'echarts-for-react/lib/core' with manual imports import * as echarts from 'echarts/core'; import { BarChart } from 'echarts/charts'; import { GridComponent, TooltipComponent, TitleComponent, DatasetComponent } from 'echarts/components'; import { CanvasRenderer } from 'echarts/renderers'; // Register necessary ECharts components if using ReactEChartsCore // For ReactECharts (default import), these are often included, but explicit registration is good practice echarts.use([ BarChart, GridComponent, TooltipComponent, TitleComponent, DatasetComponent, CanvasRenderer ]); const EChartsDemo: React.FC = () => { const chartRef = useRef<echarts.ECharts | null>(null); const getOption = () => { return { title: { text: 'ECharts Sample Bar Chart' }, tooltip: {}, xAxis: { type: 'category', data: ['Category A', 'Category B', 'Category C', 'Category D', 'Category E'] }, yAxis: { type: 'value' }, series: [{ name: 'Sales', data: [120, 200, 150, 80, 70], type: 'bar' }] }; }; const onChartReady = (instance: echarts.ECharts) => { console.log('ECharts instance is ready:', instance); chartRef.current = instance; }; const onEvents = { 'click': (params: any) => { console.log('Chart clicked:', params.name); }, 'mouseover': (params: any) => { // console.log('Mouse over:', params.seriesName); } }; useEffect(() => { // Example: Manual resize after a delay (e.g., if container size changes dynamically) const timer = setTimeout(() => { chartRef.current?.resize(); console.log('ECharts instance manually resized.'); }, 2000); return () => clearTimeout(timer); }, []); return ( <div style={{ width: '100%', height: '400px', border: '1px solid #ccc', padding: '10px' }}> <h3>Your ECharts Visualization</h3> <ReactECharts option={getOption()} notMerge={true} lazyUpdate={true} theme="light" onChartReady={onChartReady} onEvents={onEvents} opts={{ renderer: 'canvas' }} // Recommend specifying renderer explicitly style={{ height: '100%' }} /> </div> ); }; export default EChartsDemo;