echarts设置容器宽度设置为100%只显示100px宽度

亦凉 2023-06-21 14:28 6阅读 0赞

#### 问题：前面的tab栏里面的柱形图表都是100%的宽度，最后一个换成折线图时出现宽度无法自适应的情况。 ####

<div class="environmentChart" >
          <div class="chart-wrap" id="environmentChart"></div>
        </div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70]

*  解决一：通过js获取外层div的宽度，然后设置给图表容器，宽度写死；
 *  解决二：加mychart.resize();

this.environmentChart = this.$echarts.init(this.$refs.environmentChart);
       this.environmentChart.setOption(getEnvironmentChartOption(data));
       this.environmentChart.resize();

## 结果如图所示： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191213112801683.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191213113637814.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E=,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，6人围观）

还没有评论，来说两句吧...

相关阅读

相关关于给Echar中的图表设置宽度为100%，但实际只有100px的问题

背景：在开发一个前端项目时，需要用到Element-ui的<el-tabs>组件和Echart开源库，当两者嵌套使用时，我给Echart中的图表宽度设...

淩亂°似流年/ 2024年04月19日 15:35/ 0 赞/ 76 阅读

相关 el-table中每列设置同样的宽度导致表格宽度没法实现100%布局

场景 el-table中表格宽度无法实现100%布局。 ![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6

缺乏、安全感/ 2023年09月30日 08:37/ 0 赞/ 22 阅读

相关 echarts设置容器宽度设置为100%只显示100px宽度

问题：前面的tab栏里面的柱形图表都是100%的宽度，最后一个换成折线图时出现宽度无法自适应的情况。 <div class="environmentChart"

亦凉/ 2023年06月21日 14:28/ 0 赞/ 7 阅读

相关设置span宽度

span自身是个行内元素，不设宽度的，如果要自适应宽度，首先要将行内元素设置为块级元素 span { background-color:fc0; d

川长思鸟来/ 2022年12月27日 01:24/ 0 赞/ 208 阅读

相关 vue中在tabs选项卡切换时echarts图表宽度由100%变为100px

使用场景：在tab 选项卡中使用了 echart 图表，然后在页面切换时，echarts 图表的宽度由原来的 100% 变为 100px 问题原因：echarts 渲染时

缺乏、安全感/ 2022年12月20日 02:58/ 0 赞/ 241 阅读

相关 echarts如何设置嵌套饼图的宽度

目录一：设置嵌套饼图宽度二：效果 1. 修改前 2. 修改后 3. 内层和外层宽度不一致的效果一：设置嵌套饼

忘是亡心i/ 2022年12月19日 09:29/ 0 赞/ 212 阅读

相关 html 设置表格打印宽度设置,html表格怎么设置宽度

![5268f80b9b1e01f982625ef6fac83ca1.png][] html表格设置宽度的方法：首先创建一个HTML示例文件；然后通过table创建一个表格；

左手的ㄟ右手/ 2022年10月09日 14:27/ 0 赞/ 270 阅读

相关【echarts】柱状图设置固定宽度（最大宽度）

//柱状图 var barGragh = document.getElementById('barGragh'); var barCha

缺乏、安全感/ 2022年09月29日 10:58/ 0 赞/ 288 阅读

相关用JavaScript设置宽度高度为100%

有的时候会有特殊情况需要用js来设置宽度高度为100%，代码如下： <script type="text/javascript"> function init

古城微笑少年丶/ 2022年07月13日 03:57/ 0 赞/ 442 阅读

相关 echarts设置柱形图宽度最大宽度最小宽度

一般来说不需要设置柱形图宽度，不过如果实在是要设置也只能硬着头皮设置了。修改series对应数组里面的barWidth属性即可设置柱形图宽度，当然还有最小宽，最大宽则

我不是女神ヾ/ 2022年02月20日 20:08/ 0 赞/ 1265 阅读