11 điểm bởi GN⁺ 2025-04-09 | 2 bình luận | Chia sẻ qua WhatsApp
  • ECharts là thư viện trực quan hóa JavaScript mã nguồn mở, được tối ưu cho cả PC và thiết bị di động
  • Tương thích với hầu hết các trình duyệt hiện đại như Internet Explorer 9/10/11, Chrome, Firefox, Safari
  • Sử dụng ZRender, công cụ render đồ họa riêng, để cung cấp các biểu đồ chất lượng cao, trực quan và có tính tương tác

Cung cấp nhiều loại biểu đồ đa dạng

  • Hỗ trợ biểu đồ đường, biểu đồ cột, biểu đồ phân tán, biểu đồ tròn, biểu đồ nến, boxplot, bản đồ, heatmap, biểu đồ đường cho thông tin hướng, đồ thị quan hệ, treemap, sunburst, tọa độ song song, biểu đồ phễu, biểu đồ đồng hồ đo và nhiều loại khác
  • Có thể tạo biểu đồ tổng hợp bằng cách kết hợp nhiều loại trực quan hóa khác nhau
  • Hỗ trợ chuỗi biểu đồ tùy chỉnh, chỉ cần truyền hàm callback renderItem là có thể tự do triển khai các phần tử đồ họa theo ý muốn
  • Tích hợp sẵn các tính năng tương tác, có thể dùng ngay mà không cần cấu hình bổ sung

Tính năng tinh gọn và tải xuống theo lựa chọn thành phần

  • Gói mặc định đã được tối ưu hóa cao, nhưng khi cần có thể chỉ chọn các loại biểu đồ và thành phần cần thiết để tạo gói nhẹ hơn
  • Có thể tải xuống custom bundle chỉ chứa các tính năng cần thiết thông qua online builder

Hỗ trợ nhiều định dạng dữ liệu

  • Từ v4.0, hỗ trợ nhiều cấu trúc dữ liệu như mảng hai chiều, đối tượng key-value thông qua thuộc tính dataset
  • Có thể ánh xạ cấu trúc dữ liệu một cách trực quan bằng thuộc tính encode
  • Tiết kiệm thời gian viết thuật toán chuyển đổi dữ liệu và giảm thiểu sử dụng bộ nhớ
  • Một dataset có thể được chia sẻ giữa nhiều thành phần
  • Hỗ trợ TypedArray giúp tiết kiệm bộ nhớ và cải thiện hiệu năng

Tối ưu trực quan hóa dữ liệu quy mô lớn

  • Cung cấp công nghệ incremental rendering để trực quan hóa hàng triệu điểm dữ liệu
  • Các tính năng tương tác như phóng to/thu nhỏ, di chuyển cũng hoạt động mượt mà với dữ liệu lớn
  • Hỗ trợ render dữ liệu streaming bằng WebSocket
  • Có thể trực quan hóa mà không cần tải toàn bộ dữ liệu cùng lúc

Tối ưu cho thiết bị di động

  • Được tối ưu cho thao tác phóng to/thu nhỏ và di chuyển trong môi trường di động
  • Trên PC, có thể thực hiện thao tác tương tự bằng bánh xe chuột
  • Cung cấp gói nhỏ gọn dành cho di động
  • Khi chọn công cụ render SVG, có thể giảm thêm mức sử dụng bộ nhớ

Hỗ trợ nhiều phương thức render và tương thích đa nền tảng

  • Hỗ trợ nhiều phương thức render như Canvas, SVG (v4.0 trở lên), VML
  • VML tương thích với các trình duyệt IE cũ, SVG tiết kiệm bộ nhớ trên di động, còn Canvas mạnh về xử lý dữ liệu lớn
  • Trong môi trường Node.js, có thể render phía máy chủ (SSR) thông qua node-canvas
  • Cũng có thể sử dụng trong WeChat MiniProgram
  • Cộng đồng cũng đã phát triển các phần mở rộng ngôn ngữ như Python (pyecharts), R (echarty), Julia (ECharts.jl)
  • Nhờ hỗ trợ đa nền tảng và đa ngôn ngữ, nhà phát triển có thể chỉ cần tập trung vào bản thân việc trực quan hóa

Tính năng khám phá dữ liệu dựa trên tương tác

  • Có thể khám phá từ toàn bộ dữ liệu đến dữ liệu chi tiết thông qua zoom, pan và filtering
  • Cung cấp nhiều thành phần tương tác như legend, visualMap, dataZoom, tooltip, brush
  • Có thể khám phá dữ liệu theo nhiều cách khác nhau ngay trên giao diện người dùng

Tăng cường trực quan hóa dữ liệu đa chiều

  • Từ ECharts 3, khả năng hỗ trợ trực quan hóa dữ liệu đa chiều đã được tăng cường
  • Ngoài các hình thức trực quan hóa đa chiều truyền thống như hệ tọa độ song song, dữ liệu còn có thể được thể hiện theo nhiều cách khác nhau
  • Có thể dùng thành phần visualMap để ánh xạ dữ liệu theo chiều sang các thuộc tính trực quan như màu sắc, kích thước, độ trong suốt, sắc độ

Phản ánh dữ liệu theo thời gian thực

  • Khi dataset thay đổi, biểu đồ sẽ được cập nhật theo thời gian thực
  • Tự động phát hiện thay đổi dữ liệu và thể hiện chúng trên biểu đồ bằng hoạt ảnh
  • Cũng có thể biểu diễn dữ liệu theo dòng thời gian bằng thành phần timeline

Cung cấp hiệu ứng hình ảnh đặc biệt

  • Có thể áp dụng hiệu ứng hình ảnh cho mọi loại dữ liệu như điểm, đường, dữ liệu địa lý
  • Thu hút sự chú ý của người dùng và cải thiện khả năng truyền tải dữ liệu

Trực quan hóa 3D dựa trên WebGL

  • ECharts GL dựa trên WebGL, hỗ trợ nhiều kiểu trực quan hóa 3D như địa cầu 3D, tòa nhà, histogram dân số
  • Có thể thêm hiệu ứng hình ảnh chỉ với cấu hình đơn giản
  • Cũng có thể sử dụng trong VR và trên màn hình lớn

Hỗ trợ khả năng tiếp cận

  • Tuân thủ tiêu chuẩn khả năng tiếp cận WAI-ARIA của W3C
  • Tự động tạo mô tả dành cho người khiếm thị dựa trên thông tin cấu hình biểu đồ
  • Có thể truy cập nội dung trực quan hóa thông qua trình đọc màn hình

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
  • Trong quá trình phát triển Briefer, tôi đã thử gần như mọi thư viện trực quan hóa và Apache ECharts là tốt nhất

    • Vấn đề chính của các thư viện khác là (a) thiết kế không đẹp (b) khó sử dụng (c) thiếu linh hoạt
    • Apache ECharts giải quyết được những vấn đề này
    • Nó đẹp sẵn theo mặc định, có thể tính toán đặc tả khai báo ở backend rồi gửi sang frontend, và đủ linh hoạt để hỗ trợ mọi thứ mà các công cụ BI truyền thống có thể làm
    • Mọi thứ tôi cần đều đã có sẵn, không cần phải bổ sung tính năng mới
    • Thật vui khi thấy công việc tuyệt vời này trên HN
  • Cũng đề xuất go-echarts

    • Có thể khai báo biểu đồ bằng các kiểu của Golang, và JSON marshaler của Golang sẽ tự động bind sang JSON
    • Tôi đã dùng nó trong nhiều dự án, và mỗi khi có issue hoặc PR thì người bảo trì phản hồi rất nhanh
    • Việc nhúng hàm JavaScript và truy vấn SQL vào Go khá thú vị
    • Có một ví dụ Golang lấy dữ liệu từ DuckDB và tạo file biểu đồ nến có tooltip JavaScript
  • Sau khi thử rất nhiều thư viện khác, năm ngoái tôi đã chọn Apache ECharts và không hề hối hận

    • Tài liệu rất tốt, hiệu năng tốt, khả năng cấu hình cao, dễ dùng, và hỗ trợ mọi loại biểu đồ tôi cần
  • Tôi nghĩ ECharts là thư viện tốt nhất

    • Nó không xuất hiện nhiều trong các danh sách hay kết quả tìm kiếm về thư viện biểu đồ
    • Tôi đã thử chart.js, google charts, amCharts, Highcharts, ApexCharts
    • Chúng tôi đang dùng nó trong công cụ/thư viện của mình
  • Tôi đã dùng Apache ECharts trong sản phẩm từ năm 2020

    • Rất đáng khuyến nghị, thư viện tuyệt vời, tài liệu tuyệt vời, 5 năm không gặp vấn đề gì
    • Mong có thêm cải thiện cho ticket về khả năng truy cập bằng bàn phím
  • Line race rất ngầu

    • Có thể bật công tắc để bắt đầu cuộc đua
    • Na Uy làm tốt lắm
  • Nếu bạn đang tìm thư viện biểu đồ cho web client thì cũng đề xuất charts.css

    • Ý tưởng của nó đơn giản hơn rất nhiều so với đa số thư viện biểu đồ mà vẫn đạt được cùng chức năng
    • Rất dễ dùng cùng server-side rendering, htmx, v.v.
  • Khi thấy thông báo về một gói biểu đồ JS tên là ECharts, tôi nghĩ trong vòng 1 năm nó sẽ ngừng được bảo trì

    • Khi thấy thông báo về một gói biểu đồ JS tên là Apache ECharts, tôi nghĩ sang năm nó vẫn sẽ được bảo trì
  • Tôi đang tìm thư viện biểu đồ cho React/React Native, và Apache ECharts là một ứng viên tuyệt vời cho trực quan hóa dữ liệu đa nền tảng

    • Cả react-echarts và react-native-echarts đều đang được phát triển tích cực
    • Việc thuộc Apache là một lợi thế lớn cho triển vọng phát triển và bảo trì lâu dài của dự án
  • Tôi đã thêm ECharts làm thư viện biểu đồ cho AI, và đang chuyển các biểu đồ GUI mặc định sang ECharts

    • Tôi đã đánh giá rất kỹ trước khi chọn, và chọn ECharts vì nó xuất sắc và rất đẹp