问题：

当对echats不作任何处理时，图表宽度不会自适应，如图所示（变绿的区域为echarts选中的div）。

加载完后：

收缩浏览器页面之后：

解决方法：

编写js函数，当页面大小变化时重新加载图表的大小。

代码实现：

    window.onresize = function () {myChart.resize();}

附：完整代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script><style>.class1 {width: 90%;height: 800px;background: green;}</style>
</head>
<body>
<div id="main" class="class1"></div>
<script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));var option = {xAxis: {type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [820, 932, 901, 934, 1290, 1330, 60],type: 'line',areaStyle: {}}]};myChart.setOption(option);window.onresize = function () {myChart.resize();}
</script>
</body>
</html>

【Echarts】当页面宽度改变时如何使图表宽度自适应相关推荐

vue图片宽高自适应_Echarts图标宽度变成100px，让图表宽度随着父元素自动适应，Vue实时监听宽度的变化，这可能是史上最好的解决方案！...
源码解读:当Echarts绘制图表计算宽度的时候,由于初始化图表设置为display: none,所以无法获取到clientWidth,而 parseInt(stl.width, 10)) 将widt ...
做网页时如何使格式不随浏览器大小改变而是出现滚动条
Q:做网页时如何使格式不随浏览器大小改变而是出现滚动条? A:网页中的代码指定宽度长度的地方都改成像素,而不是百分比,举例如下: <table name="xxx" widt ...
页面重构“鑫三无准则” 之“无宽度”准则
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1152 一.关于&q ...
[css] 页面重构“鑫三无准则” 之“无宽度”准则
原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 本文地址:http://www.zhangxinxu.com/wordpress/?p=1152 ...
css导航滚动到顶部后保持不动,html-使用CSS滚动时，使导航栏保持顶部
html-使用CSS滚动时,使导航栏保持顶部我正在尝试使导航栏与页面一起移动,但是如果用户向下滚动,则导航栏会停留在顶部. 谁能提供任何示例或如何提供? 非常感激. (我用其他任何语言都没有希望). ...
在一个html加载多个echarts,Echarts一个页面加载多个图表及图表自适应
Echarts一个页面加载多个图表及图表自适应模块化加载 //入口 require.config({ paths: { echarts: 'http://echarts.baidu.com/buil ...
页面加载后如何使JavaScript执行？
我正在使用<head>内的<script>执行外部脚本. 现在,由于脚本是在页面加载之前执行的,因此我无法访问<body> . 在文档"加载"后 ...
Javascript在页面加载时的执行顺序
一.在HTML中嵌入Javasript的方法直接在Javascript代码放在标记对<script>和</script>之间由<script />标记的src属 ...
Javascript在页面加载时的执行顺序(转载）
原文:http://dancewithnet.com/2007/03/22/order-of-execution-of-javascript-on-web/ 一.在HTML中嵌入Javasript的方 ...

【Echarts】当页面宽度改变时如何使图表宽度自适应

问题：

解决方法：

附：完整代码

【Echarts】当页面宽度改变时如何使图表宽度自适应相关推荐

最新文章

热门文章