HTML设置字体大小自适应屏幕与echarts图表颜色根据数据大小实时刷新图表颜色

设置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请求一次后台数据。 

以上就是近期遇到的问题总结，如大佬有更好的方法或者我写的有问题，还请大佬不吝赐教。