设置html文字大小根据页面大小自适应，在使用rem之前是使用的px和百分比，后来发现页面缩放或在小屏幕的电脑显示不尽人意，后改用rem，写法如:font-size: .21rem;或font-size: 2.1rem;如果前面是0的话可以省略，这样字体就会根据屏幕的大小来自动改变其大小了。不仅如此，除了字体还有div的宽和高等都可以用rem属性设置。
在html使用rem设置字体大小自适应:
在echarts设置字体大小自适应:
在echarts中不能使用rem属性时怎么办呢？解决办法就是先计算屏幕大小，然后还需要在每次渲染图表的时候指定数据位置，否则，在使用ajax更新数据后，数据字体的大小又会恢复成设置之前的字体大小了。
具体代码如下:
var assydaymonthX= []
var assydaymonth= []
var outboxdaymonthX= []
var outboxdaymonth= []
var outboxRrport = []
var assyRrport = []
var thisMonthYield = 100.00
var thisMonthNoYield = 0
var color = "#FFFFFF"
var draw
var bt=0 //必须赋初始值，否则第一次刷新页面是空值，后面根据main页面自动设置
var width = window.innerWidth;
var height = window.innerHeight;
var percent = width / 1920;
//获取按钮的点击事件，点击后根据main页面设置的变量改变，不需要再次赋值
document.onclick = function(e) {
var obj = event.srcElement;
if(obj.type == "button") {
draw();
}
}
draw = function(){
jsonData = {
TYPE: bt
}
$.ajax({
url:'/mes/HomePage/list',//地址
dataType:'json',//数据类型
data:jsonData,
type:'POST',//类型
timeout:5000,//超时
success:function (data,status) {
var rows = data.rows
var rowsB = data.rowsB
var rowsYield = data.rowsYield
for(var i=0;i<rowsYield.length;i++){
//今日综测测试数据
if(rowsYield[i]['zcstation']=='Function-Test')
{
todayYield = rowsYield[i]['y01_YIELD']
todayYield = todayYield.split("%");
todayYield = todayYield[0]
todayNoYield = 100.00-parseFloat(todayYield)
todayNoYield = todayNoYield.toFixed(2)
if(todayYield >= 95){
color = "#00FF00"
}else if(todayYield >= 90 && todayYield < 95){
color = "#FFFF00"
}else{
color = "#FF0000"
}
}
}
for(var i=1;i<=monthDay;i++)
{
if(outboxdaymonthX[i-1]!=i)
{
outboxdaymonthX.splice(i-1,0,i)
outboxdaymonth.splice(i-1,0,'0')
}
}
echarts_33();
function echarts_33() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('fb3'));
option = {
title: [{
//text: '射频校准',
text:'RF Yield',
left: 'center',
textStyle: {
color: '#fff',
fontSize:20 * percent
}
}],
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)",
position:function(p){ //其中p为当前鼠标的位置
return [p[0] + 10, p[1] - 10];
}
},
legend: {
top:'70%',
itemWidth: 10,
itemHeight: 10,
textStyle: {
color: 'rgba(255,255,255,.5)',
fontSize:20 * percent
}
},
series: [
{
name:'射频校准',
type:'pie',
center: ['50%', '42%'],
radius: ['40%', '60%'],
color: ['#00FF00', '#9900FF'],
label: {
normal: {
show: false,
formatter: "{d}%",
position: "center",
lineHight: 0,
fontSize: 20 * percent
},
},
labelLine: {show:false},
data:[
{value:99.80,label: {
normal: {
show: true,
color:'#FFFFFF'
}
}},
{value:0.2},
]
}
]
};
window.addEventListener('resize', function (e) {
myChart.resize();
//这里必须要再加一次，不然重新渲染后又会变成之前字体大小了
var width = window.innerWidth;
var height = window.innerHeight;
var percent = width / 1920;
myChart.setOption({
title: {
textStyle: {
fontSize: 20 * percent
},
subtextStyle: {
fontSize: 20 * percent
}
},
series: [
{
label: {
normal: {
fontSize: 20 * percent
},
},
}
]
});
});
}
},
//失败/超时
error:function(XMLHttpRequest,textStatus,errorThrown){
if(textStatus==='timeout'){
alert('請求超時');
setTimeout(function(){
alert('重新请求');
},2000);
}
}
});
return draw;
}
window.setInterval(draw(),20000); //20秒更新一次
}以上代码就是我js文件里面写的，当然，是要搭配html页面运行的，所以大家运行不了的，主要部分说一下吧，首先是计算出页面的大小，如下图：
然后根据页面大小动态设置字体大小，原本是设置的20px，现在修改为下图这样：
如果是数据不需要刷新那么按照以上两步就可以了，但是在大多数情况下，数据都是要实时更新的，例如这里我使用了ajax更新数据，那么就需要在渲染时重新设置一次字体大小，如下：
注意：比如要设置series里面的label里面的normal的fontSize时，要把上级也写上，否则无效。
echarts图表如何根据数据大小实时刷新呢？
如上边的echarts字体随屏幕大小自适应的代码举例，我在最上边定义了变量color，然后在从获取到的后台的数据切割进行计算，不同阶段的值图表显示不同颜色，最后设置图表刷新时间间隔即可。
设置时间间隔，20000为20秒ajax请求一次后台数据。
以上就是近期遇到的问题总结，如大佬有更好的方法或者我写的有问题，还请大佬不吝赐教。
