Echarts+Bootstrap 响应式容器的设置
1 设置响应式容器
窗口大小变化的时候,我们希望Echarts的图表容器大小也跟着调整。
比如,图表容器是一个高度为 400px、宽度为页面 100% 的节点,你希望在浏览器宽度改变的时候,始终保持图表宽度是页面的 100%。这种情况下,可以监听页面的 resize 事件获取浏览器大小改变的事件,然后调用 echartsInstance.resize 改变图表的大小。
那我们就直接引用官方给出的demo:
<style>
<!-- main是图表容器-->
# main, html, body {
width: 100%;
}
<!-- 响应式容器给一个固定的高度 注意不要给容器设置宽度 否则响应式容器没法resize-->
# main {
height: 400px;
}
</style>
<!-- 响应式容器-->
<div id="main"></div>
<script>
// 初始化图表
var myChart = echarts.init(document.getElementById('main'));
// 监听窗口大小变化 resize
window.addEventListener('resize', function() {
myChart.resize();
});
</script>
如果你一个页面就一个图,那这么干很完美;但是如果你使用了选项卡,你发现切换选项卡的时候,图表消失了,那么下面就来解决这个问题。
2 响应容器 切换选项卡图表消失问题
官方给出的解释:
页面中存在多个标签页,每个标签页都包含一些图表。当选中一个标签页的时候,其他标签页的内容在 DOM 中被移除了。这样,当用户再选中这些标签页的时候,就会发现图表“不见”了。
本质上,这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加,图表所在的节点也已经不存在了。
解决问题:
既然选中一个标签页的时候,其他标签页的内容在 DOM 中被移除了,那我们就在选中当前标签页的时候,初始化该标签页对应的图表:
<script>
var charts = [];
function initCharts() {
let my_chart= echarts.init(document.getElementById('my-chart'));
my_chart.setOption(option_my_chart);
charts.push(my_chart);
}
// 初始化图表
initCharts();
// 解决tab标签点击时图表对应不显示问题
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
for(var i = 0; i < charts.length; i++) {
charts[i].resize();
}
});
// 监听窗口大小变化 重设对应图表DOM大小
$(window).resize(function() {
for(var i = 0; i < charts.length; i++) {
charts[i].resize();
}
});
</script>
此时再去测试,响应式容器和选项卡切换都没有问题了。