Visualisasi Data dengan ECharts di React

Apache ECharts adalah pustaka visualisasi data yang mendukung berbagai jenis chart — garis, batang, pie, peta, bahkan grafik 3D — dengan performa yang baik untuk dataset besar dan interaktivitas bawaan seperti zoom dan tooltip.

Instalasi

npm install echarts echarts-for-react

Paket echarts-for-react menyediakan wrapper komponen React di atas ECharts murni, sehingga tidak perlu mengelola manipulasi DOM secara manual.

Membuat Chart Garis Sederhana

import ReactECharts from "echarts-for-react";

function GrafikPenjualan() {
  const opsi = {
    xAxis: {
      type: "category",
      data: ["Jan", "Feb", "Mar", "Apr", "Mei"],
    },
    yAxis: { type: "value" },
    series: [
      {
        data: [120, 200, 150, 80, 220],
        type: "line",
        smooth: true,
      },
    ],
  };

  return <ReactECharts option={opsi} style={{ height: "400px" }} />;
}

Seluruh konfigurasi chart ECharts ditulis sebagai satu objek option — pola ini konsisten di semua jenis chart yang didukungnya.

Chart Batang dengan Beberapa Seri

const opsi = {
  tooltip: { trigger: "axis" },
  legend: { data: ["Produk A", "Produk B"] },
  xAxis: { type: "category", data: ["Q1", "Q2", "Q3", "Q4"] },
  yAxis: { type: "value" },
  series: [
    { name: "Produk A", type: "bar", data: [320, 302, 301, 334] },
    { name: "Produk B", type: "bar", data: [220, 182, 191, 234] },
  ],
};

Menghubungkan Chart dengan Data Dinamis dari API

function GrafikPengunjung() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("/api/statistik-pengunjung")
      .then((r) => r.json())
      .then(setData);
  }, []);

  const opsi = {
    xAxis: { type: "category", data: data.map((d) => d.tanggal) },
    yAxis: { type: "value" },
    series: [{ data: data.map((d) => d.jumlah), type: "line" }],
  };

  return <ReactECharts option={opsi} style={{ height: "400px" }} />;
}

Menangani Interaksi Klik pada Chart

function GrafikInteraktif() {
  const events = {
    click: (params) => {
      console.log("Titik data diklik:", params.name, params.value);
    },
  };

  return <ReactECharts option={opsi} onEvents={events} />;
}

Pie Chart

const opsiPie = {
  series: [
    {
      type: "pie",
      radius: "60%",
      data: [
        { value: 40, name: "Mobile" },
        { value: 35, name: "Desktop" },
        { value: 25, name: "Tablet" },
      ],
    },
  ],
};

Kesimpulan

ECharts menyediakan cara deklaratif membangun chart lewat satu objek konfigurasi, cukup fleksibel untuk kebutuhan dari chart sederhana sampai dashboard kompleks dengan banyak seri data. Dikombinasikan dengan echarts-for-react, mengintegrasikannya ke dalam siklus data React — termasuk memperbarui chart otomatis saat data dari API berubah — menjadi jauh lebih sederhana dibanding memanipulasi instance ECharts secara manual.

Visualisasi Data dengan ECharts di React.