Categories CSS JavaScript

Một ví dụ về bảng biểu ECharts ưa thích của tôi

Bảng biểu tạo bằng thư viện JS ECharts rất đẹp mắt, bản thân nó cũng có tính năng responsive rồi. Tuy nhiên chúng ta cần chỉnh sửa các cài đặt sao cho phù hợp.

Mục đích là để tạo bố cục hợp lý, thuận mắt trên cả giao diện di động lẫn máy bàn. Việc tích hợp này là rất quan trọng để tận dụng được hình thức nổi bật của ECharts.

Sự thực vấn đề thường nằm ở giao diện di động, vì màn hình lớn đồ thị thường không gặp vấn đề cản trở nào, nhưng với màn hình nhỏ, chúng ta cần điều chỉnh cẩn để nó không bị tràn, che dữ liệu.

Đoạn mã mẫu ưa thích của tôi dưới đây:

<!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:99%;
                  }
                                

                   @font-face { 
                        font-family:"fontMali";
                        src:url('fonts/mali-light.woff2') format('woff2'), /* trình duyệt mới nhất */
                            url('fonts/mali-light.woff') format('woff'), /* trình duyệt gần đây */
                            url('fonts/mali-light.ttf') format('ttf'), /* Safari, Android, iOS, IE 10, 11 */
                            url('fonts/mali-light.otf') format('otf'),
                            url('fonts/mali-light.eot?#iefix') format('embedded-opentype'), /* IE phiên bản cũ */
                            url('fonts/mali-light.svg#svgFontName') format('svg'); /* Legacy iOS */
                        font-display:swap; }
                    
                    body, form input {
                          font-family: "fontMali", Arial, Helvetica, sans-serif; }      
        </style>    
    </head>

     <body>
    <!-- preparing a DOM with width and height for ECharts -->    
    <div id="main"></div>
        <script>
                    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:24,
                                fontFamily:"fontMali"
                              }
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '1%',
                            right: '1%',
                            bottom: '0%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01]
                        },
                        yAxis: {
                            type: 'category',

                            data: ['Nguyễn', 'Lê', 'Trần', 'Bùi', 'Đặng']
                        },
                        series: [
                            {
                                name: '2012',
                                type: 'bar',
                                barWidth: '33%',
                                data: [1.2, 2.3, {
            value: 3.2,
            itemStyle: {
                color: '#f4b41a'
            }
        }, 4.2, 6.7],
                markPoint: {
                data: [
                    {name: 'tiêu điểm', value: 3.2, xAxis: 3.2, yAxis: 2}
                ]
            }
                            }
                        ]
                    };
                
                            window.addEventListener('resize',function(){
                            myChart.resize();});        
                
        myChart.setOption(option);
    </script>

    </body>
</html>

Kết quả:

biểu đồ được thể hiện bằng ECharts

Nó khá là ổn, khi các cột dữ liệu được nhìn rõ, full màn hình, cột dữ liệu cần quan tâm được đánh dấu nổi bật với màu sắc khác, và có chú thích giá trị. Trục X dữ liệu cũng rõ, không bị sát xít vào nhau.

Tôi sử dụng các lựa chọn sau:

#main {height:550px;
       width:99%;
      }
  • Đồ thị có khả năng responsive với tùy chọn sau:
window.addEventListener('resize',function(){myChart.resize();});
  • Tôi chọn font chữ tùy chỉnh để đồ thị thêm phần cá tính, font tùy chỉnh rất hợp với đồ thị vì nó không quá nhiều chữ:
@font-face {
             font-family:"fontMali";
             src:url('fonts/mali-light.woff2') format('woff2'), 
                    url('fonts/mali-light.woff') format('woff'), 
                    url('fonts/mali-light.ttf') format('ttf'), 
                    url('fonts/mali-light.otf') format('otf'),
                    url('fonts/mali-light.eot?#iefix') format('embedded-opentype'), 
                    url('fonts/mali-light.svg#svgFontName') format('svg'); 
              font-display:swap; }
  • Sử dụng font chữ tiêu đề với kích cỡ vừa phải, và kết hợp với font tùy chỉnh:
textStyle: {fontSize:24,
            fontFamily:"fontMali"}
  • Cột nằm ngang, tôi thấy rằng nó dễ quan sát hơn cột dọc;
  • Số lượng cột không quá nhiều, tôi giới hạn 5 cột trong trường hợp này;
  • Cột dữ liệu cần làm nổi bật được đánh dấu màu sắc khác, nó sử dụng câu lệnh:
{
value: 3.2,
     itemStyle: {
            color: '#f4b41a'
            }
}
  • Bạn cần chú ý chọn màu sắc sao cho hài hòa, tránh tương phản quá mức với cột dữ liệu khác, cái này cũng tùy thẩm mỹ mỗi người, và quan điểm riêng, cá nhân tôi chọn màu vàng không quá đậm;
  • Độ rộng cột được điều chỉnh bằng câu lệnh barWidth: '33%' Tôi thích cột mảnh hơn, cột dầy sẽ ngộp trên màn hình nhỏ, tuy nhiên bạn cứ điều chỉnh cụ thể trường hợp riêng của mình sao cho thích hợp;
  • Tôi bổ sung thêm bong bóng chú thích cho cột dữ liệu cần chú ý bằng câu lệnh:
markPoint:{
data: [
{name: 'tiêu điểm', value: 3.2, xAxis: 3.2, yAxis: 2}
]
}

Đây là câu lệnh đánh dấu dữ liệu theo cách thủ công, ở đó, chúng ta phải chọn cột cụ thể ở trục y (bắt đầu đếm từ 0 từ dưới lên, 2 có nghĩa là cột thứ 3 tính từ dưới lên), giá trị cụ thể của bong bóng so với trục x;

Rất tiếc là tôi vẫn chưa tìm cách điều chỉnh được màu của bong bóng sao cho nó hợp với màu của cột dữ liệu hơn.

  • Về lề và bao gồm nhãn tôi sử dụng câu lệnh:
grid: {left: '1%',
       right: '1%',
       bottom: '0%',
       containLabel: true
}

PS: file JS của ECharts không nên để defer vì nó sẽ làm bảng dữ liệu không hiển thị được.


Thiết kế bổ sung

Trong phần mã dưới đây, tôi bổ sung thêm một cột dữ liệu, và bố trí căn giữa nó cũng như đảm bảo kích cỡ ổn định trên nhiều cỡ màn hình khác nhau.

<!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>
                    @font-face { 
                        font-family:"fontMali";
                        src:url('fonts/mali-light.woff2') format('woff2'), /* trình duyệt mới nhất */
                            url('fonts/mali-light.woff') format('woff'), /* trình duyệt gần đây */
                            url('fonts/mali-light.ttf') format('ttf'), /* Safari, Android, iOS, IE 10, 11 */
                            url('fonts/mali-light.otf') format('otf'),
                            url('fonts/mali-light.eot?#iefix') format('embedded-opentype'), /* IE phiên bản cũ */
                            url('fonts/mali-light.svg#svgFontName') format('svg'); /* Legacy iOS */
                        font-display:swap; }
                    
                    body, form input {
                          font-family: "fontMali", Arial, Helvetica, sans-serif; } 
                    
                    #main, #main2 {
                            height:550px;
                            width:99%;
                            margin: 0 auto;
                            margin-top:50px; }
                    
                    @media (min-width: 500px) {
                            #main, #main2 {width:95%; } }     
                      
                    @media (min-width: 650px) {
                            #main, #main2 {width:600px; } }
                    
                    #footer {margin-top:100px; }
        </style>    
    </head>

    <body>
    <!-- preparing a DOM with width and height for ECharts --> 
                <div id="main2"></div>
                <script>
                            var chartDom = document.getElementById('main2');
                            var myChart = echarts.init(chartDom);
                            var option;

                            option = {
                                title: {
                                    text: 'Mức độ phổ biến của họ',
                                    subtext: 'chỉ là minh họa, không phải dữ liệu thực',
                                        textStyle: {
                                        fontSize:24,
                                        fontFamily:"fontMali"
                                      }
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'shadow'
                                    }
                                },
                                grid: {
                                    left: '1%',
                                    right: '1%',
                                    bottom: '0%',
                                    containLabel: true
                                },
                                xAxis: {
                                    type: 'value',
                                    boundaryGap: [0, 0.01]
                                },
                                yAxis: {
                                    type: 'category',

                                    data: ['Nguyễn', 'Trần', 'Bùi']
                                },
                                    nameTextStyle: {
                                      fontSize: 16
                                    },
                                series: [
                                    {
                                        name: 'họ',
                                        type: 'bar',
                                        barWidth: '33%',
                                        data: [1.9, {
                    value: 3.7,
                    itemStyle: {
                        color: '#f4b41a'
                    }
                }, 5.2],
                        markPoint: {
                        data: [
                            {name: 'tiêu điểm', value: 3.7, xAxis: 3.7, yAxis: 1}
                        ]
                    }
                                    }
                                ]
                            };

                                    window.addEventListener('resize',function(){
                                    myChart.resize();});        

                            myChart.setOption(option);
                </script> 
                
                
                <div id="main"></div>
                <script>
                            var chartDom = document.getElementById('main');
                            var myChart = echarts.init(chartDom);
                            var option;

                            option = {
                                title: {
                                    text: 'Mức độ phổ biến của tên',
                                    subtext: 'chỉ là minh họa, không phải dữ liệu thực',
                                        textStyle: {
                                        fontSize:24,
                                        fontFamily:"fontMali"
                                      }
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'shadow'
                                    }
                                },
                                grid: {
                                    left: '1%',
                                    right: '1%',
                                    bottom: '0%',
                                    containLabel: true
                                },
                                xAxis: {
                                    type: 'value',
                                    boundaryGap: [0, 0.01]
                                },
                                yAxis: {
                                    type: 'category',

                                    data: ['Tuấn', 'Minh', 'Hoàng']
                                },
                                    nameTextStyle: {
                                      fontSize: 16
                                    },
                                series: [
                                    {
                                        name: 'tên',
                                        type: 'bar',
                                        barWidth: '33%',
                                        data: [1.2, {
                    value: 3.2,
                    itemStyle: {
                        color: '#039fbe'
                    }
                }, 4.2],
                        markPoint: {
                        data: [
                            {name: 'tiêu điểm', value: 3.2, xAxis: 3.2, yAxis: 1}
                        ]
                    }
                                    }
                                ]
                            };

                                    window.addEventListener('resize',function(){
                                    myChart.resize();});        

                            myChart.setOption(option);
                </script>
                
                <div id="footer"></div>
    </body>
</html>
Back to Top