明明给chart容器设置了 width: 100%; 为什么始终无效, 一直都是100px呢?
原因: 我的echarts组件与另一个组件是相互切换的(tab切换), 并且使用的是v-show 控制组件的显示与隐藏(即 display: none;)
一开始显示的不是echarts组件, 这就导致容器一开始是display: none; 隐藏状态, 此时获取不到echarts的dom元素(从页面消失, 脱离文档流), 所以echarts就默认给自己设置了100px的宽
解决: 在echarts组件中 mounted时期, 动态设置高度:
props: {
// 手动设置容器的宽(解决一开始容器隐藏, width100% 无效的问题)
width: {
type: Number,
default: null,
},
},
mounted() {
if (this.width) {
(document.querySelector('.chart') as HTMLElement).style.width = this.width + 'px';
}
},
使用props 可以做到兼容:
(1) width: 100%无效, 我们就在父组件中传width进来, 手动设置;
(2) 如果100%有效, 那就不传, 也没关系
好了, 今天就分享到这边喽~~!