Echarts+Bootstrap 响应式容器的设置，解决选项卡tab切换时图表消失的问题

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>

此时再去测试，响应式容器和选项卡切换都没有问题了。