Làm bảng biểu thống kê đẹp hơn trên web với thư viện JS ECharts

Đây là thư viện JS của Baidu giúp chúng ta tạo các bảng biểu đẹp và rất sinh động trên web. Đỡ phải làm bảng trên Excel rồi chụp ảnh lại. Một điều rất quan trọng khác là các bảng biểu như thế này giúp chúng ta xuất ra được các bảng động tùy vào dữ liệu đầu vào người dùng nhập, điều mà ảnh cố định không thể làm được.

Đầu tiên trong thẻ <head> của HTML bạn đưa file JS của ECharts vào:

    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
    </head>

Có 2 lựa chọn. Một là file JS đó lưu trên host của bạn, hai là bạn dùng CDN. Ví dụ trên tôi dùng đường link CDN được Cloudflare lưu sẵn trên host của họ, điều này có thể giúp tốc độ tải nhanh hơn và chắc chắn tiết kiệm băng thông cho bạn.

Tiếp theo trong thẻ <body>, chúng ta tạo một div có id là main, có thông số chiều rộng và chiều cao cho nó (bạn dĩ nhiên cũng có thể điều chỉnh thông số này qua file CSS ngoài hoặc qua CSS đặt trong thẻ head):

<body>    
      <div id="main" style="width:600px; height:550px;"></div>

</body>

Div này sẽ được dùng để hiển thị biểu đồ của chúng ta.

Giờ là phần quan trọng nhất, viết các đoạn mã JS để tạo ra bảng biểu. Lúc đầu bạn có thể vào mẫu của ECharts và copy mã mẫu về để xem, có rất nhiều mẫu đẹp ở đây: echarts.apache.org/examples/en/index.html

Bạn chọn mẫu muốn thử rồi click vào Full code. Copy toàn bộ mã đó rồi đưa vào trong thẻ <script> và ngay bên dưới div có id main ở trên.

Ví dụ:

<div id="main" style="width:600px; height:550px;"></div>

     <script type="text/javascript">

                    var chartDom = document.getElementById('main');
                    var myChart = echarts.init(chartDom);
                    var option;

                    option = {
                        dataset: {
                            source: [
                                ['score', 'amount', 'product'],
                                [89.3, 58212, 'Matcha Latte'],
                                [57.1, 78254, 'Milk Tea'],
                                [74.4, 41032, 'Cheese Cocoa'],
                                [50.1, 12755, 'Cheese Brownie'],
                                [89.7, 20145, 'Matcha Cocoa'],
                                [68.1, 79146, 'Tea'],
                                [19.6, 91852, 'Orange Juice'],
                                [10.6, 101852, 'Lemon Juice'],
                                [32.7, 20112, 'Walnut Brownie']
                            ]
                        },
                        grid: {containLabel: true},
                        xAxis: {name: 'amount'},
                        yAxis: {type: 'category'},
                        visualMap: {
                            orient: 'horizontal',
                            left: 'center',
                            min: 10,
                            max: 100,
                            text: ['High Score', 'Low Score'],
                            // Map the score column to color
                            dimension: 0,
                            inRange: {
                                color: ['#65B581', '#FFCE34', '#FD665F']
                            }
                        },
                        series: [
                            {
                                type: 'bar',
                                encode: {
                                    // Map the "amount" column to X axis.
                                    x: 'amount',
                                    // Map the "product" column to Y axis
                                    y: 'product'
                                }
                            }
                        ]
                    };

                    option && myChart.setOption(option);
       
    </script>

Nếu thấy mã chưa chạy thì bạn bỏ dòng import * as echarts from 'echarts'; đi ở ngay trên đầu trong mã mẫu là OK.

Mấy tùy chọn cơ bản

1. Bạn hoàn toàn có thể đổi tên id của div sang tên khác, ví dụ bieudo2

Khi đó bạn cũng phải đổi tên ở phần này theo dạng tương ứng:

var chartDom = document.getElementById('bieudo2');

2. Để có bảng responsive, tức là co giãn trên nhiều màn hình có chiều rộng khác nhau bạn cần làm hai điều sau

  • Ở chỗ width, thay vì để cố định chiều rộng bạn chuyển sang dạng %, ví dụ:
<div id="bieudo2" style="width:90%; height:550px; "></div>
  • Tiếp đến ngay trên phần option && myChart.setOption(option); bạn thêm dòng sau:
window.addEventListener('resize',function(){
myChart.resize();}) 

3. Tùy chọn về font chữ và kích cỡ chữ

Các biểu đồ mẫu của EChart có thể không hiển thị tiếng Việt tốt (một số dấu như ồ, ứ, ề, vân vân không hiển thị ổn). Khi đó bạn cần chủ động lựa chọn font phù hợp.

Các tùy chọn của EChart chi tiết bạn tham khảo từ tài liệu chính thức của họ ở đây.

Trong mục này tôi chỉ nói về một tùy chọn rất nhỏ thôi. Ví dụ mã mẫu của tôi thế này:

var chartDom = document.getElementById('main');
         var myChart = echarts.init(chartDom);
                    var option;

                    option = {
                        title: {
                            text: 'Tiêu đề của biểu đồ',
                            subtext: 'phụ đề của biểu đồ',
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            data: ['2011', '2012']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01]
                        },
                        yAxis: {
                            type: 'category',
                            data: ['A', 'B', 'C', 'D', 'E', 'F']
                        },
                        series: [
                            {
                                name: '2011',
                                type: 'bar',
                                data: [18203, 23489, 29034, 104970, 131744, 630230]
                            },
                            {
                                name: '2012',
                                type: 'bar',
                                data: [19325, 23438, 31000, 121594, 134141, 681807]
                            }
                        ]
                    };
                
           window.addEventListener('resize',function(){
           myChart.resize();})        
                
myChart.setOption(option);

Để hiển thị font không lỗi chúng ta bổ sung đoạn dưới đây vào ngay sau phần subtext:

textStyle: {
            fontSize: 30,
            fontFamily: "Arial"
}

Kết hợp thì nó trông như sau:

title: {
           text: 'Tiêu đề của biểu đồ',
           subtext: 'phụ đề của biểu đồ',
               textStyle: {
               fontSize: 30,
               fontFamily: "Arial"
               }
       },

Full đoạn mã vừa đáp ứng di động, vừa tùy chỉnh font theo ý thích:

<!DOCTYPE html>
<html>
    <head>
        <title>Ví dụ về Echarts</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
        <style>
            #main{
                    height:550px;
                    width:80%;
                  }
        </style>    
    </head>

     <body>
    <!-- preparing a DOM with width and height for ECharts -->    
    <div id="main"></div>

        <script type="text/javascript">
                    var chartDom = document.getElementById('main');
                    var myChart = echarts.init(chartDom);
                    var option;

                    option = {
                        title: {
                            text: 'Tiêu đề của biểu đồ',
                            subtext: 'phụ đề của biểu đồ',
                                textStyle: {
                                fontSize: 30,
                                fontFamily: "Arial"
                              }
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            data: ['2011', '2012']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01]
                        },
                        yAxis: {
                            type: 'category',
                            data: ['A', 'B', 'C', 'D', 'E', 'F']
                        },
                        series: [
                            {
                                name: '2011',
                                type: 'bar',
                                data: [18203, 23489, 29034, 104970, 131744, 630230]
                            },
                            {
                                name: '2012',
                                type: 'bar',
                                data: [19325, 23438, 31000, 121594, 134141, 681807]
                            }
                        ]
                    };
                
                            window.addEventListener('resize',function(){
                            myChart.resize();})        
                
        myChart.setOption(option);
       
    </script>

    </body>
</html>

Leave a Comment