11 poin oleh GN⁺ 2025-04-09 | 2 komentar | Bagikan ke WhatsApp
  • ECharts adalah pustaka visualisasi JavaScript open-source yang dioptimalkan untuk PC maupun mobile
  • Kompatibel dengan sebagian besar browser modern seperti Internet Explorer 9/10/11, Chrome, Firefox, Safari, dan lainnya
  • Menggunakan mesin rendering grafis miliknya sendiri, ZRender, untuk menyediakan chart berkualitas tinggi yang intuitif dan interaktif

Menyediakan berbagai jenis chart

  • Menyediakan line chart, bar chart, scatter plot, pie chart, candlestick chart, boxplot, peta, heatmap, line chart untuk informasi arah, graph relasi, treemap, sunburst, koordinat paralel, funnel chart, gauge chart, dan lain-lain
  • Dapat membuat chart gabungan dengan mengombinasikan berbagai jenis visualisasi
  • Mendukung chart series kustom sehingga cukup dengan meneruskan fungsi callback renderItem, elemen grafis yang diinginkan dapat diimplementasikan dengan bebas
  • Fitur interaktif sudah tertanam dan bisa langsung digunakan tanpa konfigurasi tambahan

Ringan dan mendukung unduhan selektif komponen

  • Paket dasar sudah sangat dioptimalkan, tetapi sesuai kebutuhan, Anda dapat memilih hanya jenis chart dan komponen yang diperlukan untuk membuat paket yang lebih ringan
  • Melalui online builder, Anda dapat mengunduh bundle kustom yang hanya berisi fitur yang dibutuhkan

Mendukung berbagai format data

  • Sejak v4.0, mendukung berbagai struktur data seperti array dua dimensi dan objek key-value melalui properti dataset
  • Dengan properti encode, struktur data dapat dipetakan secara intuitif
  • Menghemat waktu penulisan algoritme transformasi data dan meminimalkan penggunaan memori
  • Satu dataset dapat dibagikan ke beberapa komponen
  • Dukungan TypedArray memungkinkan penghematan memori dan peningkatan performa

Dioptimalkan untuk visualisasi data skala besar

  • Menyediakan teknologi incremental rendering untuk visualisasi jutaan titik data
  • Fitur interaktif seperti zoom dan pan juga tetap berjalan mulus pada data berukuran besar
  • Mendukung rendering data streaming dengan memanfaatkan WebSocket
  • Visualisasi tetap dimungkinkan tanpa harus memuat seluruh data sekaligus

Optimasi mobile

  • Dioptimalkan untuk fungsi zoom dan pan di lingkungan mobile
  • Di PC, operasi yang sama dapat dilakukan melalui mouse wheel
  • Menyediakan paket kecil untuk mobile
  • Saat memilih mesin rendering SVG, penggunaan memori dapat dikurangi lebih lanjut

Berbagai metode rendering dan kompatibilitas platform

  • Mendukung berbagai metode rendering seperti Canvas, SVG (v4.0 ke atas), dan VML
  • VML kompatibel dengan browser IE lama, SVG efisien dalam penggunaan memori di mobile, dan Canvas kuat untuk pemrosesan skala besar
  • Di lingkungan Node.js, server-side rendering (SSR) dimungkinkan melalui node-canvas
  • Juga dapat digunakan di WeChat MiniProgram
  • Komunitas juga mengembangkan ekstensi bahasa seperti Python(pyecharts), R(echarty), dan Julia(ECharts.jl)
  • Dengan dukungan untuk berbagai platform dan bahasa, developer dapat fokus sepenuhnya pada visualisasi itu sendiri

Fitur eksplorasi data berbasis interaksi

  • Memungkinkan penelusuran dari keseluruhan data ke detail data melalui zoom, pan, dan filtering
  • Menyediakan beragam komponen interaktif seperti legend, visualMap, dataZoom, tooltip, dan brush
  • Data dapat dieksplorasi melalui berbagai cara di antarmuka pengguna

Peningkatan kemampuan visualisasi data multidimensi

  • Sejak ECharts 3, dukungan untuk visualisasi data multidimensi telah diperkuat
  • Selain visualisasi multidimensi tradisional seperti sistem koordinat paralel, data juga dapat direpresentasikan dengan berbagai cara lain
  • Dengan memanfaatkan komponen visualMap, data dimensi dapat dipetakan ke atribut visual seperti warna, ukuran, transparansi, dan shading

Refleksi data secara real-time

  • Saat dataset berubah, perubahan tersebut langsung tercermin pada chart secara real-time
  • Perubahan data dideteksi secara otomatis dan ditampilkan pada chart melalui animasi
  • Melalui komponen timeline, data juga dapat ditampilkan mengikuti aliran waktu

Menyediakan efek visual khusus

  • Efek visual dapat diterapkan pada semua jenis data seperti titik, garis, dan data geografis
  • Menarik perhatian pengguna dan meningkatkan daya penyampaian data

Visualisasi 3D berbasis WebGL

  • ECharts GL berbasis WebGL mendukung beragam visualisasi 3D seperti globe 3D, bangunan, histogram populasi, dan lainnya
  • Efek visual dapat ditambahkan hanya dengan pengaturan sederhana
  • Juga dapat dimanfaatkan untuk VR dan layar besar

Dukungan aksesibilitas

  • Mematuhi standar aksesibilitas WAI-ARIA dari W3C
  • Secara otomatis menghasilkan deskripsi untuk pengguna tunanetra berdasarkan informasi konfigurasi chart
  • Konten visualisasi dapat diakses melalui screen reader

2 komentar

 
jhk0530 2025-04-09

ECharts bagus dan oke. Secara pribadi, menurut saya lebih mudah digunakan daripada Highcharts.

 
GN⁺ 2025-04-09
Komentar Hacker News
  • Saat mengembangkan Briefer, saya menguji hampir semua pustaka visualisasi, dan Apache ECharts adalah yang terbaik

    • Masalah utama pustaka lain adalah (a) desainnya kurang bagus (b) sulit digunakan (c) kurang fleksibel
    • Apache ECharts menyelesaikan masalah-masalah ini
    • Secara bawaan tampil cantik, dapat menghitung spesifikasi deklaratif di backend lalu mengirimkannya ke frontend, dan cukup fleksibel untuk mendukung semua yang bisa dilakukan alat BI tradisional
    • Semua yang dibutuhkan sudah tersedia tanpa perlu menambahkan fitur baru
    • Senang melihat karya hebat ini di HN
  • Saya juga merekomendasikan go-echarts

    • Anda bisa mendeklarasikan chart dengan tipe Golang, dan JSON marshaler Golang akan otomatis mengikatnya ke JSON
    • Saya sudah memakainya di beberapa proyek, dan maintainer merespons dengan cepat saat ada issue atau PR
    • Menyematkan fungsi JavaScript dan kueri SQL ke dalam Go itu menyenangkan
    • Ada contoh Golang yang mengambil data dari DuckDB dan menghasilkan file chart candlestick dengan tooltip JavaScript
  • Setelah mencoba banyak pustaka lain, tahun lalu saya memutuskan memakai Apache ECharts dan tidak menyesal

    • Dokumentasi yang hebat, performa, konfigurasi yang sangat tinggi, mudah digunakan, dan mendukung semua jenis chart yang saya perlukan
  • Saya rasa ECharts adalah pustaka terbaik

    • Tidak sering muncul di daftar atau hasil pencarian pustaka chart
    • Saya sudah mencoba chart.js, google charts, amCharts, Highcharts, dan ApexCharts
    • Kami memakainya di alat/pustaka kami
  • Sejak 2020 saya sudah menggunakan Apache ECharts di produk

    • Sangat direkomendasikan, pustaka yang hebat, dokumentasi yang hebat, tidak ada masalah selama 5 tahun
    • Saya berharap ada peningkatan untuk tiket aksesibilitas keyboard
  • Line race-nya sangat keren

    • Anda bisa memulai balapan dengan menyalakan switch
    • Norwegia tampil bagus
  • Jika Anda mencari pustaka chart untuk klien web, saya juga merekomendasikan charts.css

    • Konsepnya jauh lebih sederhana daripada kebanyakan pustaka chart, namun bisa mencapai fungsi yang sama
    • Sangat mudah digunakan bersama server-side rendering, htmx, dan sebagainya
  • Saat melihat pengumuman paket chart JS bernama ECharts, saya mengira pemeliharaannya akan dihentikan dalam 1 tahun

    • Saat melihat pengumuman paket chart JS bernama Apache ECharts, saya mengira tahun depan paket ini masih akan dipelihara
  • Saya sedang mencari pustaka chart untuk React/React Native, dan Apache ECharts adalah kandidat yang sangat baik untuk visualisasi data lintas platform

    • Baik react-echarts maupun react-native-echarts sama-sama dikembangkan secara aktif
    • Berada di bawah Apache adalah keuntungan besar bagi prospek pengembangan dan pemeliharaan proyek di masa depan
  • Saya menambahkan ECharts sebagai pustaka chart untuk AI, dan sedang mengalihkan chart GUI dasar ke ECharts

    • Saya melakukan peninjauan yang luas sebelum memilih, dan memilih ECharts karena unggul dan sangat indah