Primeros pasos

Instalación

Escribe en tu terminal:

# npm
npm i effcharts

# pnpm
pnpm add effcharts

# yarn
yarn add effcharts

Inicio rápido

En resumen, cada componente web debe definirse antes de su uso. Cada módulo de esta biblioteca proporciona una función para ello.

• usePie de effcharts/pie permite usar gráficos circulares y de anillos;
• useLine de effcharts/line permite usar gráficos de líneas y de área;
• useBar de effcharts/bar permite usar gráficos de barras (incluidos los de barras apiladas).

Cada función devuelve un objeto con los manejadores getConfig, observe y unobserve para controlar el comportamiento de los componentes.

Por ejemplo, si desea usar un gráfico de barras:

import { useState, useEffect } from 'react';

import { useBar } from 'effcharts/bar';

// define el componente web personalizado antes de usarlo
// ten en cuenta que, para la renderización del lado del servidor (SSR), debes llamarlo antes de que el navegador analice el cuerpo del documento
// por lo tanto, es posible que debas agregar un script de definición aparte al encabezado del documento
const { observe } = useBar();

export const App = () => {
    const ref = useRef();
    // la configuración del gráfico debe satisfacer el tipo `TBarConfig`
    const [config, setConfig] = useState(JSON.stringify({
      data: [
        {
            name: 'Page A',
            uv: 4000,
            pv: 2400,
            amt: -2400,
        },
        {
            name: 'Page B',
            uv: 3000,
            pv: 1398,
            amt: -2210,
        },
        {
            name: 'Page C',
            uv: 2000,
            pv: 9800,
            amt: -2290,
        }
      ],
      series: {
        def: {
          title: 'Default',
          field: 'uv',
          color: 'oklch(0.49 0.13 268.85)'
        },
        sec: {
          title: 'Secondary',
          field: 'pv',
          color: 'oklch(0.61 0.1 213.72)'
        }
      }
    }));
    useEffect(() => {
      // puedes observar los eventos de los componentes web 
      const unobserve = observe((e) => {
        // controlador de eventos
      }, ref.current);
      // y puedes dejar de observar
      return () => unobserve();
    }, []);
    // Simplemente usa el componente web en JSX
    // y pasa la configuración como contenido de texto
    return <div ref={ref}>
      <effcharts-bar>
        {config}
      </effcharts-bar>
    </div>;
}

Eso es todo. Disfruta de la sencillez.