百度echart图表宽度自适应问题的一种解决思路

使用echart图表做项目遇到了一个难题，就是图表随着所在div容器宽度变化而自适应的问题。

图表所在的容器变化存在三种情况：

1）打开页面时，左侧侧边栏是伸出的，右侧图表所在的div占满剩下空间，图表要占满容器；

2）点击一个按钮左侧侧边栏收缩或伸出，图表所在的div容器变化，内部图表也要对应占满

2）调整窗口大小，图表所在容器的变宽或变窄，其内部图表也自适应变化

所以到针对这三种不同的情况进行考虑(这里侧边栏伸出的宽度为250px,收缩后的宽度为50px)

第一种情况：打开浏览器，侧边栏伸出的情况，图表占满父级容器

打开页面先获取图表所在的div容器宽度，将这个宽度赋给该div容器，这个宽度是获取浏览器窗口的宽度减去左侧边栏宽度

$("#container").width(document.documentElement.clientWidth - 250);

再对图表进行初始化和渲染；

var char = echarts.init($('#container')[0]);
option = {
//图表配置信息
};
char.setOption(option );

第二种情况，点击按钮侧边栏伸缩，图表随着父级容器的宽度变化而填充满容器

点击前先判断侧边栏的伸缩状态，再给div容器一个对应的宽度，再对图表进行大小重建

$(document).on('click', '.slideBtn', function() {
var tempWidth = document.documentElement.clientWidth;
var sideWidth = $("#slide-menu").width();
if (sideWidth == "250") {//侧边栏为伸出状态
$("#container").width(tempWidth - 50);
} else {//侧边栏为收缩状态
$("#container").width(tempWidth - 250);
}
char.resize();
})

第三种情况，调整窗口大小，图表所在容器变化，图表对应充满容器

为window.onresize添加方法是div容器宽度占满,再对图表进行大小重建

window.onresize = function() {
$('#container').width('100%');
char.resize();
};

注意，这里给容器宽度设置百分百的前提是实际项目中该容器还有至少一个父级div，这个div占满出侧边栏外剩余的浏览器宽度，所以这里使用100%不是指浏览器的所有宽度。

由于三种情况都考虑了图表容器的宽度，所以在给容器设置css样式只需设置高度即可。