Echarts數據可視化：如何實現頁面自適應

一、Echarts數據可視化

Echarts是一款開源的JavaScript圖表庫，由百度開發和維護。它可以通過簡單的JavaScript代碼，創建互動式的圖表和數據可視化。Echarts支持多種圖表類型，包括折線圖、柱狀圖、餅圖等，並提供了豐富的可配置項，可以實現高度自定義的數據可視化效果。

在Echarts中，通過調用API介面傳入數據和相關配置項，就可以生成相應的圖表。如下所示是一個簡單的示例，展示了如何在HTML頁面中使用Echarts生成一個簡單的折線圖：

    
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8" />
            <title>Echarts折線圖</title>
            <!-- 引入 ECharts 文件 -->
            <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
        </head>
        <body>
            <div id="main" style="width: 600px;height:400px;"></div>
            <script>
                // 初始化echarts實例
                var myChart = echarts.init(document.getElementById('main'));
                // 指定圖表的配置項和數據
                var option = {
                    title: {
                        text: '折線圖'
                    },
                    tooltip: {},
                    xAxis: {
                        data: ['周一', '周二', '周三', '周四', '周五']
                    },
                    yAxis: {},
                    series: [{
                        name: '銷量',
                        type: 'line',
                        data: [5, 20, 36, 10, 10]
                    }]
                };
                // 使用剛指定的配置項和數據顯示圖表。
                myChart.setOption(option);
            </script>
        </body>
        </html>

在以上代碼中，先引入了Echarts庫的JavaScript文件，然後在<body>標籤內通過<div>創建一個盒子，指定其寬高。接著在JavaScript代碼中，通過調用echarts.init方法初始化一個echarts實例，在option中可以配置相應的圖表樣式、數據等，最後通過setOption方法將其顯示在頁面中。

二、頁面自適應實現思路

由於不同設備的屏幕大小不同，為了在不同設備上都能夠正常的顯示圖表，需要實現頁面自適應。常用的做法是使用百分比或者rem單位來設置寬高，但是在使用Echarts時，需要注意以下幾點實現頁面自適應：

1、監聽resize事件

應用百分比或者rem單位設置寬高可以讓頁面自適應不同設備，但是如果用戶在使用過程中會改變頁面大小，這時候需要重新計算圖表，並實現動態的調整。所以，在頁面載入後，需要監聽resize事件，當窗口大小改變時重新計算圖表。

2、設置容器的寬高

當使用百分比或者rem單位設置圖表的寬高時，並不是直接設置在整個頁面上，而是設置在圖表的盒子容器上。所以在設置容器寬高的同時，也要考慮盒子內邊距和邊框的大小。

3、調用resize方法

當容器的寬高發生變化時，需要重新調用resize方法來重新計算圖表在新的大小下的布局。該方法由echarts庫提供，直接在實例上調用即可。

三、示例代碼

以下是一個完整的實現頁面自適應的代碼示例：

    
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8" />
            <title>Echarts折線圖自適應</title>
            <!-- 引入 ECharts 文件 -->
            <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
            <style>
                /* 盒子容器樣式 */
                #main{
                    width: 100%;
                    height: 100%;
                    padding: 20px;
                    box-sizing: border-box;
                    border: 1px solid #ccc;
                }
            </style>
        </head>
        <body>
            <div id="main"></div>
            <script>
                // 初始化echarts實例
                var myChart = echarts.init(document.getElementById('main'));
                // 定義圖表配置
                var option = {
                    title: {
                        text: '折線圖'
                    },
                    tooltip: {},
                    xAxis: {
                        data: ['周一', '周二', '周三', '周四', '周五']
                    },
                    yAxis: {},
                    series: [{
                        name: '銷量',
                        type: 'line',
                        data: [5, 20, 36, 10, 10]
                    }]
                };
                // 設置容器的初始寬高、監聽resize事件
                function resize(){
                    var main = document.getElementById('main');
                    main.style.width = window.innerWidth-40+'px';
                    main.style.height = window.innerHeight-40+'px';
                    myChart.resize();
                }
                window.onresize = function(){resize();}
                resize();
                // 顯示圖表
                myChart.setOption(option);
            </script>
        </body>
        </html>

在以上代碼中，首先設置了一個盒子容器，然後在樣式表中給其設置了寬高、內邊距和邊框等樣式。接著在JavaScript代碼中，先初始化了一個echarts實例，並定義了圖表的配置。然後通過resize方法設置容器的初始寬高，並監聽resize事件，當窗口大小改變時重新計算並設置容器的寬高，並調用resize方法進行重新布局。最後將圖表配置應用到實例中，即可在頁面中顯示自適應的折線圖。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/308644.html