Echarts图表实现自适应

echarts

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

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

详见示例代码：

** HTML **

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

** CSS **

/*给出一个最大宽度 适配移动端*/
#main{
    max-width: 1920px;
    height: 400px;
}

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

** Javascript **

//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();
};