问题描述： 在VUE项目中使用了echarts，使用了v-show让它最开始不显示出来，后面显示出来后发现图表的宽高变成了100px（默认值）。

问题分析： 这个是因为v-show隐藏是通过 display:none 来实现的，这时echarts就会变成默认的100px；

解决方法： 在图表显示出来后使用改图标的 resize 函数，如下代码：

this.chart.setOption(chart2Options)
this.$nextTick(()=>{
	this.chart.resize()
})

扩展： 有时候图表会放在多个标签页里，那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽，可能会绘制失败，因此在切换到该标签页时需要手动调用 resize 方法获取正确的高宽并且刷新画布，或者在 opts 中显示指定图表高宽。resize方法接受一个对象参数，
这个参数可以省略，这时图表就会变成容器的100%宽高，参数具体属性如下：

key可选值描述
widthNumber/String可显式指定实例宽度，单位为像素。如果传入值为 null/undefined/‘auto’，则表示自动取 dom（实例容器）的宽度
heightNumber/String可显式指定实例高度，单位为像素。如果传入值为 null/undefined/‘auto’，则表示自动取 dom（实例容器）的高度
silentBoolean是否禁止抛出事件。默认为 false。
animationObjectresize 的时候是否应用过渡动画，包含时长duration和缓动easing两个配置，默认duration为 0，即不应用过渡动画。

官网地址：https://echarts.apache.org/zh/api.html#echartsInstance.resize

# echarts
Logo
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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue