Apache ECharts
QA Dashboard, Loadium, Testinium projelerinde aktif olarak bolca kullandığım ECharts kütüphanesinden bahsetmek istiyorum. Önce biraz ne olduğundan, kimin geliştirdiğinden, hangi tip chartlara destek verdiğinden bahsedip sonrasında mock data ile küçük bir örnek yapalım.
Angular tarafında deneyimlediğim kadarıyla çok rahat kullanıma sahip bir kütüphane. Grafikler üzerinde sağladığı propertieslerle isteyip yapamayacağınız çok az şey vardır sanırım.
Apache ECharts TM, PC ve mobil cihazlarda akıcı bir şekilde çalışabilen açık kaynaklı bir JavaScript görselleştirme aracıdır. Çoğu modern Web Tarayıcısı ile uyumludur. ECharts, isteğe göre özelleştirilebilir grafikler oluşturmak için bir grafik işleme motoru olan ZRender’a güveniyor.
ECharts, Apache Incubator tarafından desteklenen bir grafik kütüphanesidir.
ECharts’ın desteklediği en temel grafik türleri arasında line chart, bar chart, pie chart, scatter chart bulunuyor. Bunun yanında daha birçok charta (3D dahil) destek verebiliyor. Bütün chartları incelemek için: https://echarts.apache.org/en/option.html#series
Projenize dahil etmek için: npm install echarts
Örnek bir Line Chart yapalım. Bunun için Echarts’ın kendi online editörünü kullanalım.
- Grid optionını kullanarak grafik içindeki left, right bottom gibi ayarlamaları sağlayabilirsiniz.
- xAxis x koordinatındaki verilerimizdir. Veri içine backendden aldığınız dataları koyabilirsiniz.
- yAxis y koordinatında görünen bölümümüzdür. Hem xAsix hem de yAxisteki verilerle ilgili formatter yazarak gelen datanın görünümü üzerinde oynamalar yapabilmekteyiz.
- Series ise bizim chartımızı çizdirmemiz için gerekli olan dataları içine koyduğumuz bi optionımızdır. Burada görünen areaStyle içerisine vereceğimiz özellik ile chart üzerindeki renklerle oynama yapabiliriz. Series’in type’ına vereceğimiz değer ile grafiğimizin tipini değiştirebiliriz.
Şimdi bir de pie chart için basit bir örnek yapalım.
Burada farklı olarak gördüğümüz legend kavramı var. Açıklama bileşeni, farklı serieslerin sembolünü, rengini ve adını gösterir. Grafikte seri görüntüleme arasında geçiş yapmak için göstergeleri tıklayabilirsiniz.
Serieslerin içerisinde görmüş olduğunuz emphasis ise her bir seriesin üzerinde durduğumuzda göstermek istediğimiz styleleri yazabildiğimiz optionımızdır. Fotoğraf üzerinden çıktısını görebilirsiniz.
QA Dashboard projesi içinde kullandığımız bir iki örnek;
Tüm bu optionları inceleyip üzerinde oynamalar yapacağınız linkler:
Options: https://echarts.apache.org/en/option.html#title
Examples: https://echarts.apache.org/examples/en/index.html
