echarts 适配大屏

echarts 自适应rem

当使用px2rem插件把px转换成rem单位时 层叠样式表中px可以转换成rem 单位 但是echarts图表中的单位并未发生转换，下面是解决方案，并做一记录 ：

1. 添加fontSize函数
   在图表配置的页面添加下方的转换函数，其中以3840为设计稿的宽度（记得根据实际情况进行修改）。

function fontSize(res) {
	// 获取文档宽度 
	let docEl = document.documentElement,
	clientWidth = window.innerWeight ||
	document.documentElement.clientWidth ||
	document.body.clientWidth;
	// 未获取到宽度 返回undefined
	if(!clientWidth) return;
	//根据文档宽度和设计稿的宽度 获取单位转换比例
	let fontSize = clientWidth / 3840
	//返回大小
	return res * fontSize; 
}

2.使用fontSize函数实现图表的数据转换
所有图表配置中涉及尺寸数据的，都要用fontSize进行转换，包括定位、字体大小、宽度、内外边距
此时无需计算，只需要调用fontSize函数即可完成转换

 legend: [
	{
		data: ["人"],
		top: fontSize(10),
		right: fontSize(320),
		itemWidth: fontSize(14),
		textStyle: {
			color: "#fff",
			fontSize: fontSize(20),
		}
	}
]

3. 同时监听屏幕尺寸变化，重绘图表即可

import echarts from "echarts";
    let option = {…… 图表配置 ……}
    let chart = echarts.init(this.$refs.myChart);
    chart.setOption(option);
    // 添加窗口大小改变监听事件，当窗口大小改变时，图表会重新绘制，自适应窗口大小
    window.addEventListener("resize", function() {
      chart.resize();
    });