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

更新時(shí)間：2023年07月18日 10:04:36 作者：小熊學(xué)Java

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

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

問題描述

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

問題

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

解決思路

銷毀組件，在tab選項(xiàng)卡被選中時(shí)重新渲染組件，這個(gè)時(shí)候就會(huì)有寬度繼承。

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

<template>
? <div>
? ? <el-tabs v-model="activeName" @tab-click="handleClick">
? ? ? ? <el-tab-pane label="學(xué)生實(shí)習(xí)統(tǒng)計(jì)" name="1">
? ? ? ? ? ? <xiaobear-bar-chart ref="child" v-if="activeName==='1'"/>
? ? ? ? </el-tab-pane>
? ? ? ? <el-tab-pane label="學(xué)生周記統(tǒng)計(jì)" 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', //當(dāng)前激活的標(biāo)簽頁(yè)
? ? ? };
? ? },
? ? methods: {
? ? ? //切換標(biāo)簽頁(yè)時(shí)觸發(fā)
? ? ? handleClick(tab, event) {
? ? ? ? this.activeName = tab.name;
? ? ? },
? ? }
? }
</script>?

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

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

第三種：給標(biāo)簽添加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)
? ? ? },
? ? //標(biāo)簽頁(yè)
? ? ? 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()
? ? ? ? ? ? })
? ? ? ? ? })
? ? ? ? }
? ? ? },
}