现页面中有如下图表需要显示

现我希望页面在进行缩放的时候，图表大小也跟着变。首先想到的就是宽度设置为100%，但是当我在“总计”，“加分”，“扣分”之前切换时，发现图表宽度变成了100px（如果你设置的宽度是固定大小的，比如500px，那就不会有这个问题），这是echart本身的原因。那么如何解决图表自适应问题呢，现在有如下代码（只展示了主要的部分代码）

<!--图表容器-->
<div class="tab-pane active" id="total">
    <!-- 总计容器 -->
    <div id="total_chart" style="width: 100%;height:518px;"></div>
</div>
<div class="tab-pane" id="add">
    <!-- 加分容器 -->
    <div id="add_chart" style="width: 100%;height:518px;"></div>
</div>
<div class="tab-pane" id="deduction">
    <!-- 扣分容器 -->
    <div id="deduction_chart" style="width: 100%;height:518px;"></div>
</div>
<script>
	$.get('请求的url', function (response) {
	        var total_id = "total_chart";
	        var add_id = "add_chart";
	        var deduction_id = "deduction_chart";
	        // 总计表
	        chart(total_id);
	        // 加分表
	        chart(add_id);
	        // 扣分表
	        chart(deduction_id);
	    }, 'json')
	function chart(chart_id) {
        var myChart = echarts.init(document.getElementById(chart_id));
        var myOption;
        // 省略大部分代码
        // 使用制定的配置项和数据显示图表
        myChart.setOption(myOption);
        // 监听点击事件
        window.addEventListener("click", function () {
            myChart.resize();
        });
        // 监听浏览器页面缩放事件
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
</script>

echart中的chart.resize()就可以实现，所以我们需要做的就是如何在页面进行缩放或者切换tab时，触发这个resize()操作呢？注意上面代码中的两个事件监听。

• 第一个是监听点击操作。只要你切换页面中的“总计”，“加分”，“扣分”，那么就会触发myChart.resize()，这样图表的大小就会发生改变，因为我们设置width是100%，所以它就会根据当前图表容器来进行变化。

• 第二个是页面缩放事件，道理和点击是一样的。建议两个都写，这样无论是你切换tab，还是页面缩放，图表大小都会跟着变化的。