一、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固定文字宽度
有时候我们需要控制文字的长度在一个范围之内，这时候我们可以使用自适应方法来控制文字宽度。
以下是一个简单的示例代码：
// 首先要设置容器中文本的样式
// 在容器中展示文本
{{ text }}
// 获取容器大小并更新文本的样式
var container = document.getElementById('container');
var span = container.querySelector('span');
window.addEventListener('resize', function() {
var width = container.clientWidth;
span.style.maxWidth = width + 'px';
});
在这个示例中，我们首先为容器中的文本设置了样式，再通过监听事件获取容器大小，最后根据容器大小来更新文本的样式。这样就能够保证文本长度始终在一个合适的范围内。
总结
本文从多个方面对 ECharts的自适应宽度做了详尽的阐述，涉及到比例自适应、宽度自适应、在容器宽度变动的处理、自适应屏幕和固定文字宽度上。掌握这些自适应知识后，对于 ECharts 的开发，也会更加得心应手。
