Apache ECharts 5.6 Dirilis

 (echarts.apache.org)
11 poin oleh GN⁺ 2025-04-09 | 2 komentar | Bagikan ke WhatsApp
  • Apache ECharts adalah library visualisasi JavaScript open-source untuk mengimplementasikan visualisasi dengan cepat di web
  • Mendukung kombinasi lebih dari 20 jenis chart dan berbagai komponen, sehingga fleksibel untuk menyusun dashboard dan tampilan analitik
  • Mendukung rendering real-time untuk 10 juta data melalui peralihan Canvas dan SVG, progressive rendering, dan stream loading
  • Dapat digunakan dalam alur analisis multidimensi berkat pengelolaan berbasis dataset serta transformasi data seperti filtering, clustering, dan regression
  • Menyediakan deskripsi chart yang dibuat otomatis dan pola decal, sehingga pengguna yang membutuhkan aksesibilitas lebih mudah memahami isi dan konteks chart

Ikhtisar Apache ECharts

  • Apache ECharts adalah library visualisasi JavaScript open-source
  • Situs resminya dapat dilihat di https://echarts.apache.org
  • Di beranda terdapat pengumuman rilis Apache ECharts 6.1 beserta panduan untuk melihat changelog
  • Materi untuk memulai dan contoh tersedia di Get Started dan Demo

Susunan fitur

  • Chart dan komponen

    • Jenis chart bawaan berjumlah lebih dari 20
    • Disertakan sekitar 12 komponen, dan setiap elemen dapat dikombinasikan secara bebas

  • Rendering dan data berskala besar

    • Dapat beralih dengan mudah antara rendering Canvas dan SVG
    • Dapat merender 10 juta data secara real-time dengan progressive rendering dan stream loading

  • Analisis data

    • Data dikelola dengan dataset
    • Mendukung transformasi data seperti filtering, clustering, dan regression, sehingga data yang sama dapat dianalisis secara multidimensi

  • Desain visual

    • Desain bawaan mengikuti prinsip visualisasi
    • Mendukung desain responsif dan dapat dikustomisasi dengan pengaturan yang fleksibel

  • Komunitas dan ekstensi

    • Komunitas open-source yang aktif terus mengembangkan proyek ini
    • Berbagai ekstensi pihak ketiga juga tersedia

  • Aksesibilitas

    • Menyediakan deskripsi chart yang dibuat otomatis
    • Pola decal membantu pengguna dengan disabilitas memahami isi dan konteks chart

Materi sitasi dan kanal komunitas

  • Pengguna ECharts dapat mengutip makalah dalam aktivitas terkait seperti proyek R&D, produk, makalah riset, laporan teknis, berita, buku, presentasi, pendidikan, dan paten
  • Makalah yang dapat disitasi tersedia sebagai Visual Informatics, 2018 PDF
  • Kanal pembaruan yang dicantumkan meliputi GitHub, WeChat, Weibo, dan akun X

Bacaan terkait

2 komentar

 
jhk0530 2025-04-09

ECharts bagus dan oke. Secara pribadi, menurut saya lebih mudah digunakan daripada Highcharts.
 
GN⁺ 2025-04-09
Opini Hacker News

  • Saat membuat Briefer(https://briefer.cloud), saya mencoba hampir semua pustaka visualisasi, dan bisa mengatakan dengan yakin bahwa Apache ECharts adalah yang terbaik
    Pustaka lain umumnya jelek secara visual, sulit dipakai karena harus ditangani secara imperatif, atau kurang fleksibel
    ECharts punya desain bawaan yang cantik, memungkinkan menghitung spesifikasi grafik secara deklaratif di backend lalu hanya mengirim spesifikasi yang perlu dirender ke frontend, dan cukup fleksibel untuk mendukung hampir semua hal yang dilakukan alat BI tradisional
    Saya tidak pernah perlu memperluas pustaka ini untuk fitur baru; semua yang dibutuhkan sudah ada di dalamnya

    • Selain itu, ECharts adalah salah satu dari sangat sedikit dependensi proyek yang tidak membuat saya khawatir akan rusak saat di-upgrade
      Bahkan saat upgrade dari 3.x ke 5.x, cukup dengan npm update semuanya tetap berjalan baik, dan ini memberikan rasa percaya yang langka belakangan ini
      Cocok untuk SSR maupun SPA, dan karena sebagian besar berupa JavaScript murni, ia berjalan mulus bukan hanya dengan React/Vue/Alpine, tetapi juga di aplikasi server rendering tradisional seperti Rails/ASP.NET/PHP
      Di aplikasi SSR tipikal seperti https://www.jitbit.com/, kita bisa membuat objek JSON chart dengan query LINQ di server lalu meneruskannya ke ECharts, dan meneruskan objek reaktif dari SPA berbasis Vue pun tetap berjalan begitu saja
      Bahkan saat perlu workaround seperti menampilkan persentase tebal pada tooltip pie chart, hampir tidak pernah perlu membongkar source; sebagian besar solusinya sudah ada dan mudah ditemukan lewat pencarian atau LLM
    • Rasanya saya pernah melihatnya beberapa tahun lalu, tetapi akhirnya memilih Chart.js, dan sejauh ini hampir tidak ada yang tidak bisa dilakukan bahkan untuk kustomisasi aneh sekali pakai
      Untuk analitik bisnis, kami meng-host sendiri server Metabase
      Saya berharap Metabase punya lebih banyak pilihan visualisasi, tetapi konfigurasi model dan query-nya sangat mudah sehingga jarang ada permintaan yang cukup layak untuk membenarkan pembuatan chart kustom
    • Baru-baru ini saya membutuhkan line chart gradien di mana setiap langkah pada sumbu Y merepresentasikan warna dan harus bercampur dengan warna tetangganya; setelah mencoba beberapa opsi, hanya ECharts yang masuk akal
      Awalnya saya ragu karena kurangnya integrasi React yang jelas, tetapi pada akhirnya bisa digunakan dengan mudah seperti pustaka JavaScript lain dan hasilnya lebih baik dari ekspektasi
    • Saya sulit setuju dengan penilaian itu; https://plotly.com/javascript/ juga sangat bagus
      Saya juga terus memantau https://observablehq.com/plot/, dan sepertinya arahnya benar-benar sangat bagus
    • Cara implementasinya terlihat sangat mirip, jadi saya penasaran apa kelebihannya dibanding Chart.js

  • go-echarts https://github.com/go-echarts/go-echarts juga layak direkomendasikan
    Jika chart dideklarasikan dengan tipe Go, JSON marshaller Go otomatis melakukan binding ke JSON; saya sudah memakainya di beberapa proyek, dan ketika issue atau PR masuk, maintainer merespons dengan cepat
    Cara menyematkan fungsi JavaScript dan query SQL ke dalam Go menarik, dan data, SQL, Go, serta JavaScript bercampur dengan unik
    Contoh Go yang mengambil data dari DuckDB dan membuat file candlestick chart dengan tooltip JavaScript ada di sini: https://github.com/NimbleMarkets/dbn-duckduck-goose/blob/mai...

    • Saya banyak memakai Go dan DuckDB, tetapi sejauh ini untuk chart saya memakai kombinasi JavaScript/html/template yang agak kasar
      Ini terlihat enak untuk dicoba-coba

  • Menurut saya ECharts adalah yang terbaik saat ini
    Anehnya, ia tidak sering muncul di daftar pustaka chart atau hasil pencarian, tetapi setelah mencoba chart.js, Google Charts, amCharts, Highcharts, dan ApexCharts, kami menggunakannya di tool/pustaka kami https://docs.chartsql.com/

    • Sepertinya karena ini proyek Tiongkok
      Ant Design Components juga benar-benar hebat, tetapi belum dikenal seluas yang seharusnya
    • Saya penasaran bagaimana dengan D3.js
      Saya tahu D3.js itu low-level, tetapi dengan AI jadi cukup mudah
    • Saya suka VisX karena tingkat kontrolnya tinggi
    • Saya suka Plotly

  • Setelah mencoba beberapa pustaka, tahun lalu tim kami menetapkan pilihan pada Apache ECharts dan tidak menyesal
    Dokumentasinya bagus, performanya baik, sangat dapat dikonfigurasi sekaligus mudah dipakai, dan mendukung semua jenis chart yang kami butuhkan seperti bar, stacked bar, peta, time series yang bisa di-zoom/scroll, scatter plot, dan lainnya

    • Saya penasaran bagaimana jika dibandingkan dengan chart ag-grid

  • Line race terlihat sangat keren
    https://echarts.apache.org/examples/en/editor.html?c=line-ra...
    Jika switch dinyalakan, balapannya dimulai
    Sebagai tambahan, Norwegia tampil bagus

    • Terlihat rapi, tetapi berbeda dari contoh Hans Rosling yang disebut orang lain, animasi ini tidak memberi informasi tambahan
      Menampilkan frame terakhir saja bisa menyampaikan pesan yang sama dengan jauh lebih cepat dan lebih aksesibel; ini semacam chart junk
      https://en.wikipedia.org/wiki/Chartjunk
    • Sepertinya kredit perlu diberikan kepada Hans Rosling: https://www.youtube.com/watch?v=hVimVzgtD6w (2003)
    • Ada sesuatu yang tidak cocok
      Datanya tampaknya life-expectancy-table.json, tetapi judulnya mengarah ke Income
      Saya tidak tahu di mana kesalahannya terjadi
    • Saya penasaran seberapa besar korelasi bagian “Norwegia tampil bagus” dengan harga minyak

  • Jika mencari pustaka chart untuk klien web, charts.css juga direkomendasikan
    Sejujurnya terasa seperti penyelamat, dan konsepnya jauh lebih sederhana daripada sebagian besar pustaka chart, tetapi tetap bisa membuat hal yang sama
    Sangat mudah dipasang pada server-side rendering gaya lama, htmx, dan sebagainya
    https://chartscss.org/

    • Dalam arah yang mirip, sejak lama saya menyukai https://pancake-charts.surge.sh/ yang diperkuat dengan JavaScript
      Dikembangkan oleh tim grafis NYT dan digunakan untuk chart COVID
    • Chart.css lebih mirip salah satu dari banyak pustaka yang bisa menggambar line chart, dan dunianya benar-benar berbeda dari ECharts
    • Saya jadi bertanya-tanya apakah yang dimaksud dengan “bisa membuat hal yang sama” itu sudah melihat demo ECharts, atau demo amCharts yang berbayar https://www.amcharts.com/demos
      Saya tidak antipati terhadap charts.css itu sendiri, tetapi rasanya seperti membandingkan mainan plastik anak-anak dengan pesawat ulang-alik sungguhan
      Sebagian besar jam kerja saya dipakai untuk mengembangkan aplikasi analitik bisnis berat seperti Apache Superset, dan hal seperti itu mustahil diimplementasikan dengan chart.css
    • Seperti jawaban lain, saya setuju ECharts menyediakan jauh lebih banyak fitur, tetapi cara mengubah tabel data yang bermakna menjadi chart terlihat cukup bagus
      Saya menggunakan ECharts dengan puas, tetapi di tempat yang membutuhkan sparkline pada setiap baris tabel data, saya harus membuat terlalu banyak instans ECharts
      Untuk kebutuhan seperti itu, pustaka ini tampaknya cocok
    • Contoh animasi chartscss menyebalkan, dan secara fungsional juga tidak terlihat terlalu bagus

  • Sepertinya lebih baik membiarkan Apache tetap menempel pada namanya
    Jika disebut “ECharts, paket chart JS”, rasanya pemeliharaannya akan berhenti dalam setahun; jika disebut “Apache ECharts, paket chart JS”, rasanya masih akan dipelihara tahun depan

    • Menariknya, saya justru merasakan kebalikannya
      Ketika melihat ada Apache di depannya, saya cenderung menganggap pengembangannya sudah berhenti dan proyeknya legacy atau hanya dalam mode pemeliharaan
      Ada juga ungkapan “Apache adalah tempat proyek pergi untuk mati”

  • Senang melihat ECharts mendapat pengakuan yang layak
    Tidak berlebihan jika menyebutnya pustaka visualisasi open source terbaik yang ada saat ini
    Secara default menggunakan Canvas, sehingga lebih cepat daripada pustaka mana pun yang pernah saya pakai, dan cukup fleksibel untuk menaruh widget seperti tooltip kustom langsung di atas grafik
    Ia juga menyediakan banyak metadata seperti posisi titik tertentu di dalam chart yang sudah dirender, sehingga enak dimanfaatkan di kode; sangat bagus juga untuk dipakai di webapp legacy, dan situsnya menyediakan opsi untuk mengunduh build kustom
    Penanganan data streaming juga sangat baik, dengan animasi antarperubahan data yang sangat mulus
    Saya sudah memakainya selama hampir 7 tahun di berbagai proyek produksi dan pribadi, dan masih menjadi pilihan utama; dokumentasinya juga jauh membaik selama itu
    Kadang bug lama seperti masalah menangani 0 pada skala log terasa menjengkelkan, tetapi ada workaround, dan saya hampir tidak pernah melihat bug yang menghambat use case umum

    • Saya tidak tahu mengapa pustaka ini begitu jarang terlihat dalam perbandingan pustaka chart
      Bahkan tidak ada di halaman Wikipedia pustaka chart JavaScript, dan saya mengetahuinya secara kebetulan lewat Apache Superset

  • Dalam demo web cepat, hanya pustaka ini yang memungkinkan melihat dan memanipulasi graf sangat besar secara interaktif dengan komponen GraphGL
    Sepertinya bukan pustaka visualisasi yang sangat terkenal, tetapi cukup menarik

  • Saya baru saja meninjau pustaka chart untuk React/React Native, dan Apache ECharts tampak seperti kandidat yang bagus untuk visualisasi data lintas platform
    react-echarts(https://github.com/hugocxl/react-echarts) dan react-native-echarts(https://github.com/wuba/react-native-echarts) yang saya temukan sama-sama tampaknya aktif dikembangkan, dan fakta bahwa proyek ini berada di bawah Apache juga merupakan keunggulan besar untuk prospek pengembangan dan pemeliharaan ke depan