解决echarts宽度100%变成了100px
外层div设置宽高为100%
,在渲染出来的时候变成了100px
这种情况一般都是echart所在的div一开始是display:none
,一般出现在以下几种情况:
1、echats放在了tab中
解决方法(没试过,嫌麻烦):
1、通过js获取外层div的宽高,然后设置给图表容器
2、加 mychart.resize()
如果用的是elementUI,超简单解决办法:
el-tabs 有一个属性:lazy,表示标签是否延迟渲染。
设为true,延时加载即可
首次加载的v-if或者v-show设置为true。
所在div用了v-show
,这种情况要不换成v-if
,要不就设置初始值是true
。换成v-if可行,但在频繁显示或不显示的时候不适用v-if,所以在试用v-show且初始为false的时候,可以使用resize()
watch:{
show(v){
// 在show为true,也就是显示的时候,调用resize 解决100px的问题
if(v){
this.$nextTick(() => this.$refs.chart.instance.resize())
}
}
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现