Khi theo dõi sự tiến triển liên tục hoặc thay đổi theo chuỗi thời gian, thìBiểu đồ đườngphục vụ như công cụ trực quan chính. Khác với biểu đồ cột hoặc biểu đồ thanh rời rạc tập trung vào so sánh từng danh mục riêng lẻ, biểu đồ đường nhấn mạnh mối liên hệ và độ dốc để làm nổi bậtđộng lượng, tính mùa vụ và những thay đổi đột ngột trong chỉ sốtrên các chuỗi liên tục, chẳng hạn như tăng trưởng người dùng hoạt động hàng ngày, doanh thu định kỳ hàng tháng hoặc luồng dữ liệu cảm biến.
Cơ chế của biểu đồ đường
Trong Apache ECharts, các trực quan hóa dạng đường được cấu hình bằng cách thiết lập thuộc tính seriestypethuộc tính thành'line'. Biểu đồ đường nối các điểm dữ liệu được sắp xếp theo thứ tự dọc theo trục ngang thang đo phân loại liên tục hoặc theo thang thời gian (xAxis) và ánh xạ các giá trị số liên tục lên trục đứng (yAxis).
1. Cài đặt cơ bản
Để xây dựng biểu đồ đường cơ bản, hãy xác định các danh mục liên tục dọc theo trục X và ánh xạ bộ dữ liệu của bạn vào một đối tượng chuỗi vớitype: 'line':
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['Thứ Hai', 'Thứ Ba', 'Thứ Tư', 'Thứ Năm', 'Thứ Sáu', 'Thứ Bảy', 'Chủ Nhật']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
data: [150, 230, 224, 218, 135, 147, 260]
}
]
};
Các kỹ thuật cấu trúc nâng cao
Biểu đồ đường cung cấp sự linh hoạt cho việc chồng chéo nhiều chỉ số, các đường cong nội suy trơn tru và các chỉ báo điểm dữ liệu tùy chỉnh.
1. Các đường cong nội suy trơn tru
Mặc định, các chuỗi đường nối các điểm dữ liệu bằng các đoạn thẳng. Kích hoạtsmooth: truesẽ áp dụng nội suy đường cong bậc ba để tạo ra các đường cong tự nhiên xuyên suốt bộ dữ liệu của bạn:
option = {
tooltip: {
trigger: 'trục'
},
trụcX: {
loại: 'danh mục',
dữ liệu: ['Thg 1', 'Thg 2', 'Thg 3', 'Thg 4', 'Thg 5', 'Thg 6']
},
trụcY: {
loại: 'giá trị'
},
chuỗi: [
{
loại: 'đường',
mượt: true,
dữ liệu: [820, 932, 901, 934, 1290, 1330],
kiểuĐường: {
độ rộng: 3,
màu: '#5470c6'
}
}
]
};
2. So sánh hiệu suất đa đường
So sánh các chỉ số phụ trên các khoảng thời gian giống nhau bằng cách cung cấp nhiều đối tượng đường bên trongchuỗimảng:
option = {
tooltip: {
trigger: 'trục'
},
chú thích: {
dữ liệu: ['Kỳ hiện tại', 'Kỳ trước']
},
trụcX: {
loại: 'danh mục',
dữ liệu: ['Tuần 1', 'Tuần 2', 'Tuần 3', 'Tuần 4']
},
trụcY: {
loại: 'giá trị'
},
chuỗi: [
{
tên: 'Kỳ hiện tại',
loại: 'đường',
mượt: true,
dữ liệu: [320, 332, 301, 334],
kiểuMục: { màu: '#5470c6' }
},
{
tên: 'Kỳ trước',
loại: 'đường',
mượt: true,
dữ liệu: [220, 182, 191, 234],
kiểuMục: { màu: '#91cc75' }
}
]
};
Tinh chỉnh điền vùng và điểm dữ liệu
Các chuỗi đường có thể được nâng cao về mặt thị giác bằng cách sử dụng các lớp đổ màu gradient mờ và các điểm đánh dấu dữ liệu cụ thể để thu hút sự chú ý vào các mốc quan trọng.
1. Định dạng vùng đường
Thêm mộtareaStyletính năng này chuyển đổi biểu đồ đường tiêu chuẩn thành dạng vùng, điền đầy khu vực giữa đường đi và trục ngang:
option = {
trụcX: {
loại: 'danh mục',
khoảngCạnh: false, // Canh thẳng đường vào mép trục
dữ liệu: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '23:59']
},
trụcY: {
loại: 'giá trị'
},
chuỗi: [
{
loại: 'đường',
mượt: true,
dữ liệu: [300, 280, 250, 590, 820, 710, 430],
kiểuVùng: {
màu: 'rgba(84, 112, 198, 0.25)' // Điền mờ dưới đường
},
kiểuĐường: {
độ rộng: 3,
màu: '#5470c6'
},
kíchThướcBiểuTượng: 8
}
]
};
Các thực hành tốt chiến lược
- Sử dụng
boundaryGap: falsecho các chuỗi thời gian:Loại bỏ khoảng trống mép mặc định trên các trục thời gian liên tục giúp đường bắt đầu ngay tại biên độ 0, tạo ra bố cục sạch sẽ từ mép này sang mép kia. - Giữ số lượng đường ở mức thấp:Tránh hiển thị quá 4 đến 5 đường trên một bảng vẽ duy nhất. Các biểu đồ đường quá tải (‘biểu đồ mì ống’) nhanh chóng trở nên khó đọc.
- Kích hoạt công cụ gợi ý trục Luôn cấu hình
tooltip: { trigger: 'trục' }để người dùng có thể di chuột qua bất kỳ điểm ngang nào để xem các giá trị chính xác trên tất cả các chuỗi đường hoạt động cùng lúc.