Khi theo dõi cách các thể loại liên tục nhiều loại thay đổi theo thời gian—ví dụ như doanh số sản phẩm theo quý, xu hướng chủ đề thay đổi trong các bản tin tin tức, hoặc mẫu tiêu thụ phương tiện truyền thông—thìBiểu đồ Sông Chủ đề (một dạng đặc biệt của biểu đồ streamgraph) cung cấp một cách trình bày trực quan, ấn tượng về mặt thị giác. Khác với biểu đồ vùng chồng chất thông thường gắn vào một đường nền phẳng, biểu đồ Sông Chủ đề chảy ngang quanh một trục trung tâm, tạo ra một hình ảnh trực quan tự nhiên giống dòng sông, nơi các luồng riêng lẻ mở rộng hoặc thu hẹp tùy theo sự thay đổi giá trị định lượng.
Cơ chế của Biểu đồ Sông Chủ đề
Trong Apache ECharts, biểu đồ Sông Chủ đề sử dụngtype: 'themeRiver'. Thay vì dựa vào các cấu hình truyền thốngxAxis và yAxis, biểu đồ hoạt động dựa trên một trục ngang duy nhấtsingleAxis với type: 'time' hoặc type: 'value'. Các mục dữ liệu được truyền dưới dạng các bộ mảng được định dạng như[thời gian, giá trị, tênThểLoại].
1. Cài đặt cơ bản
Để tạo một biểu đồ Sông Chủ đề cơ bản, cấu hình mộtsingleAxis có kiểu'time', xác địnhtype: 'themeRiver' trong chuỗi của bạn, và cung cấp các quan sát luồng dữ liệu trong mảngdatamảng:
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: 'rgba(0,0,0,0.2)',
width: 1,
type: 'solid'
}
}
},
legend: {
data: ['Công nghệ', 'Thời trang', 'Thể thao']
},
singleAxis: {
top: 50,
bottom: 50,
axisTick: {},
axisLabel: {},
type: 'time',
axisPointer: {
animation: true,
label: { show: true }
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
opacity: 0.5
}
}
},
series: [
{
type: 'themeRiver',
emphasis: {
itemStyle: {
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.3)'
}
},
data: [
['2026-01-01', 12, 'Công nghệ'],
['2026-02-01', 24, 'Công nghệ'],
['2026-03-01', 32, 'Công nghệ'],
['2026-04-01', 18, 'Công nghệ'],
['2026-01-01', 15, 'Thời trang'],
['2026-02-01', 18, 'Thời trang'],
['2026-03-01', 10, 'Thời trang'],
['2026-04-01', 25, 'Thời trang'],
['2026-01-01', 8, 'Thể thao'],
['2026-02-01', 12, 'Thể thao'],
['2026-03-01', 28, 'Thể thao'],
['2026-04-01', 20, 'Thể thao']
]
}
]
};
Các kỹ thuật cấu trúc nâng cao
Biểu đồ Theme River tỏ ra xuất sắc khi theo dõi các sự kiện đa thể loại phức tạp qua các chuỗi thời gian dài với các công cụ gợi ý tùy chỉnh và bảng màu thể loại được định dạng.
1. Dòng lưu lượng phương tiện đa luồng
Tùy chỉnh màu sắc luồng với các bản đồ bảng màu rõ ràng và công cụ gợi ý trục tùy chỉnh biến nhật ký sự kiện thô thành một dòng thời gian hoạt động sạch sẽ:
const categories = ['Bài viết', 'Lượt xem video', 'Lượt phát podcast', 'Chia sẻ trên mạng xã hội'];
option = {
title: {
text: 'Dòng tương tác nội dung',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: '#333',
width: 1
}
}
},
legend: {
data: categories,
bottom: 10
},
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666'],
singleAxis: {
top: '15%',
bottom: '20%',
type: 'time',
axisLine: { lineStyle: { color: '#ccc' } },
splitLine: { show: false }
},
series: [
{
type: 'themeRiver',
label: {
show: true,
position: 'left',
fontSize: 12
},
data: [
['2026-01-01', 120, 'Bài viết'], ['2026-02-01', 200, 'Bài viết'], ['2026-03-01', 150, 'Bài viết'], ['2026-04-01', 80, 'Bài viết'],
['2026-01-01', 60, 'Lượt xem video'], ['2026-02-01', 140, 'Lượt xem video'], ['2026-03-01', 220, 'Lượt xem video'], ['2026-04-01', 310, 'Lượt xem video'],
['2026-01-01', 30, 'Lượt phát podcast'], ['2026-02-01', 45, 'Lượt phát podcast'], ['2026-03-01', 90, 'Lượt phát podcast'], ['2026-04-01', 110, 'Lượt phát podcast'],
['2026-01-01', 180, 'Chia sẻ trên mạng xã hội'], ['2026-02-01', 110, 'Chia sẻ trên mạng xã hội'], ['2026-03-01', 70, 'Chia sẻ trên mạng xã hội'], ['2026-04-01', 95, 'Chia sẻ trên mạng xã hội']
]
}
]
};
Các thực hành tốt chiến lược
- Định dạng các bộ dữ liệu đúng cách: Mỗi mục trong
datamảng phải tuân theo thứ tự chính xác[ngày, giá trị, tênThểLoại]để ECharts có thể cắt và chồng các luồng liên tục một cách chính xác. - Hạn chế sự lan rộng thể loại: Giữ số lượng thể loại khác nhau trong khoảng từ 3 đến 7. Quá nhiều luồng sẽ khiến các dải riêng lẻ trở nên hẹp và khó theo dõi qua các điểm thời gian.
- Tận dụng
singleAxisKích thước: Điều chỉnhtopvàbottomtrênsingleAxisthuộc tính để điều khiển khoảng cách dọc và ngăn các nhãn luồng bên ngoài bị cắt ngang mép của container.