Başlarken

Kurulum

Terminalinize şunu yazın:

# npm
npm i effcharts

# pnpm
pnpm add effcharts

# yarn
yarn add effcharts

Hızlı başlangıç

Özetle, her bir web bileşeni kullanılmadan önce tanımlanmalıdır. Bu kütüphanedeki her modül, bu amaçla bir fonksiyon sunar:

• effcharts/pie içindeki usePie, pasta ve halka grafiklerin kullanılmasını sağlar;
• effcharts/line içindeki useLine, çizgi ve alan grafiklerinin kullanılmasını sağlar;
• effcharts/bar içindeki useBar, çubuk grafiklerin (yığılmış çubuk grafikler dahil) kullanılmasını sağlar.

Her fonksiyon; bileşenlerin davranışını kontrol etmeye yarayan getConfig, observe ve unobserve işleyicilerini (handler) içeren bir nesne döndürür.

Örneğin, bir sütun grafiği (Bar chart) kullanmak istediğinizi varsayalım:

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

// Kullanmadan önce özel web bileşenini tanımlayın
// SSR için, tarayıcı belge gövdesini ayrıştırmadan önce çağırmanız gerektiğini unutmayın
// bu nedenle belge başlığına ayrı bir tanımlama betiği eklemeniz gerekebilir
const { observe } = useBar();

export const App = () => {
    const ref = useRef();
    // grafik yapılandırması `TBarConfig` türünü karşılamalıdır
    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(() => {
      // web bileşeni olaylarını gözlemleyebilirsiniz
      const unobserve = observe((e) => {
        // olay işleyicisi
      }, ref.current);
      // ve takibi bırakabilirsiniz
      return () => unobserve();
    }, []);
    // JSX'te web bileşenini kullanmanız yeterli
    // ve yapılandırmayı metin içeriği olarak iletin
    return <div ref={ref}>
      <effcharts-bar>
        {config}
      </effcharts-bar>
    </div>;
}

İşte bu kadar. Sadeliğin tadını çıkarın.