Echarts容器宽高为百分比，图表展示不全

Echarts设置宽高，图表仍展示不全问题问题示例如下：代码设置的宽度为100%父元素的宽，而打开F12会发现图表容器的宽高是100px。出现该问题的原因：1、高度固定，宽度百分比2、以Vue为例，图表中用到v-show等会引起页面重绘的指令，数据更新了但图表未更新。解决方案：1、重新调用图表绘制函数。2、调用Echats实例的resize()方法。...

Boriska1996

3364人浏览 · 2022-05-13 16:25:58

Boriska1996 · 2022-05-13 16:25:58 发布

Echarts设置宽高，图表仍展示不全问题

问题示例如下：

在这里插入图片描述

代码设置的宽度为100%父元素的宽，而打开F12会发现图表容器的宽高是100px。
在这里插入图片描述

出现该问题的原因：

1、高度固定，宽度百分比

2、以Vue为例，图表中用到v-show等会引起页面重绘的指令，数据更新了但图表未更新。

解决方案：

1、重新调用图表绘制函数。

2、调用Echats实例的resize()方法。

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^