在做大屏的数据分析的时候，经常会用到echarts的图表，大屏的分辨率会有很多，比如5400*3038， 9600*5400 等等，在适配大屏的布局上，宽设置成百分比，盛放 echarts 的盒子的宽设置成百分比，就可以适配图表了，但是图表里有文字的，比如图例的文字，x/y轴的文字等，如果不做处理，直接写fontSize=12，那你会发现，页面放到大屏之后，文字就特别小，甚至看不到。
那要怎么设置才能适配大屏的分辨率呢？
首先想到的就是rem， echarts 里的字号大小，如果设置成 fontSize='12rem'，其实是无效的，但是可以设置成百分比，比如 fontSize='100%'，这个百分比是指.echarts-item的100%，也就是echarts 的字号是 0.12rem。
<div id="echarts-box" class="echarts-item" ></div>
.echarts-item{
font-size: 0.12rem;
}
写到这里，大家应该就能知道echarts图表里的文字怎么去适配大屏分辨率了。
可以自行思考，完整的实现一下echarts图表文字如何适配大屏分辨率的小Dome。
如果还不清楚，可以想一想我们是怎么做移动端适配的，思路是一样的，先要实现，不同分辨率下html字号的变化。代码如下，具体里面的数值可以根据自己的大屏设计稿尺寸做调整。
<script type="text/javascript">
htmlSize();
// 绑定到窗口的这个事件中
window.addEventListener('resize', function (){
htmlSize();
});
function htmlSize() {
// 设计图尺寸
let designSize = 1920;
let docEl = document.documentElement;
// 根据窗口宽度做适配
let wW = docEl.getBoundingClientRect().width;
if (wW < 1080) {
wW = 1080 ;
} else if (wW > 19200) {
wW = 19200 ;
}
let rem = wW * 100 / designSize;
docEl.style.fontSize = rem + 'px';
// 根据窗口高度做适配
/*let designSize = 1920;
let docEl = document.documentElement;
let wH = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
if (wH < 1080) {
wH = 1080 ;
} else if (wH > 5400) {
wH = 5400 ;
}
console.log('调整尺寸',wW);
let rem = wH * 100 / designSize;
docEl.style.fontSize = rem + 'px';*/
}
</script>
完整的 Dome 代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
font-size: 100px;
width: 100%;
}
.echarts-wrap{
width: 100%;
height: 300px;
font-size: 1rem;
}
.echarts-item{
width: 30%;
height: 100%;
font-size: 0.12rem;
}
</style>
</head>
<script type="text/javascript">
htmlSize();
// 绑定到窗口的这个事件中
window.addEventListener('resize', function (){
htmlSize();
});
function htmlSize() {
// 设计图尺寸
let designSize = 1920;
let docEl = document.documentElement;
// 根据窗口宽度做适配
let wW = docEl.getBoundingClientRect().width;
if (wW < 1080) {
wW = 1080 ;
} else if (wW > 19200) {
wW = 19200 ;
}
let rem = wW * 100 / designSize;
docEl.style.fontSize = rem + 'px';
// 根据窗口高度做适配
/*let designSize = 1920;
let docEl = document.documentElement;
let wH = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
if (wH < 1080) {
wH = 1080 ;
} else if (wH > 5400) {
wH = 5400 ;
}
console.log('调整尺寸',wW);
let rem = wH * 100 / designSize;
docEl.style.fontSize = rem + 'px';*/
}
</script>
<body>
<div class="echarts-wrap">
<div id="echarts-box" class="echarts-item"></div>
</div>
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('echarts-box'));
// 指定图表的配置项和数据
let option = {
title: {
text: 'ECharts'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
axisLabel: {
fontSize: '100%',
}
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
barWidth:20,
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
其实最开始我不是这样实现的，那时候因为一下子没有想到设置字号百分比去实现，而是直接写了一个方法，echart的字号那里直接调用方法，算出字号，不过那种方法，不如这种直接设置百分比的简洁。
代码也贴一下吧，主要想说明的是，一种效果可以有多种实现方式，就是在不断的实践中找到最优解。如果大家有不一样的实现方法，欢迎评论区一起探讨。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
font-size: 100px;
width: 100%;
}
.echarts-wrap{
width: 100%;
height: 300px;
font-size: 1rem;
}
.echarts-item{
width: 30%;
height: 100%;
}
</style>
</head>
<body>
<div class="echarts-wrap">
<div id="echarts-box" class="echarts-item"></div>
</div>
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
<script type="text/javascript">
function getFontSize(res) {
// 根据窗口高度做适配
let wH = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
if (!wH) return;
if (wH < 1080) {
wH = 1080 ;
} else if (wH > 5400) {
wH = 5400 ;
}
let fontSize = 100 * (wH / 1080);
return res*fontSize;
}
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('echarts-box'));
// 指定图表的配置项和数据
let option = {
title: {
text: 'ECharts'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
axisLabel: {
fontSize: getFontSize(0.12),
}
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
barWidth:20,
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
