vue使用element-ui tabs切换echarts解决宽度100%方式
作者：小熊学Java
这篇文章主要介绍了vue使用element-ui tabs切换echarts解决宽度100%方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue使用element-ui tabs切换echarts 解决宽度100%
问题描述
vue+element项目中使用到了tab切换选项卡，其中有一个tab下的内容是echarts，出现了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="学生实习统计" name="1"> <xiaobear-bar-chart ref="child" v-if="activeName==='1'"/> </el-tab-pane> <el-tab-pane label="学生周记统计" 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: {
//切换标签页时触发
handleClick(tab, event) {
this.activeName = tab.name;
},
}
}
</script> 第二种：延时调用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，写不同的图，调用接口展示不同的图
<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 = {
//内容省略
};
this.gsList = [];
this.dsList = [];
this.chart1.setOption(option, true)
},
initChart2() {
this.chart2 = echarts.init(document.getElementById("myChart2"));
var option = {
//内容省略
};
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()
})
})
}
},
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。