echart自适应宽度的两种方法实例

//根据窗口的大小变动图表 
window.onresize = function(){
    myChart.resize();
    myChart1.resize();    //若有多个图表变动，可多写
 
}

window.addEventListener("resize",function(){
     myChart.resize();
});

// es5
function fn(){//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
    //var height=$("#divID").height()
    //或
    var height=document.getElementById("divID").offsetHeight
    var width=document.getElementById("divID").offsetWidth
};
 
fn ();//设置容器高宽
 
//窗口大小发生了变化，代码：
//方法1
window.onresize = function () {//用于使chart自适的方法  
    fn ();//重置容器高宽
    myChart.resize();
}
 
//方法2
window.addEventListener("resize",function(){   //监听
    fn ();//重置容器高宽
    myChart.resize();
})

<!--图表容器-->
<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>