探究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/n/333288.html