1.切换tab时，echart显示默认的100px

切换tab时，elementUI的原理设置v-show 元素被隐藏,切换的时候echart 获取不到父元素高度

1.2 效果

1.3 解决方法

切换tab时先销毁然后再init（注意：要在this.$nextTick中进行操作，确保能获取到dom）

this.$nextTick(() => {this.$echarts.init(document.getElementById("element")).dispose();this.myChart = this.$echarts.init(document.getElementById("element"));let option = xxxthis.myChart.setOption(option)})// 切换tab时在tab-click(tab 被选中时触发)事件中对echarts进行重绘

具体实现看下面

1.4 原代码

<template><div style="padding:20px;"><el-card><el-tabs type="border-card" v-model="tabName" @tab-click="handleClick"><el-tab-pane label="用户管理" name="用户管理"><div class="echart-top"><div id="echart1" style="width:100%;height:100%;"></div><div id="echart2" style="width:100%;height:100%;"></div></div></el-tab-pane><el-tab-pane label="配置管理" name="配置管理"><div class="echart-top"><div id="echart3" style="width:100%;height:100%;"></div><div id="echart4" style="width:100%;height:100%;"></div></div></el-tab-pane></el-tabs></el-card></div></template><script>export default {name: "",data() {return {tabName: "配置管理",myChart1: "",myChart2: "",myChart3: "",myChart4: "",};},mounted() {this.init();},methods: {init() {this.getEchart1();this.getEchart2();this.getEchart3();this.getEchart4();},// tab 被选中时触发handleClick(value) {console.log("value", value);if (value.name === "用户管理") {this.getEchart1();this.getEchart2();} else {this.getEchart3();this.getEchart4();}},getEchart1() {this.$nextTick(() => {this.$echarts.init(document.getElementById("echart1")).dispose();this.myChart1 = this.$echarts.init(document.getElementById("echart1"));let option = {legend: {top: "bottom",},toolbox: {show: true,feature: {mark: {show: true },dataView: {show: true, readOnly: false },restore: {show: true },saveAsImage: {show: true },},},series: [{name: "面积模式",type: "pie",radius: [50, 250],center: ["50%", "50%"],roseType: "area",itemStyle: {borderRadius: 8,},data: [{value: 40, name: "rose 1" },{value: 38, name: "rose 2" },{value: 32, name: "rose 3" },{value: 30, name: "rose 4" },{value: 28, name: "rose 5" },{value: 26, name: "rose 6" },{value: 22, name: "rose 7" },{value: 18, name: "rose 8" },],},],};this.myChart1.setOption(option);});},getEchart2() {this.$nextTick(() => {this.$echarts.init(document.getElementById("echart2")).dispose();this.myChart2 = this.$echarts.init(document.getElementById("echart2"));let option = {xAxis: {type: "category",data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],},yAxis: {type: "value",},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: "bar",showBackground: true,backgroundStyle: {color: "rgba(180, 180, 180, 0.2)",},},],};this.myChart2.setOption(option);});},getEchart3() {this.$nextTick(() => {this.$echarts.init(document.getElementById("echart3")).dispose();this.myChart3 = this.$echarts.init(document.getElementById("echart3"));let option = {xAxis: {type: "category",boundaryGap: false,data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],},yAxis: {type: "value",},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: "line",areaStyle: {},},],};this.myChart3.setOption(option);});},getEchart4() {this.$nextTick(() => {this.$echarts.init(document.getElementById("echart4")).dispose();this.myChart4 = this.$echarts.init(document.getElementById("echart4"));let option = {xAxis: {},yAxis: {},series: [{data: [[10, 40],[50, 100],[40, 20],],type: "line",},],};this.myChart4.setOption(option);});},},};</script><style scoped>.echart-top {display: flex;justify-content: space-between;width: 100%;height: 500px;}</style>