大屏自适应问题解决（element表格自适应，Echarts大小自适应）

三种我遇到的大屏问题的解决方法
问题一：看板中使用了element表格显示数据（固定行和列，仅查看，没有滚动条那种），全屏后表格内容没有放大，且下面有空白的问题
问题二：看板中的图表均在子组件中引入，但数据在父组件中调用接口获取，导致进入页面还没调用完接口就渲染了图表，没有显示图表数据的问题
问题三：全屏后Echarts图表没有放大，而是保留了原尺寸，且周围有空白的问题

问题一： element表格自适应（固定显示内容，没有滚动条的情况）

a. 画表格，可设置背景透明(element-loading-background=“rgba(0, 0, 0, 0.2)”)等

<div class="page_table">
	<el-table ref="Table" :data="TableData" :row-class-name="tableRowClassName" element-loading-background="rgba(0, 0, 0, 0.2)" style="width: 100%" height="100%" :key="tableKey">
	    <el-table-column label="类型" prop="Type" align="center" show-overflow-tooltip min-width="130" />
	    <el-table-column label="天" prop="Day" align="center" show-overflow-tooltip min-width="130" />
	    <el-table-column label="周" prop="Week" align="center" show-overflow-tooltip min-width="130" />
	    <el-table-column label="月" prop="Month" align="center" show-overflow-tooltip min-width="130" />
	</el-table>
</div>

b. 设置奇数行和偶数行背景色不同

tableRowClassName({ rowIndex }) {
	if (rowIndex % 2 !== 0) {
		return 'warning-row';
	}
},

c. 设置全屏后表格显示不全下面空白的问题

<style lang="scss" scoped>
	// 表格div大小
	.page_table{
        width: 100%;
        height: 100%;
	}
	// 避免放大后下面有留白
	/deep/ .el-table {
	    .el-table__body {
	        height: 100%;
	    }
	}
	// 奇数 偶数行背景色不同
	/deep/ .el-table .warning-row {
	    background-color: rgba($color: #8ab9ff, $alpha: 0.1) !important;
	  }
</style>

问题二： Echarts图表尺寸自适应

a. 图表div外层一定要套一个div，设置类名和ref

<div class="bar-charts-div" ref="ct">
	<div id="barChart" class="app-echarts"></div>
</div>

b. 引入图表，引入动态监听文件

import * as echarts from 'echarts';
import { chartssize } from '@/utils/resize'; // 动态监听
data() {
    return {
        charts: {}
    };
},
mounted() {
    // 监听父元素尺寸变化，动态改变尺寸
    const ct = this.$refs['ct'];
    window.addEventListener('resize', () => {
        chartssize(ct, this.charts, 0, 0);
    });
}, 
created() {
   this.getRateData();
},
methods: {
	getRateData(){
		//调用接口获取数据
		this.$nextTick(() => {
          	// 渲染图表
            var chartDom = document.getElementById('barChart');
            this.charts = echarts.init(chartDom);
            var option = this.setOptions(rateData);
            option && this.charts.setOption(option);
        });
	},
	setOptions(data){
		let options = {
			// 图表配置项
		}
		return options;
	},
},

c. 外层div设置宽高

<style lang="scss" scoped>
	.bar-charts-div {
	    overflow:hidden;
	    height:100%;
	    width:100%;
	}
	.app-echarts {
	    width: 100%;
	    height: 100%;
	}
</style>

d. 外部引入文件

/**
 *@description 为图表计算高度
 *@param container 父容器
 *@param charts echarts对象
 *@param offsetX 横轴偏移，可不填，默认50px
 *@param offsetY 纵轴偏移，可不填，默认70px
*/
export function chartssize(container, charts, offsetX = 50 , offsetY = 70) {
    function getStyle(el) {
        if (window.getComputedStyle) {
            const doc = window.getComputedStyle(el);
            const height = parseInt(doc.height);
            const width = parseInt(doc.width);
            return {height, width};
        } else {
            return {height: container.clientHeight, width: container.clientWidth};
        }
    }
    const {height, width} = getStyle(container, null);
    charts.resize({width: parseInt(width - offsetX), height: parseInt(height - offsetY)});
}

问题三： Echarts图表在组件中编写，但数据在父组件中调接口，造成数据渲染不上的问题修改

说明：较简单的方法，一是不在子组件中拆开写；二是在子组件中调用接口获取数据；三是如下方法。

a. 父组件中引入图表子组件，设置图表的ref

<div class="content_bottom_echarts">
	<line-bar-echarts ref="finishedNotOutRateRef" :series-data="finishedNotOutRate"></line-bar-echarts>
</div>

b. 调用接口获取数据

created() {
    this.getFinishedNotOutRate();// 获取完工未出库率数据
},
methods: {
	getFinishedNotOutRate(){
		// 调用接口
		this.$refs.finishedNotOutRateRef.drawCircle(this.finishedNotOutRate);
	},
},

c. 图表子组件中渲染图表

 // 生命周期 dom 渲染完成后
mounted() {
	// 渲染图表
	this.charts = echarts.init(document.getElementById('barChart' + this.documnetId));
	this.drawCircle(this.seriesData);
},
methods: {
	// 绘制图形
	drawCircle(data) {
	    let that = this;
	    let index = 0;
	    that.charts.setOption(that.setOptions(data));
	    that.charts.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 0 }); // 设置默认选中高亮部分
	    that.charts.on('mouseover', function(e) {
	        if (e.dataIndex != index) {
	            that.charts.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: index });
	        }
	    });
	    that.charts.on('mouseout', function(e) {
	        index = e.dataIndex;
	        that.charts.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: e.dataIndex });
	    });
	},
	setOptions(data){
		let options = {
			// 图表配置项
		}
		return options;
	},
}