Apache ECharts: Biểu Đồ JavaScript Tương Tác

Tìm hiểu về Apache ECharts

Apache ECharts là thư viện mã nguồn mở để vẽ biểu đồ và trực quan hóa dữ liệu cho trình duyệt, phát hành dưới Apache Software Foundation. Nó được viết bằng JavaScript thuần và render qua zrender, một thư viện canvas được xây riêng cho dự án thay vì mượn từ nơi khác. Các topic trên GitHub của repo liệt kê cả canvas và SVG là mục tiêu render, và README hướng dự án tới các đội ngũ muốn thêm biểu đồ tương tác vào sản phẩm thương mại.

Tính năng cốt lõi cho trực quan hóa dữ liệu

• ✓Dựng trên zrender, một thư viện render canvas được phát triển song song với ECharts thay vì mượn từ dự án khác.
• ✓Liệt kê cả canvas và SVG là mục tiêu render trong chính các topic GitHub của repo.
• ✓ECharts GL bổ sung biểu đồ 3D, trực quan hóa quả cầu (globe), và tăng tốc WebGL như một gói mở rộng riêng.
• ✓Liquidfill và Wordcloud bổ sung biểu đồ dạng bình chứa nước và đám mây từ (word cloud) ngoài các loại biểu đồ cơ bản.
• ✓vue-echarts đóng gói thư viện thành một component Vue.js dùng ngay.
• ✓echarts-stat bổ sung công cụ thống kê, còn phần mở rộng Baidu Map bọc lại SDK bản đồ của Baidu cho biểu đồ địa lý.
• ✓Phát hành dưới dạng gói npm, bản build qua CDN jsDelivr, hoặc tải trực tiếp từ trang chủ chính thức.

Cài đặt và tích hợp ECharts

Theo README, Apache ECharts có ba cách dùng ngay: tải về từ trang chủ chính thức, cài gói `echarts` qua `npm install echarts --save`, hoặc lấy bản build từ CDN jsDelivr. Tự build thư viện từ mã nguồn là một hướng khác: clone repo, chạy `npm install`, rồi `npm run dev` để rebuild ở chế độ theo dõi thay đổi (mở thư mục `./test` chứa các test case), `npm run checktype` để kiểm tra TypeScript, hoặc `npm run release` để tạo các file production trong thư mục `dist`. Cần có Node.js cho mọi lệnh build từ mã nguồn.

Học và sử dụng ECharts

README không có đoạn code mẫu nào để dựng một biểu đồ. Thay vào đó nó dẫn tới bốn trang tài liệu: một handbook Get Started, một tài liệu API, một Option Manual mô tả đối tượng cấu hình dùng để dựng biểu đồ, và một thư viện Examples trực tiếp. Hãy xem bốn trang đó là con đường học thực sự; trang chủ của repo chỉ là điểm dẫn tới chúng, không phải một hướng dẫn tự thân.

Lựa chọn thay thế cho ECharts

Câu hỏi thường gặp về ECharts

Vấn đề mà ECharts giải quyết

Các đội ngũ nhúng biểu đồ vào sản phẩm web thương mại thường phải bọc lại engine render của một dự án khác và kế thừa luôn điều khoản cấp phép của nó. README của Apache ECharts đóng khung dự án quanh việc tránh điều đó: nó dựng trên zrender, một thư viện canvas được phát triển song song với lớp vẽ biểu đồ thay vì mượn từ nơi khác, và toàn bộ phát hành theo Apache-2.0 nên có thể đưa vào sản phẩm thương mại mà không cần đàm phán giấy phép riêng.

Trường hợp sử dụng tốt nhất

• •Nhúng biểu đồ tương tác vào sản phẩm web thương mại theo giấy phép Apache-2.0 dễ dãi.
• •Công việc biểu đồ 3D hoặc trực quan hóa quả cầu, dùng gói mở rộng ECharts GL để tăng tốc WebGL.
• •Ứng dụng Vue.js muốn một component biểu đồ dùng ngay qua vue-echarts thay vì tự nối dây thư viện lõi.
• •Các loại biểu đồ đặc thù như đám mây từ hay biểu đồ bình chứa nước, qua phần mở rộng Wordcloud và Liquidfill.

Nên dùng khi nào — và nên bỏ qua khi nào

Hãy thử Apache ECharts nếu bạn đang làm sản phẩm web thương mại cần nhiều loại biểu đồ tương tác và muốn một thư viện cấp phép dễ dãi, tự chủ tầng render thay vì bọc lại của người khác. Bỏ qua nếu bạn chỉ cần một, hai biểu đồ đơn giản, vì bạn sẽ phải đi qua toàn bộ bề mặt cấu hình của Option Manual cho việc mà một thư viện nhỏ hơn có thể làm với ít công sức thiết lập hơn.

Repo liên quan