遇到的问题
1.使用el-tab-pane切换时,引入echarts组件,canvas100%的宽度会变为100px
2.数据不渲染
解决办法1(该方法fullCalendar也适用)
echarts组件加上v-if(必须是组件形式引入的),非组件看下面方法2
<template>
<el-tabs v-model="activeName">
<el-tab-pane label="首页" name="first">
<div></div>
</el-tab-pane>
<el-tab-pane label="统计分析" name="second">
<div class="echarts">
<lineEchart
v-if="activeName === 'second'"
id="chart1"
:dataList="barList"
>
</lineEchart>
</div>
</el-tab-pane>
</el-tabs>
</template>
解决办法2
直接使用echart而不是引入组件,用echarts的resize()
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="控制参数" name="conf">控制参数</el-tab-pane>
<el-tab-pane label="实时曲线" name="echarts">
<el-row :gutter="30">
<el-col :span="12">
<div ref="valveEchart" style="width: 100%;height:400px;"></div>
</el-col>
<el-col :span="12">
<div ref="powerEchart" style="width: 100%;height:400px;"></div>
</el-col>
</el-row>
</el-tab-pane>
</el-tabs>
mounted() { this.myChartMethod() }, methods: { handleClick(tab) { // 重点在这步 this.$nextTick(() => { echarts.getInstanceByDom(this.$refs.valveEchart).resize() echarts.getInstanceByDom(this.$refs.powerEchart).resize() }) }, myChartMethod() { // 初始化 var valveEchart = echarts.init(this.$refs.valveEchart) var powerEchart = echarts.init(this.$refs.powerEchart) // 配置 var valveOption = {} var powerOption = {} valveEchart.setOption(valveOption) powerEchart.setOption(powerOption) } }
2.vue的element中的el-tabs中使用FullCalendar加载异常的问题,延迟渲染el-tab-pane标签
分析完原因之后就要解决问题了,那么需要解决的问题就是让el-tab-pane延时加载,保证当el-tab-pane加载完之前,FullCalendar一定已经加载完成了。通过浏览element的官方文档,发现el-tab-pane有一个lazy属性。
所以只需要给这个加载日历的el-tab-pane添加一个属性lazy并且赋值为true就可以了
看一下正确的代码和效果原文链接:https://www.jianshu.com/p/a698970c82dd