为了账号安全,请及时绑定邮箱和手机立即绑定

Echarts图表实现自适应

2018.09.18 22:29 2281浏览


在大数据时代,数据的可视化对前端提出了更高的要求,大佬们的团队提供了各色各样的插件,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


点击查看更多内容
2人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 邀请有奖 帮助中心 APP下载
官方微信

举报

0/150
提交
取消