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 **

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

作者：Joydezhong
链接：https://www.jianshu.com/p/7f554595a96f