Tạo biểu đồ đường, cột cơ bản – học thư viện JS ECharts (phần 1)

Học qua ví dụ có lẽ là cách học ưa thích của nhiều người. Và hôm nay chúng ta sẽ thử thực hành với các ví dụ đơn giản nhất của ECharts để bước đầu làm quen.

Đầu tiên bạn vào thư viện mẫu này của họ: echarts.apache.org/examples/en/index.html

Rồi chọn các ví dụ đơn giản để thực hành trước (đừng vội ham vào mấy biểu đồ lung linh, mã nó rắc rối lắm, chưa hiểu ngay được đâu, mới cả biểu đồ hoa lá cành thực tế cũng ít dùng hơn các biểu đồ đơn giản- vì mục đích của biểu đồ là để đơn giản hóa dữ liệu mà).

OK, chúng ta vào bài thôi.

A. Biểu đồ đường cơ bản (basic line chart)

biểu đồ đường cơ bản

Ở chỗ Edit Example là nơi chúng ta thao tác chỉnh sửa xem điều gì xảy ra với biểu đồ đường cơ bản này.

Dữ liệu mẫu của nó như sau:

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }]
};

Chúng ta nhận thấy một số điều sau:

  • Các tùy chọn được đặt trong option, với 2 dấu ngoặc nhọn đóng mở { }, cuối cùng là ;
  • Các cụm dữ liệu được thấy rõ bao gồm xAxis cho trục hoành, yAxis cho trục tung, series để chỉ đến chuỗi giá trị cho biểu đồ;
  • Ở trục tung xAxis chúng ta thấy nó được đặt trong dấu ngoặc nhọn { }, kết thúc cụm dữ liệu nó được đặt dấy phẩy. Bên trong nó có type: 'category' chúng ta có thể hiểu là kiểu được quy định là category và ngay bên dưới là các data cho category;
  • data được đặt trong dấu ngoặc vuông [ ], mỗi phần tử dữ liệu được đặt trong dấu nháy đơn, phân cách nhau cũng bằng dấu phẩy, dữ liệu cuối cùng không cần thêm dấu phẩy đằng sau;
  • Với yAxis nó có duy nhất thông tin typevalue, chúng ta có thể hiểu trục tung là trục thể hiện giá trị;
  • Cuối cùng là series chỉ data dạng số cho các category tương ứng theo thứ tự. Series mở đầu bằng dấu ngoặc vuông, tiếp theo là ngoặc nhọn. Dữ liệu con bên trong gồm data và type. data là dạng số, đặt trong ngoặc vuông, không cần nháy đơn với số, phân cách nhau cũng bằng dấu phẩy. Type ở chỗ series là line cho thấy thông tin này sẽ quyết định kiểu hiển thị của biểu đồ là dạng đường;

Thử chỉnh sửa mã

Thay đổi các giá trị số trong data thuộc series bạn sẽ thấy biểu đồ thay đổi tương ứng. Nếu một dữ liệu nào đó bị mất, ngày cuối cùng sẽ bị mất thông tin, rồi cứ thế. Tức là kiểu quét là sẽ từ trái qua phải, và không bắt buộc data phải có số lượng dữ liệu đúng bằng số lượng category.

Ở phần trục tung, bạn có thể thử thay đổi các thông tin data của category, ví dụ Việt hóa nó thành từ thứ hai đến chủ nhật. Bảng cũng sẽ thay đổi tương ứng.

Cuối cùng bạn có thể thử đảo cột từ xAxis sang yAxis. Bạn cũng sẽ thấy các cột đảo với nhau (dĩ nhiên cái này để nghịch thôi, chứ đảo cột như vậy thì không ổn).

Mã tôi vừa nghịch xong:

option = {
    yAxis: {
        type: 'category',
        data: ['Thứ hai', 'Thứ ba', 'Thứ tư', 'Thứ năm', 'Thứ sáu', 'Thứ bảy', 'Chủ nhật']
    },
    xAxis: {
        type: 'value'
    },
    series: [{
        data: [130, 114, 218, 147,160, 150, 500],
        type: 'line'
    }]
};

Một số lưu ý nhỏ khác:

  • Dữ liệu ở cuối không cần thêm dấu phẩy, nhưng nếu chúng ta thêm nó cũng không gây lỗi. Ví dụ:
option = {
    yAxis: {
        type: 'category',
        data: ['Thứ hai', 'Thứ ba', 'Thứ tư', 'Thứ năm', 'Thứ sáu', 'Thứ bảy', 'Chủ nhật',],
    },
    xAxis: {
        type: 'value',
    },
    series: [{
        data: [130, 114, 218, 147,160, 150, 500],
        type: 'line',
    }],
};

Tất nhiên bình thường thì chúng ta không nên làm thế, vừa mất công mà trông mã khó nhìn.

  • Dấu nháy đơn thay bằng dấu nháy kép cũng không ảnh hưởng gì, ví dụ:
data: ["Thứ hai", "Thứ ba", "Thứ tư", "Thứ năm", "Thứ sáu", "Thứ bảy", "Chủ nhật"] // không có lỗi
  • Nhưng dấu phẩy mà thay bằng chấm phẩy là sẽ có lỗi. Ví dụ:
data: ['Thứ hai'; 'Thứ ba', 'Thứ tư', 'Thứ năm', 'Thứ sáu', 'Thứ bảy', 'Chủ nhật'] // cái này sẽ không chạy được

B. Biểu đồ đường mềm (moothed line chart)

đường cong mềm với lệnh smooth

Ở mục A chúng ta đã làm quen với cú pháp cơ bản của ECharts, bất cứ ngôn ngữ nào nó cũng có hai phần cơ bản là cú pháp và từ vựng, chúng ta sẽ học dần để phát triển cả hai.

Smothed nghĩa là mềm mại, biểu đồ này trông sẽ cong chứ không nhọn hoắt như biểu đồ line ban đầu.

Mã mẫu của nó là:

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
    }]
};

Ở đây chúng ta chỉ thấy một thông tin mới đó là chỗ smooth: true

Cái này có thể hiểu là từ vựng của ECharts.

C. Biểu đồ đường khối (basic area chart)

biểu đồ đường khối của Echarts

Biểu đồ đường nhưng tô mầu bên dưới thành khối.

Câu lệnh cơ bản vẫn thế:

option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {}
    }]
};

Ở đây chúng ta học được từ mới để quy định việc này, đó là areaStyle: {}

D. Biểu đồ cột cơ bản (basic chart)

biểu đồ cột của Echarts

Chúng ta đã làm quen với 3 biểu đồ đường cơ bản, giờ chúng ta sẽ xem một dạng biểu đồ khác cũng rất hay dùng, là biểu đồ dạng cột.

Mã mẫu:

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};

Ở đây chúng ta thấy từ khóa mới là type: 'bar' để chỉ cho biết đồ cột, các thứ còn lại giống biểu đồ đường.

E. Biểu đồ cột có kèm thêm màu nền (bar with background)

đổ màu nền cho cột

Nó sẽ đổ màu nền cho background của cột, tuy nhiên tôi không thích kiểu này lắm vì nó làm tăng phân tán thay vì tập trung vào cột chính. Mã mẫu:

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.1)'
        }
    }]
};

Từ khóa mới ở đây là:

showBackground: true,
        backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.1)'
        }

Màu sắc nó viết theo kiểu rbga, bạn nào chưa biết có thể search thêm trên mạng.

G. Làm nổi bật một cột nào đó (set style of single bar)

làm một cột nào đó nổi bật

Mã mẫu:

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, {
            value: 200,
            itemStyle: {
                color: '#a90000'
            }
        }, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};

Ở hình trên bạn có thể thấy cột cao nhất có giá trị 200 được đánh dấu mã mầu đỏ mận. Trên mã bạn để ý đến giá trị 200 được bổ sung thêm thông tin như này:

          {
  value: 200,
  itemStyle: {
       color: '#a90000'
  }
}

Nó được mở đầu bằng dấu ngoặc nhọn, sau đó đến từ khóa value chỉ đến giá trị 200, tiếp đến là từ khóa itemStyle chỉ rằng chúng ta muốn điều chỉnh style của mục này, tiếp đến là dấu ngoặc nhọn để mở ra thuộc tính mà chúng ta muốn điều chỉnh, ở đây là color tức màu sắc, sau dấu 2 chấm là mã màu mà chùng ta muốn chọn. Cuối cùng là đóng dấu ngoặc nhọn lại.

Ở đây bạn có thể đoán được ra rằng ngoài color, bên trong itemStyle chúng ta còn có thể có nhiều thuộc tính khác nữa.

H. Biểu đồ cột có khả năng sắp xếp (sort data in bar chart)

Biểu đồ cột theo thứ tự tăng dần, giảm dần

Thể hiện dữ liệu tăng dần (asc), hay giảm dần (desc) cũng rất thú vị và hay dùng.

Mã mẫu:

option = {
    dataset: [{
        dimensions: ['name', 'age', 'profession', 'score', 'date'],
        source: [
            [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],
            ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],
            [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],
            ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],
            [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],
            [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],
            ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],
            [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],
            ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12'],
        ]
    }, {
        transform: {
            type: 'sort',
            config: { dimension: 'score', order: 'desc' }
        }
    }],
    xAxis: {
        type: 'category',
        axisLabel: { interval: 0, rotate: 30 },
    },
    yAxis: {},
    series: {
        type: 'bar',
        encode: { x: 'name', y: 'score' },
        datasetIndex: 1
    }
};

Chúng ta sẽ phân tích từng cái một, vì đoạn mã bắt đầu trông phức tạp rồi.

Thứ nhất là dữ liệu đầu vào:

dataset: [{
        dimensions: ['name', 'age', 'profession', 'score', 'date'],
        source: [
            [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],
            ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],
            [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],
            ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],
            [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],
            [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],
            ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],
            [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],
            ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12'],
        ]
}
  • dataset là tệp dữ liệu;
  • dimensions nếu liên tưởng đến bảng Excel thì đây chỉnh là cột dữ liệu, ở đây chúng ta có 5 cột: tên, tuổi, nghề nghiệp, điểm số, và thông tin ngày tháng;
  • source là nơi ta nhập dữ liệu đầu vào;

Tiếp đến là phần liên quan đến lựa chọn sắp xếp:

{
  transform: {
            type: 'sort',
            config: { dimension: 'score', order: 'desc' }
}
  • transform chỉ đến kiểu chuyển đổi mà chúng ta muốn (bạn có thể suy đoán ra sort chỉ là một trong nhiều kiểu chuyển đổi mà ECharts có);
  • type: sort – chỉ đến kiểu chuyển đổi ở đây là sắp xếp;
  • config là các thiết lập, với lựa chọn sắp xếp theo score với kiểu giảm dần desc

Đối với trục hoành, chúng ta thấy thông tin như sau:

xAxis: {
        type: 'category',
        axisLabel: { interval: 0, rotate: 30 },
 }

Cái mới ở đây là axisLabel, chỉ đến nhãn của trục. Còn interval chỉ đến bước nhảy, Khi bạn để là 0, tất cả nhãn sẽ hiện ra, bạn để là 1 thì cứ cách một nhãn mới hiện một nhãn. Về rotate nó chỉ độ nghiêng của nhãn chữ, để 90 nó sẽ nằm dọc, còn để 0 nó sẽ nằm ngang. Giá trị hợp lý mà tôi thấy là từ 0 đến 45, bạn để cao quá chữ sẽ rất khó đọc.

Phần trục tung để yAxis {} có vẻ như là mặc định không điều chỉnh gì cả.

Còn phần cuối:

series: {
        type: 'bar',
        encode: { x: 'name', y: 'score' },
        datasetIndex: 1
    }

Phần encode cho chúng ta thấy rằng trục hoành x sẽ lấy thông tin name từ dữ liệu, còn trục tung y sẽ lấy thông tin score từ dữ liệu.

Giờ nhìn vào bảng đang sắp xếp theo thứ tự giảm dần tính theo score, ngoài ra bạn có thể thấy ông Adrian không có dữ liệu, sở dĩ như vậy vì trong tệp đầu vào cái score của ông là null.

  • Ở chỗ order, nếu bạn thay desc bằng asc thì thay vì giảm dần nó sẽ chuyển sang tăng dần.
  • Nếu bạn không muốn sắp xếp theo score nữa mà muốn theo age thì bạn chỉ cần thay thế age vào chỗ config: { dimension: 'score', order: 'desc' } là được. Nếu order là desc thì người có tuổi cao nhất sẽ ở cột đầu tiên;
  • Ở đây trục tung vẫn lấy thông tin score làm tiêu chí, nếu bạn muốn đổi sang age, thì ở phần encode bạn thay đổi y thành y: 'age';

Nếu bạn muốn biến trục y thành trục x và ngược lại để chuyển sang dạng biểu đồ cột ngang thay vì đứng thì đổi thông tin của x sang y là được, ví dụ:

yAxis: { // giờ trục tung lại là tên
        type: 'category',
        axisLabel: { interval: 0, rotate: 45 },
    },
xAxis: {},
    series: { // còn trục hoành là tuổi 
        type: 'bar',
        encode: {y: 'name', x: 'age'},
        datasetIndex: 1
    }

Kết quả nó sẽ thành thế này (sắp xếp theo tuổi giảm dần):

cột trục ngang trong Echarts

Phần 1 nghe chừng cũng đủ dài rồi, hy vọng gặp lại các bạn trong phần 2 vào vài ngày tới.

Leave a Comment