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>

1.Echarts的坑：切换tab时，echart显示默认的100px相关推荐

echarts柱状图值为0时不显示以及柱状图百分比展示
echarts柱状图值为0时不显示以及柱状图百分比展示 1.效果展示 2.代码 <template><div id="container"><div ...
Vue.js项目中,当图片无法显示时则显示默认图片
Vue.js项目中,当图片无法显示时则显示默认图片使用onerror方法最近在学习Vue时,遇到了一个问题,就是从后台传过来的图片路径无效时,需要在页面显示默认图片本人试了3种方法,2种方法失败了 ...
jQuery-图片加载失败时，显示默认图片
有以下几种情况: 1.正常显示图片: <img src="img/bus2.png"> 2.当图片未找到或者404时,触发 onerror 显示默认的图片: <i ...
图片不存在时，显示默认图片
图片不存在时,显示一个默认的图片 <img src="abc.JPG" οnerrοr="this.src='default.JPG'" /> 多张 ...
Echarts鼠标移动切换数据项时Tooltip卡顿情况优化
大家在使用Echarts的过程用,可能会碰到这样的情况,就是鼠标切换数据项过快时,鼠标hover触发的Tooltip的展示会有延迟的现象,给用户有一种很卡的感觉.特别是当页面内容较多,或者trigge ...
react-antd项目，一个多tab页面，共用一个title相同的table表格，并且在切换tab时实现数据更新
一.前言最近因为项目要求,开始学习并且使用React和Ant Design框架.在前端开发过程中,遇到这样一个页面:有多个tab,每个tab下都是一个table表格来进行数据展示.但,每个table ...
解决：element切换tab时table的抖动问题
抖动可能原因: element有做自动检测适应. 页面出现重绘. v-for的key属性渲染不对. 百度提供的解决方案有: v-show改成v-if.由于本需求的所有tab下的表格均需要显示,所以不能 ...
Vue+Openlayers显示TileWMS时不显示默认控件放大缩小旋转等组件
场景 Vue中使用Openlayers加载Geoserver发布的TileWMS: Vue中使用Openlayers加载Geoserver发布的TileWMS_霸道流氓气质的博客-CSDN博客在上面 ...
列表页进入详情页再返回列表页时，显示默认第一页的bug修复
如图所示,当我点击分页第二页的第一项,进入详情页后,在点击返回按钮,按理说应该返回到列表页第二页,但是却变成了默认的首页究其原因,大概是在返回列表页时,接口传参的当前页码pageNum默认传的是1, ...

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

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

1.2 效果

1.3 解决方法

1.4 原代码

1.Echarts的坑：切换tab时，echart显示默认的100px相关推荐

最新文章

热门文章