探究ECharts自適應寬度

一、ECharts比例自適應

ECharts是一款十分強大的可視化控制項，現在已廣泛應用於數據可視化方向，其自適應能力是其 突出的特點之一。其中比例自適應就是一種常用的自適應方式，它會將圖表中每個元素的大小按照比例縮放。

比例自適應是特別適合在固定大小的容器中使用，例如下面的實例代碼：

// 容器樣式：寬400px, 高200px
#container{
    width: 400px;
    height: 200px;
    margin: 0 auto;
}
// 初始化圖表
var myChart = echarts.init(document.getElementById('container'));
// 圖表配置項
var option = {
    //... 其他配置項在此省略
}
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
// 監聽窗口大小變化進行比例自適應
window.addEventListener("resize", function() {
    myChart.resize();
});

以上代碼就是一個簡單的ECharts容器布局，width設置為400px，height設置為200px，如圖所示：

圖表隨著窗口大小的變化自適應寬度，但是圖表元素的大小不會改變，圖表看起來的縮放效果非常不錯，就可以讓圖表主體突出重點。

二、ECharts寬度自適應

其他自適應方式如寬度自適應，能夠讓圖表隨著容器的寬度而自適應顯示。接下來 我們就來看一下寬度自適應的實現方式。

以下是一個簡單的ECharts容器布局代碼實例，如圖所示：

// 容器樣式：寬100%, 高400px
#container{
    width: 100%;
    height: 400px;
    margin: 0 auto;
}
// 初始化圖表
var myChart = echarts.init(document.getElementById('container'));
// 圖表配置項
var option = {
    //... 其他配置項在此省略
}
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
// 監聽窗口大小變化進行寬度自適應
window.addEventListener("resize", function() {
    myChart.resize();
});

在容器的樣式中，將寬度設置為100%，高度設置為400px，寬度隨著窗口大小的變化而變化，而高度則始終保持不變。隨著窗口大小的變化，圖表的寬度也相應的發生變化，樣式看起來就非常的美觀。

三、ECharts在寬度變動

在開發過程中，由於 ECharts 隨著窗口大小的改變而自適應，所以可能需要在寬度變化後重新設置圖表等相關信息。

以下是一個簡單的示例代碼：

var myChart = echarts.init(document.getElementById('container'));

function resize() {
    // 將這裡設置為需要的值即可。
    myChart.setOption({
        // 配置項...
    });
}

// 啟用監聽事件，監聽窗口變化
window.addEventListener('resize', resize);

開啟監聽事件後，在 resize 函數中重新進行設置，這樣就可以保證圖表始終鋪滿整個容器的寬度。

四、ECharts自適應屏幕

當寬度和高度都設置為100%時，ECharts 將自適應屏幕，同時保持固定比例。

以下是一個簡單的示例代碼：

var myChart = echarts.init(document.getElementById('container'));

function resize() {
  // 設置容器的高度和寬度
  var bodyHeight = document.documentElement.clientHeight;
  var bodyWidth = document.documentElement.clientWidth;
  var container = document.getElementById('container');
  container.style.width = bodyWidth + 'px';
  container.style.height = bodyHeight + 'px';

  // 刷新圖表
  myChart.resize();
}

// 啟用監聽事件，監聽窗口變化
window.addEventListener('resize', resize);

在這個示例中，容器的高度和寬度均由將 body 的高度和寬度 設置為得到，以保證整個 ECharts 實例能夠完全佔據當前屏幕的空間。

五、ECharts自適應

ECharts允許在同一個容器中展示多個圖表，這時要注意不要讓圖表間的樣式互相影響。可以使用自適應來調整每個圖表的樣式，如使每個圖表鋪滿當前容器的空間，同時在外觀上也能保持相應的比例。

以下是一個簡單的示例代碼：

var myChart1 = echarts.init(document.getElementById('container1'));
var myChart2 = echarts.init(document.getElementById('container2'));

function resize() {
  // 容器的寬高需要手動設置
  var bodyWidth = document.documentElement.clientWidth;
  var width = (bodyWidth - 60) / 2;

  document.getElementById('container1').style.width = width + 'px';
  document.getElementById('container2').style.width = width + 'px';

  myChart1.resize();
  myChart2.resize();
}

// 啟用監聽事件，監聽窗口變化
window.addEventListener('resize', resize);

在這個示例中，我們一共在容器中展示了兩個圖表，分別為 container1 和 container2。resize 函數中手動設置了容器和寬度，這樣就能夠讓兩個圖表鋪滿當前容器的空間。

六、ECharts固定文字寬度

有時候我們需要控制文字的長度在一個範圍之內，這時候我們可以使用自適應方法來控制文字寬度。

以下是一個簡單的示例代碼：

// 首先要設置容器中文本的樣式
 .content {
 white-space: nowrap;
 }
 .content > span {
 display: inline-block;
 overflow: hidden;
 text-overflow: ellipsis;
 max-width: 100%;
 }
// 在容器中展示文本
 {{ text }}
原創文章，作者：OFOXC，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/333288.html