vue使用element-ui tabs切換echarts解決寬度100%方式

更新時間：2023年07月18日 10:04:36 作者：小熊學Java

這篇文章主要介紹了vue使用element-ui tabs切換echarts解決寬度100%方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue使用element-ui tabs切換echarts 解決寬度100%

問題描述

vue+element項目中使用到了tab切換選項卡，其中有一個tab下的內(nèi)容是echarts，出現(xiàn)了echarts寬度縮減為100px無法繼承100%屬性。

問題

echarts渲染時tab選項卡display為none，所以width：100%沒有可繼承項，被echarts自帶方法切割成100px。

解決思路

銷毀組件，在tab選項卡被選中時重新渲染組件，這個時候就會有寬度繼承。

第一種：通過 v-if 重新渲染組件即可。

<template>
? <div>
? ? <el-tabs v-model="activeName" @tab-click="handleClick">
? ? ? ? <el-tab-pane label="學生實習統(tǒng)計" name="1">
? ? ? ? ? ? <xiaobear-bar-chart ref="child" v-if="activeName==='1'"/>
? ? ? ? </el-tab-pane>
? ? ? ? <el-tab-pane label="學生周記統(tǒng)計" name="2">
? ? ? ? ? ? <xiaobear-pie-chart ref="second" v-if="activeName==='2'"/>
? ? ? ? </el-tab-pane>
? ? </el-tabs>
? </div>
</template>

<script>
? export default {
? ? name: "IncomeStatistics",
? ? data() {
? ? ? return {
? ? ? ? activeName: '1', //當前激活的標簽頁
? ? ? };
? ? },
? ? methods: {
? ? ? //切換標簽頁時觸發(fā)
? ? ? handleClick(tab, event) {
? ? ? ? this.activeName = tab.name;
? ? ? },
? ? }
? }
</script>?

第二種：延時調(diào)用echart的resize()方法即可

methods:{
? ? handleClick(tab, event) {
? ? ? if (tab.name === 'second') {
? ? ? ? this.$nextTick(() => {
? ? ? ? ? this.$refs.second.chart.resize()
? ? ? ? })
? ? ? }
? ? },
}

第三種：給標簽添加lazy屬性

<el-tab-pane :laze="true">
? ? <ToexamineLine ref="child"/>
</el-tab-pane>

vue el-tabs切換不顯示echarts 寬度為0

1.通過echarts不同的id，寫不同的圖，調(diào)用接口展示不同的圖

<el-tabs v-model="activeName" @tab-click="handleClick">
? ? <el-tab-pane label="電廠" name="dc" >
? ? ? ? <div :id="'myChart1'" style="width:100%;height:160%;"></div>
? ? </el-tab-pane>
? ? <el-tab-pane label="變電站" name="bdz" >
? ? ? ? <div :id="'myChart2'" style="width:100%;height:160%;"></div>
? ? </el-tab-pane>
</el-tabs>

methods: {
initChart1() {
? ? ? ? this.chart1 = echarts.init(document.getElementById("myChart1"));
? ? ? ? var option = {
? ? ? ? ? //內(nèi)容省略
? ? ? ? };
? ? ? ? this.gsList = [];
? ? ? ? this.dsList = [];
? ? ? ? this.chart1.setOption(option, true)
? ? ? },
? ? ? initChart2() {
? ? ? ? this.chart2 = echarts.init(document.getElementById("myChart2"));
? ? ? ? var option = {
? ? ? ? ? //內(nèi)容省略
? ? ? ? };
? ? ? ? this.gsList = [];
? ? ? ? this.dsList = [];
? ? ? ? this.chart2.setOption(option, true)
? ? ? },
? ? //標簽頁
? ? ? handleClick(tab, event) {
? ? ? ? this.activeName == tab.name;
? ? ? ? if(this.activeName == 'dc'){
? ? ? ? ? this.queryForm.type = 'dc'
? ? ? ? ? this.getList()
? ? ? ? }else if(this.activeName == 'bdz'){
? ? ? ? ? this.queryForm.type = 'bdz'
? ? ? ? ? this.getList()
? ? ? ? }
? ? ? },
? ? ?getList(){
? ? ? ? //圖
? ? ? ? if(this.activeName == 'dc'){
? ? ? ? ? getDwgs(this.queryForm).then((res) => {
? ? ? ? ? ? this.echartsList = res.list
? ? ? ? ? ? for(let i=0;this.echartsList.length>i;i++){
? ? ? ? ? ? ? this.dsList.push(this.echartsList[i].ds)
? ? ? ? ? ? ? this.gsList.push(this.echartsList[i].gs)
? ? ? ? ? ? }
? ? ? ? ? ? this.$nextTick(() => {
? ? ? ? ? ? ? this.initChart1()
? ? ? ? ? ? })
? ? ? ? ? })
? ? ? ? }else if(this.activeName == 'bdz'){
? ? ? ? ? getDwgs(this.queryForm).then((res) => {
? ? ? ? ? ? this.echartsList = res.list
? ? ? ? ? ? for(let i=0;this.echartsList.length>i;i++){
? ? ? ? ? ? ? this.dsList.push(this.echartsList[i].ds)
? ? ? ? ? ? ? this.gsList.push(this.echartsList[i].gs)
? ? ? ? ? ? }
? ? ? ? ? ? this.$nextTick(() => {
? ? ? ? ? ? ? this.initChart2()
? ? ? ? ? ? })
? ? ? ? ? })
? ? ? ? }
? ? ? },
}