0.1.3 • Published 1 year ago
@laser-ui/rcharts v0.1.3
@laser-ui/rcharts
Apache Echarts for React.
Installation
npm install @laser-ui/rcharts
Getting Started
import type { ECharts } from 'echarts/core';
import { RCharts } from '@laser-ui/rcharts';
import { useEffect, useRef } from 'react';
export default function App() {
const chartRef = useRef<ECharts>(null);
useEffect(() => {
if (chartRef.current) {
chartRef.current.setOption({
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
},
],
});
}
const tid = setTimeout(() => {
if (chartRef.current) {
chartRef.current.setOption(
{
series: [
{
data: [150, 230, 224, 218, 135, 147, 260].reverse(),
type: 'line',
},
],
},
{ replaceMerge: 'series' },
);
}
}, 3000);
return () => {
clearTimeout(tid);
};
}, []);
return <RCharts ref={chartRef} style={{ width: 400, height: 400 }} />;
}
API
export interface RChartsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
init?: (el: HTMLDivElement) => ECharts;
autoResize?: boolean;
autoResizeDebounce?: number;
}