11 puan yazan GN⁺ 2025-04-09 | 2 yorum | WhatsApp'ta paylaş
  • Apache ECharts, web üzerinde görselleştirmeleri hızlıca hayata geçirmeye yarayan açık kaynaklı bir JavaScript görselleştirme kütüphanesidir
  • 20’den fazla grafik türü ve çeşitli bileşenler birlikte kullanılabildiği için dashboard ve analiz ekranları oluşturmada esneklik sağlar
  • Canvas ve SVG arasında geçiş, aşamalı rendering ve stream loading ile 10 milyon veri noktasının gerçek zamanlı render edilmesini destekler
  • Dataset tabanlı yönetim ve filtreleme, clustering, regresyon gibi veri dönüşümleri sayesinde çok boyutlu analiz akışlarında kullanılabilir
  • Otomatik oluşturulan grafik açıklamaları ve decal pattern desteği sunarak erişilebilirliğe ihtiyaç duyan kullanıcıların grafiğin içeriğini ve bağlamını anlamasını kolaylaştırır

Apache ECharts’e genel bakış

  • Apache ECharts, açık kaynaklı bir JavaScript görselleştirme kütüphanesidir
  • Resmî siteye https://echarts.apache.org adresinden ulaşılabilir
  • Ana sayfada Apache ECharts 6.1 duyurusuyla birlikte changelog inceleme yönlendirmesi bulunur
  • Başlangıç materyalleri ve örnekler Get Started, Demo olarak sunulur

Özellikler

  • Grafikler ve bileşenler

    • Yerleşik grafik türleri 20’den fazladır
    • Yaklaşık 12 bileşen de birlikte sunulur; her öğe istenen şekilde birleştirilerek kullanılabilir
  • Rendering ve büyük ölçekli veri

    • Canvas ve SVG rendering arasında kolayca geçiş yapılabilir
    • Aşamalı rendering ve stream loading ile 10 milyon veri noktası gerçek zamanlı render edilebilir
  • Veri analizi

    • Veriler dataset ile yönetilir
    • Filtreleme, clustering, regresyon gibi veri dönüşümlerini destekleyerek aynı verinin çok boyutlu analiz edilmesine olanak tanır
  • Görsel tasarım

    • Varsayılan tasarım, görselleştirme ilkelerini izler
    • Responsive tasarımı destekler ve esnek ayarlarla özelleştirilebilir
  • Topluluk ve genişletilebilirlik

    • Aktif açık kaynak topluluğu projenin geliştirilmesini sürdürür
    • Çeşitli üçüncü taraf eklentiler de sunulur
  • Erişilebilirlik

    • Otomatik oluşturulan grafik açıklamaları sağlar
    • Decal pattern desteğiyle engelli kullanıcıların grafik içeriğini ve bağlamını anlamasına yardımcı olur

Atıf kaynakları ve topluluk kanalları

  • ECharts kullanıcıları, AR-GE projeleri, ürünler, araştırma makaleleri, teknik raporlar, haberler, kitaplar, sunumlar, eğitimler, patentler gibi ilgili faaliyetlerde makaleye atıf yapabilir
  • Atıf yapılacak makale Visual Informatics, 2018 PDF olarak sunulur
  • Güncelleme kanalları olarak GitHub, WeChat, Weibo ve X hesapları belirtilir

2 yorum

 
jhk0530 2025-04-09

ECharts güzel ve oldukça iyi. Bana göre Highcharts'a kıyasla kullanımı daha kolaydı.

 
GN⁺ 2025-04-09
Hacker News yorumları
  • Briefer(https://briefer.cloud)'ı geliştirirken neredeyse tüm görselleştirme kütüphanelerini denedim ve rahatlıkla Apache ECharts'ın en iyisi olduğunu söyleyebilirim
    Diğer kütüphaneler genelde ya çirkindi, ya imperatif biçimde yönetilmeleri gerektiği için kullanımı zordu, ya da esneklikleri yetersizdi
    ECharts'ın varsayılan tasarımı güzel; backend'de deklaratif grafik tanımını hesaplayıp frontend'e yalnızca render edilecek tanımı gönderebiliyorsunuz ve geleneksel BI araçlarının yaptığı neredeyse her şeyi destekleyecek kadar esnek
    Yeni özellikler için kütüphaneyi genişletmek zorunda hiç kalmadık; ihtiyaç duyulan şeyler zaten içinde vardı

    • Bununla da kalmıyor, ECharts proje bağımlılıkları arasında yükseltme yapınca bozulacağından neredeyse hiç endişe etmediğimiz tek kütüphaneydi
      3.x'ten 5.x'e yükseltirken bile sadece npm update ile sorunsuz çalışmaya devam etti; bugünlerde nadir görülen bir güven veriyor
      Hem SSR hem de SPA tarafına iyi uyuyor; büyük ölçüde saf JavaScript olduğu için React/Vue/Alpine'in yanı sıra Rails/ASP.NET/PHP gibi geleneksel sunucu tarafı render edilen uygulamalarda da sorunsuz çalışıyor
      https://www.jitbit.com/ gibi tipik bir SSR uygulamasında sunucudaki LINQ sorgusuyla grafik JSON nesnesi oluşturup ECharts'a verebilir, Vue tabanlı bir SPA'daki reaktif nesneyi verdiğinizde de aynı şekilde çalıştırabilirsiniz
      Pasta grafik tooltip'inde kalın yüzdeler göstermek gibi bir geçici çözüm gerektiğinde bile kaynak kodun içine dalmanız neredeyse hiç gerekmiyor; çoğu şey için zaten çözüm var ve aramayla ya da LLM ile kolayca bulunabiliyor
    • Birkaç yıl önce bakmıştım sanırım ama sonunda Chart.js'i seçtim; tuhaf tek seferlik özel işlerde bile şimdiye kadar neredeyse yapamadığım bir şey olmadı
      İş analitiği için Metabase sunucusunu kendimiz barındırıyoruz
      Metabase'de daha fazla görselleştirme seçeneği olmasını isterdim ama model ve sorgu ayarları o kadar kolay ki özel grafik yapmayı haklı çıkaracak talepler sık gelmiyor
    • Yakın zamanda Y eksenindeki her adımın bir rengi temsil ettiği ve komşu renklerle karışması gereken bir gradyan çizgi grafiğine ihtiyaç duydum; birkaç seçenek denedikten sonra yalnızca ECharts mantıklı geldi
      Başta net bir React entegrasyonunun olmaması yüzünden tereddüt ettim ama diğer JavaScript kütüphaneleri gibi sonunda kolayca kullanabildim ve beklediğimden daha iyi çıktı
    • Bu değerlendirmeye katılmak zor; https://plotly.com/javascript/ da çok iyi
      https://observablehq.com/plot/'u da takip ediyorum; gerçekten harika bir yöne gidiyor gibi görünüyor
    • Uygulama biçimi çok benzer görünüyor; Chart.js'ten hangi açılardan daha iyi olduğunu merak ediyorum
  • go-echarts https://github.com/go-echarts/go-echarts da tavsiye edilebilir
    Grafikleri Go tipleriyle tanımladığınızda Go'nun JSON marshaller'ı bunları otomatik olarak JSON'a bağlar; birkaç projede kullandım ve issue ya da PR açıldığında bakımcısı hızlı yanıt verdi
    JavaScript fonksiyonlarını ve SQL sorgularını Go içine gömme biçimi ilginç; veri, SQL, Go ve JavaScript tuhaf bir şekilde birbirine karışıyor
    DuckDB'den veri alıp JavaScript tooltip içeren candlestick grafik dosyası üreten Go örneği burada: https://github.com/NimbleMarkets/dbn-duckduck-goose/blob/mai...

    • Go ve DuckDB'yi çok kullanıyorum; şimdiye kadar grafikler için kaba bir JavaScript/html/template kombinasyonu kullanıyordum
      Bu, kurcalamak için iyi görünüyor
  • ECharts'ın şu anda mevcut en iyi seçenek olduğunu düşünüyorum
    Garip şekilde grafik kütüphanesi listelerinde ya da arama sonuçlarında sık çıkmıyor ama chart.js, Google Charts, amCharts, Highcharts ve ApexCharts'ı denedikten sonra kendi aracımız/kütüphanemizde https://docs.chartsql.com/ bunu kullanıyoruz

    • Sanırım Çin projesi olduğu için
      Ant Design Components da gerçekten harika ama hak ettiği kadar bilinmiyor
    • D3.js nasıl olur merak ediyorum
      D3.js'in düşük seviyeli olduğunu biliyorum ama yapay zeka varken epey kolaylaşıyor
    • Yüksek kontrol seviyesi sunduğu için VisX'i seviyorum
    • Plotly'yi seviyorum
  • Birkaç kütüphaneyi denedikten sonra geçen yıl ekip olarak Apache ECharts'ta karar kıldık ve pişman değiliz
    Dokümantasyonu harika, performansı iyi, yüksek oranda yapılandırılabilir olmasına rağmen kullanımı kolay ve çubuk, yığılmış çubuk, harita, yakınlaştırma/kaydırma yapılabilen zaman serisi, dağılım grafiği gibi ihtiyaç duyduğumuz tüm grafik türlerini destekliyor

    • ag-grid grafikleriyle karşılaştırıldığında nasıl olduğunu merak ediyorum
  • Çizgi yarışı gerçekten harika görünüyor
    https://echarts.apache.org/examples/en/editor.html?c=line-ra...
    Anahtarı açınca yarış başlıyor
    Ayrıca Norveç iyi iş çıkarmış

    • Görünüşü temiz ama başka birinin bahsettiği Hans Rosling örneğinin aksine bu animasyon ek bilgi vermiyor
      Yalnızca son kareyi göstermek aynı mesajı çok daha hızlı ve erişilebilir biçimde iletebilir; bu bir tür chartjunk
      https://en.wikipedia.org/wiki/Chartjunk
    • Sanırım hakkını Hans Rosling'e vermek gerekir: https://www.youtube.com/watch?v=hVimVzgtD6w (2003)
    • Bir şeyler tutarsız
      Veri life-expectancy-table.json gibi görünüyor ama başlık Income'ı işaret ediyor
      Hatanın nerede olduğunu bilmiyorum
    • “Norveç iyi iş çıkarmış” kısmının petrol fiyatıyla ne kadar korelasyonlu olduğunu merak ediyorum
  • Web istemcisi için bir grafik kütüphanesi arıyorsanız charts.css’i de öneririm
    Açıkçası bir kurtarıcı gibi; kavramı çoğu grafik kütüphanesinden çok daha basit, ama aynı şeyleri yapabiliyor
    Eski usul sunucu tarafı render etme, htmx vb. ile çok kolay entegre oluyor
    https://chartscss.org/

    • Benzer bir çizgide, JavaScript ile güçlendirilmiş https://pancake-charts.surge.sh/’ı uzun zamandır seviyorum
      NYT grafik ekibi geliştirdi ve COVID grafiklerinde kullanıldı
    • Chart.css, çizgi grafiği çizebilen sayısız kütüphaneden birine daha yakın; ECharts ise bambaşka bir dünya
    • “Aynı şeyleri yapabiliyor” derken ECharts demolarına ya da ücretli amCharts demolarına https://www.amcharts.com/demos bakıp bakmadığınızı merak ediyorum
      charts.css’e karşı bir antipatim yok, ama çocuklar için plastik bir oyuncağı gerçek bir uzay mekiğiyle karşılaştırmak gibi geliyor
      Çalışma saatlerimin çoğunu Apache Superset gibi ağır iş analitiği uygulamaları geliştirmeye harcıyorum; chart.css gibi bir şeyle bunları gerçekleştirmek imkânsız
    • Diğer yanıtlardaki gibi ECharts’ın çok daha fazla özellik sunduğuna katılıyorum, ama anlamlı bir veri tablosunu grafiğe dönüştürme yaklaşımı oldukça iyi görünüyor
      ECharts’ı memnuniyetle kullanıyorum, ancak veri tablosunun her satırı için sparkline gereken yerlerde çok fazla ECharts örneği oluşturmak gerekiyor
      Bu kütüphane böyle bir kullanım için uygun görünüyor
    • chartscss’in animasyon örneği can sıkıcı ve işlevsel olarak da pek iyi görünmüyor
  • Adında Apache’yi bırakmak daha iyi olur bence
    “ECharts, JS grafik paketi” derseniz 1 yıl içinde bakımı kesilecekmiş gibi geliyor; “Apache ECharts, JS grafik paketi” derseniz gelecek yıl da sürdürülecekmiş gibi duruyor

    • İlginç şekilde bana tam tersi hissettiriyor
      Apache adını görünce geliştirmesi durmuş, legacy ya da sadece bakım modunda olan bir proje varsayıyorum
      “Apache, projelerin ölmeye gittiği yerdir” diye bir söz de var
  • ECharts’ın hak ettiği takdiri görmesine sevindim
    Mevcut en iyi açık kaynak görselleştirme kütüphanesi demek abartı olmaz
    Varsayılan olarak Canvas kullandığı için denediğim tüm kütüphanelerden daha hızlı; ayrıca grafiğin üstüne özel tooltip gibi widget’ları doğrudan yerleştirecek kadar esnek
    Render edilmiş grafikteki belirli noktaların konumu gibi bolca metadata da sağlıyor, bu yüzden kodda kullanması kolay; eski web uygulamalarına eklemek de çok iyi, ayrıca siteden özel build indirme seçeneği sunuyor
    Streaming veri işlemede de çok başarılı; veri değişimleri arasındaki animasyonlar son derece akıcı
    Yaklaşık 7 yıldır çeşitli production ve kişisel projelerde kullanıyorum, hâlâ ilk tercihim; dokümantasyonu da bu süre içinde ciddi şekilde iyileşti
    Log ölçeğinde 0’ı ele alma gibi eski bug’lar can sıkıcı olabiliyor ama workaround’ları var; genel kullanım senaryolarında engelleyen bug’a neredeyse hiç rastlamadım

    • Grafik kütüphanesi karşılaştırmalarında neden bu kadar nadir göründüğünü bilmiyorum
      JavaScript grafik kütüphaneleri Wikipedia sayfasında bile yok; Apache Superset üzerinden tesadüfen öğrendim
  • Hızlı web demosunda, çok büyük grafikleri GraphGL bileşeniyle etkileşimli olarak görüntüleyip manipüle edebilen tek kütüphane buydu
    Çok bilinen bir görselleştirme kütüphanesi gibi görünmüyor ama oldukça ilginç

  • React/React Native için grafik kütüphanelerine yeni bakıyordum; Apache ECharts çapraz platform veri görselleştirme adayı olarak iyi görünüyor
    Baktığım react-echarts(https://github.com/hugocxl/react-echarts) ve react-native-echarts(https://github.com/wuba/react-native-echarts) ikisi de aktif geliştiriliyor gibi; Apache çatısı altında olması da gelecekteki geliştirme beklentileri ve bakım açısından büyük avantaj