Начало работы

Установка

Введите в своем терминале:

# npm
npm i effcharts

# pnpm
pnpm add effcharts

# yarn
yarn add effcharts

Быстрый старт

Вкратце, каждый веб-компонент должен быть определен перед использованием. Каждый модуль в этой библиотеке предоставляет такую функцию

• usePie из effcharts/pie позволяет использовать круговые и кольцевые диаграммы;
• useLine из effcharts/line позволяет использовать линейные диаграммы с вомзможностью заливки;
• useBar из effcharts/bar позволяет использовать столбчатые диаграммы (также столбчатые диаграммы с накоплением).

Каждая функция возвращает объект с обработчиками getConfig, observe и unbserve для управления поведением компонентов.

Например, вы решили использовать Столбчатую диаграмму:

import { useState, useEffect } from 'react';
import { useBar } from 'effcharts/bar';

// определите пользовательский веб-компонент перед использованием
// обратите внимание, что для SSR функцию необходимо вызывать до того, как браузер проанализирует текст документа
// поэтому вам может потребоваться добавить отдельный скрипт в заголовок документа
const { observe, getConfig } = useBar();

export const App = () => {
    const ref = useRef();
    const [config, setConfig] = useState(getConfig({
      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: 'blue'
        },
        sec: {
          title: 'Secondary',
          field: 'pv',
          color: 'green'
        }
      }
    }));
    useEffect(() => {
      // вы можете наблюдать за событиями веб-компонента
      const unobserve = observe((e) => {
        // обработчик события
      }, ref.current);
      // и вы можете отписаться от событий
      return () => unobserve();
    }, []);
    // просто используйте веб-компонент в jsx
    return <div ref={ref}>
        <effcharts-bar config={config}>
        </effcharts-bar>
    </div>;
}

Вот и все. Наслаждайтесь простотой.