在大数据时代，数据的可视化对前端提出了更高的要求，大佬们的团队提供了各色各样的插件，Echarts、HightCharts、D3.js，今天在做响应式后台管理系统时需要对Echarts图表进行自适应。

原理很简单，在浏览器窗口变化时调用Echarts提供的resize方法，详见官方文档，该方法的描述是：改变图表尺寸，在容器大小发生改变时需要手动调用。这就需要你的外部容器也是自适应的。

详见示例代码：

** HTML **

1
2
3
4
<!--栅格布局-->
<div class="col-sm12">
  <div id="main"></div>
</div>

** CSS **

1
2
3
4
5
6
7
8
9
10
11
12
/*给出一个最大宽度 适配移动端*/
#main{
    max-width: 1920px;
  height: 400px;
}

@media screen and (max-width:780px) {
  #main{
    width: 100%;
    height: 300px;
  }
}

** Javascript **

1
2
3
4
5
6
7
8
9
10
11
12
13
//echarts
var myChart = echarts.init(document.getElementById('main'));

option = { 
  //...
    };
    
myChart.setOption(option);
//通过DOM id获取到echarts实例
var myChart = echarts.getInstanceByDom(document.getElementById("main"));
window.onresize = function () {
    myChart.resize();
};