echarts容器设置width: 100%无效 宽始终显示100px

明明给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%有效, 那就不传, 也没关系

好了, 今天就分享到这边喽~~!