vue + elementui + echarts adaptive multi-label width

Using v-if, when clicked loaded, the default 100% width.

<！--父组件-->
<el-tabs type="border-card" @tab-click="changeState" value="lineThree">
    <el-tab-pane name="lineThree" label="1">
        <line-chart :chart-data="lineChart3" />
    </el-tab-pane>
    <el-tab-pane name="lineTwo" label="2">
        <line-chart v-if="line2" :chart-data="lineChart2" />
    </el-tab-pane>
    <el-tab-pane name="lineOne" label="3">
        <line-chart v-if="line1" :chart-data="lineChart1" />
    </el-tab-pane>
</el-tabs>

// parent component data and methods 
  Data () {
         return {
            line1: false,
            line2: false
        }
    },
    methods: {
        changeState: function (tab, event) {
            if (tab.name == "lineTwo") {
                this.line2 = true
            } else if (tab.name == "lineOne") {
                this.line1 = true
            }
        }
    }

// lineChart subassembly width

<div  :style="{width:width}" />

props: {
        width: {
            type: String,
            default: "100%"
        }
}