Phát hành Apache ECharts 5.6

 (echarts.apache.org)
11 điểm bởi GN⁺ 2025-04-09 | 2 bình luận | Chia sẻ qua WhatsApp
  • Apache ECharts là thư viện trực quan hóa JavaScript mã nguồn mở giúp triển khai trực quan hóa nhanh trên web
  • Có thể kết hợp hơn 20 loại biểu đồ và nhiều thành phần khác nhau, mang lại sự linh hoạt khi xây dựng dashboard và màn hình phân tích
  • Hỗ trợ kết xuất thời gian thực 10 triệu điểm dữ liệu thông qua chuyển đổi giữa Canvas và SVG, kết xuất tăng dần và tải luồng
  • Có thể áp dụng vào quy trình phân tích đa chiều nhờ quản lý dựa trên dataset và các biến đổi dữ liệu như lọc, phân cụm, hồi quy
  • Cung cấp mô tả biểu đồ được tạo tự động và hoa văn decal, giúp người dùng cần khả năng truy cập dễ hiểu nội dung và ngữ cảnh của biểu đồ hơn

Tổng quan Apache ECharts

  • Apache ECharts là thư viện trực quan hóa JavaScript mã nguồn mở
  • Có thể xem trang chính thức tại https://echarts.apache.org
  • Trên trang chủ có thông báo về việc công bố Apache ECharts 6.1 cùng hướng dẫn xem changelog
  • Tài liệu bắt đầu và ví dụ được cung cấp tại Get Started, Demo

Cấu trúc tính năng

  • Biểu đồ và thành phần

    • Có sẵn hơn 20 loại biểu đồ cơ bản
    • Cũng cung cấp khoảng 12 thành phần, và có thể kết hợp các yếu tố này tùy ý để sử dụng

  • Kết xuất và dữ liệu dung lượng lớn

    • Có thể dễ dàng chuyển đổi giữa kết xuất Canvas và SVG
    • Có thể kết xuất thời gian thực 10 triệu điểm dữ liệu bằng kết xuất tăng dần và tải luồng

  • Phân tích dữ liệu

    • Quản lý dữ liệu bằng dataset
    • Hỗ trợ các biến đổi dữ liệu như lọc, phân cụm, hồi quy, cho phép phân tích cùng một dữ liệu theo nhiều chiều

  • Thiết kế trực quan

    • Thiết kế mặc định tuân theo các nguyên tắc trực quan hóa
    • Hỗ trợ thiết kế đáp ứng và có thể tùy biến bằng cấu hình linh hoạt

  • Cộng đồng và mở rộng

    • Cộng đồng mã nguồn mở năng động tiếp tục phát triển dự án
    • Cũng có nhiều tiện ích mở rộng bên thứ ba

  • Khả năng truy cập

    • Cung cấp mô tả biểu đồ được tạo tự động
    • Hoa văn decal giúp người dùng khuyết tật hiểu nội dung và ngữ cảnh của biểu đồ

Tài liệu trích dẫn và kênh cộng đồng

  • Người dùng ECharts có thể trích dẫn bài báo trong các hoạt động liên quan như dự án R&D, sản phẩm, bài báo nghiên cứu, báo cáo kỹ thuật, tin tức, sách, bài trình bày, đào tạo, bằng sáng chế
  • Bài báo có thể trích dẫn được cung cấp tại Visual Informatics, 2018 PDF
  • Các kênh cập nhật được giới thiệu gồm GitHub, WeChat, Weibo, tài khoản X

Bài viết liên quan

2 bình luận

 
jhk0530 2025-04-09

ECharts đẹp và ổn. Cá nhân tôi thấy nó dễ dùng hơn highcharts.
 
GN⁺ 2025-04-09
Ý kiến trên Hacker News

  • Khi xây dựng Briefer (https://briefer.cloud), tôi đã thử gần như mọi thư viện trực quan hóa và có thể tự tin nói rằng Apache ECharts là tốt nhất
    Các thư viện khác nhìn chung hoặc xấu, hoặc khó dùng vì phải thao tác theo kiểu mệnh lệnh, hoặc thiếu linh hoạt
    ECharts có thiết kế mặc định đẹp, cho phép tính toán đặc tả biểu đồ theo kiểu khai báo ở backend rồi chỉ gửi đặc tả cần render cho frontend, và đủ linh hoạt để hỗ trợ gần như mọi thứ mà các công cụ BI truyền thống làm
    Tôi chưa từng phải mở rộng thư viện để có tính năng mới; mọi thứ cần thiết đều đã có sẵn

    • Không chỉ vậy, ECharts còn là một trong số rất ít dependency của dự án mà tôi không phải lo bị hỏng khi nâng cấp
      Ngay cả khi nâng cấp từ 3.x lên 5.x, chỉ cần npm update là mọi thứ vẫn chạy tốt; hiếm thấy ngày nay và tạo cảm giác rất đáng tin cậy
      Phù hợp tốt với cả SSR lẫn SPA, và vì phần lớn là JavaScript thuần nên hoạt động mượt không chỉ với React/Vue/Alpine mà cả các ứng dụng render phía server truyền thống như Rails/ASP.NET/PHP
      Trong một ứng dụng SSR điển hình như https://www.jitbit.com/, có thể tạo đối tượng JSON cho biểu đồ bằng truy vấn LINQ trên server rồi truyền cho ECharts; truyền đối tượng reactive của SPA dựa trên Vue vào cũng vẫn chạy tốt
      Ngay cả khi cần workaround kiểu hiển thị phần trăm in đậm trong tooltip của biểu đồ tròn, hầu như không phải đào vào mã nguồn; đa số đã có sẵn giải pháp và có thể tìm dễ dàng bằng tìm kiếm hoặc LLM
    • Tôi nhớ đã xem nó vài năm trước nhưng cuối cùng chọn Chart.js, và đến giờ gần như chưa có việc tùy biến lạ, dùng một lần nào mà nó không làm được
      Với phân tích kinh doanh thì chúng tôi tự host server Metabase
      Ước gì Metabase có nhiều lựa chọn trực quan hóa hơn, nhưng việc thiết lập model và query quá dễ nên không thường có yêu cầu đủ chính đáng để làm chart tùy chỉnh
    • Gần đây tôi cần một biểu đồ đường gradient trong đó mỗi nấc trên trục Y biểu thị một màu và phải hòa trộn với màu lân cận; sau khi thử vài thứ thì chỉ ECharts là hợp lý
      Ban đầu tôi do dự vì thiếu tích hợp React rõ ràng, nhưng cuối cùng vẫn dễ dùng như các thư viện JavaScript khác và tốt hơn kỳ vọng
    • Tôi khó đồng ý với đánh giá đó; https://plotly.com/javascript/ cũng rất tốt
      Tôi cũng đang tiếp tục theo dõi https://observablehq.com/plot/, có vẻ đang đi theo một hướng thực sự tuyệt vời
    • Cách triển khai trông rất giống nhau, nên tôi tò mò nó tốt hơn Chart.js ở điểm nào

  • go-echarts https://github.com/go-echarts/go-echarts cũng đáng được đề xuất
    Khi khai báo biểu đồ bằng các type của Go, JSON marshaler của Go sẽ tự động bind sang JSON; tôi đã dùng trong nhiều dự án và khi có issue hoặc PR, maintainer phản hồi rất nhanh
    Cách nhúng hàm JavaScript và truy vấn SQL vào Go khá thú vị; dữ liệu, SQL, Go và JavaScript hòa trộn với nhau một cách lạ lùng
    Đây là ví dụ Go lấy dữ liệu từ DuckDB và tạo file biểu đồ candlestick có tooltip JavaScript: https://github.com/NimbleMarkets/dbn-duckduck-goose/blob/mai...

    • Tôi dùng Go và DuckDB khá nhiều, nhưng đến giờ vẫn dùng tổ hợp JavaScript/html/template thô sơ cho biểu đồ
      Cái này trông có vẻ đáng để vọc thử

  • Tôi cho rằng ECharts là tốt nhất hiện nay
    Lạ là nó không thường xuất hiện trong các danh sách thư viện biểu đồ hay kết quả tìm kiếm, nhưng sau khi đã dùng chart.js, Google Charts, amCharts, Highcharts và ApexCharts, chúng tôi đang dùng nó trong công cụ/thư viện của mình https://docs.chartsql.com/

    • Có lẽ vì đây là dự án Trung Quốc
      Ant Design Components cũng thực sự tuyệt vời nhưng chưa được biết đến đúng mức
    • Tôi tò mò D3.js thì sao
      Tôi biết D3.js là low-level, nhưng có AI thì nó trở nên khá dễ
    • Tôi thích VisX vì mức độ kiểm soát cao
    • Tôi thích Plotly

  • Sau khi thử nhiều thư viện, năm ngoái nhóm chúng tôi đã ổn định với Apache ECharts và không hối tiếc
    Tài liệu xuất sắc, hiệu năng tốt, khả năng cấu hình cao mà vẫn dễ dùng, và hỗ trợ mọi loại biểu đồ chúng tôi cần như cột, cột chồng, bản đồ, chuỗi thời gian có thể phóng to/cuộn, scatter plot, v.v.

    • Không biết so với chart của ag-grid thì thế nào

  • Line race trông thật sự rất ngầu
    https://echarts.apache.org/examples/en/editor.html?c=line-ra...
    Bật công tắc lên là cuộc đua bắt đầu
    Nói thêm thì Na Uy làm rất tốt

    • Nhìn thì gọn gàng, nhưng khác với ví dụ Hans Rosling mà người khác nhắc tới, animation này không cung cấp thêm thông tin
      Chỉ hiển thị frame cuối cũng truyền tải cùng thông điệp nhanh hơn nhiều và dễ tiếp cận hơn; đây là một dạng chartjunk
      https://en.wikipedia.org/wiki/Chartjunk
    • Có lẽ nên ghi công cho Hans Rosling: https://www.youtube.com/watch?v=hVimVzgtD6w (2003)
    • Có gì đó không khớp
      Dữ liệu có vẻ là life-expectancy-table.json nhưng tiêu đề lại chỉ Income
      Không rõ sai sót xảy ra ở đâu
    • Tôi tò mò phần “Na Uy làm rất tốt” có tương quan đến mức nào với giá dầu

  • Nếu đang tìm một thư viện biểu đồ cho web client thì mình cũng khuyên dùng charts.css
    Nói thật là nó giống như vị cứu tinh, khái niệm đơn giản hơn hầu hết các thư viện biểu đồ rất nhiều mà vẫn có thể tạo ra cùng những thứ đó
    Rất dễ gắn vào kiểu server-side rendering truyền thống, htmx, v.v.
    https://chartscss.org/

    • Cùng mạch đó, từ lâu mình đã thích https://pancake-charts.surge.sh/ được bổ trợ bằng JavaScript
      Nó do nhóm đồ họa của NYT phát triển và đã được dùng cho các biểu đồ COVID
    • Chart.css gần như chỉ là một trong rất nhiều thư viện có thể vẽ biểu đồ đường, và là một thế giới hoàn toàn khác so với ECharts
    • Câu “có thể tạo ra cùng những thứ đó” khiến mình tự hỏi liệu đã xem demo của ECharts, hay demo của amCharts trả phí https://www.amcharts.com/demos chưa
      Mình không có ác cảm gì với charts.css, nhưng cảm giác như đang so sánh đồ chơi nhựa trẻ em với một tàu con thoi thật sự
      Phần lớn thời gian làm việc của mình dành để phát triển các ứng dụng phân tích kinh doanh nặng như Apache Superset, và những thứ như chart.css thì không thể triển khai được
    • Mình đồng ý với các phản hồi khác rằng ECharts cung cấp nhiều tính năng hơn hẳn, nhưng cách chuyển một bảng dữ liệu có ý nghĩa thành biểu đồ trông khá hay
      Mình đang dùng ECharts và hài lòng, nhưng ở những chỗ cần sparkline cho từng hàng của bảng dữ liệu thì phải tạo quá nhiều instance ECharts
      Với mục đích như vậy, thư viện này có vẻ rất phù hợp
    • Ví dụ animation của chartscss gây khó chịu và về mặt chức năng cũng không có vẻ tốt lắm

  • Có lẽ nên để nguyên chữ Apache trong tên
    Nếu nói “ECharts, gói biểu đồ JS” thì nghe như trong vòng 1 năm sẽ ngừng bảo trì, còn “Apache ECharts, gói biểu đồ JS” thì nghe như năm sau vẫn sẽ được duy trì

    • Thú vị là mình lại cảm thấy hoàn toàn ngược lại
      Khi thấy gắn Apache, mình thường giả định dự án đã ngừng phát triển, là legacy hoặc chỉ còn bảo trì
      Cũng có câu “Apache là nơi các dự án đi đến để chết”

  • Rất vui khi ECharts nhận được sự công nhận xứng đáng
    Nói đây là thư viện trực quan hóa mã nguồn mở tốt nhất hiện nay cũng không quá lời
    Mặc định nó dùng Canvas nên nhanh hơn bất kỳ thư viện nào mình từng dùng, và đủ linh hoạt để tự đặt các widget như tooltip tùy chỉnh lên trên biểu đồ
    Nó cũng cung cấp nhiều metadata như vị trí của một điểm cụ thể trong biểu đồ đã render, rất tiện để dùng trong code; rất phù hợp để đưa vào các webapp legacy, và trên trang web còn có tùy chọn tải custom build
    Khả năng xử lý dữ liệu streaming cũng xuất sắc, animation giữa các lần dữ liệu thay đổi rất mượt
    Mình đã dùng nó trong nhiều production và dự án cá nhân gần 7 năm, đến giờ vẫn là lựa chọn ưu tiên; tài liệu trong thời gian đó cũng cải thiện rất nhiều
    Đôi khi các bug cũ như vấn đề xử lý 0 trên thang log gây khó chịu, nhưng có cách workaround, và mình hầu như chưa thấy bug nào chặn các use case thông thường

    • Không hiểu sao nó lại hiếm khi xuất hiện trong các so sánh thư viện biểu đồ như vậy
      Nó cũng không có trên trang Wikipedia về thư viện biểu đồ JavaScript, mình tình cờ biết đến nó qua Apache Superset

  • Trong một web demo nhanh, chỉ thư viện này với component GraphGL là có thể xem và thao tác tương tác với đồ thị rất lớn
    Có vẻ không phải là thư viện trực quan hóa nổi tiếng, nhưng khá thú vị

  • Mình đang vừa xem qua các thư viện biểu đồ cho React/React Native, và Apache ECharts có vẻ là một ứng viên tốt cho trực quan hóa dữ liệu cross-platform
    Cả react-echarts(https://github.com/hugocxl/react-echarts) và react-native-echarts(https://github.com/wuba/react-native-echarts) mà mình tìm thấy đều có vẻ đang được phát triển tích cực, và việc nằm dưới Apache cũng là một lợi thế lớn về triển vọng phát triển và bảo trì trong tương lai