設(shè)置html文字大小根據(jù)頁面大小自適應(yīng)，在使用rem之前是使用的px和百分比，后來發(fā)現(xiàn)頁面縮放或在小屏幕的電腦顯示不盡人意，后改用rem，寫法如:font-size: .21rem;或font-size: 2.1rem;如果前面是0的話可以省略，這樣字體就會(huì)根據(jù)屏幕的大小來自動(dòng)改變其大小了。不僅如此，除了字體還有div的寬和高等都可以用rem屬性設(shè)置。

在html使用rem設(shè)置字體大小自適應(yīng):

在echarts設(shè)置字體大小自適應(yīng):

在echarts中不能使用rem屬性時(shí)怎么辦呢？解決辦法就是先計(jì)算屏幕大小，然后還需要在每次渲染圖表的時(shí)候指定數(shù)據(jù)位置，否則，在使用ajax更新數(shù)據(jù)后，數(shù)據(jù)字體的大小又會(huì)恢復(fù)成設(shè)置之前的字體大小了。

具體代碼如下:

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 //必須賦初始值，否則第一次刷新頁面是空值，后面根據(jù)main頁面自動(dòng)設(shè)置var width = window.innerWidth;var height = window.innerHeight;var percent = width / 1920;//獲取按鈕的點(diǎn)擊事件，點(diǎn)擊后根據(jù)main頁面設(shè)置的變量改變，不需要再次賦值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',//數(shù)據(jù)類型data:jsonData,type:'POST',//類型timeout:5000,//超時(shí)success:function (data,status) {var?rows?=?data.rowsvar?rowsB?=?data.rowsBvar?rowsYield?=?data.rowsYieldfor(var i=0;i<rowsYield.length;i++){//今日綜測測試數(shù)據(jù)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() {// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('fb3')); option = {title: [{//text: '射頻校準(zhǔn)',text:'RF Yield',left: 'center',textStyle: {color: '#fff',fontSize:20 * percent}}],tooltip: {trigger: 'item',formatter: "{a} <br/>{b}: {c} (ozvdkddzhkzd%)", position:function(p){ //其中p為當(dāng)前鼠標(biāo)的位置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:'射頻校準(zhǔn)',type:'pie',center: ['50%', '42%'],radius: ['40%', '60%'],color: ['#00FF00', '#9900FF'],label: {normal: {show: false,formatter: "ozvdkddzhkzd%",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();//這里必須要再加一次，不然重新渲染后又會(huì)變成之前字體大小了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},},}]});});}},//失敗/超時(shí) error:function(XMLHttpRequest,textStatus,errorThrown){if(textStatus==='timeout'){alert('請求超時(shí)');setTimeout(function(){alert('重新請求');},2000);} }});return draw; }window.setInterval(draw(),20000); //20秒更新一次}

以上代碼就是我js文件里面寫的，當(dāng)然，是要搭配html頁面運(yùn)行的，所以大家運(yùn)行不了的，主要部分說一下吧，首先是計(jì)算出頁面的大小，如下圖：

然后根據(jù)頁面大小動(dòng)態(tài)設(shè)置字體大小，原本是設(shè)置的20px，現(xiàn)在修改為下圖這樣：

如果是數(shù)據(jù)不需要刷新那么按照以上兩步就可以了，但是在大多數(shù)情況下，數(shù)據(jù)都是要實(shí)時(shí)更新的，例如這里我使用了ajax更新數(shù)據(jù)，那么就需要在渲染時(shí)重新設(shè)置一次字體大小，如下：

?

注意：比如要設(shè)置series里面的label里面的normal的fontSize時(shí)，要把上級也寫上，否則無效。

echarts圖表如何根據(jù)數(shù)據(jù)大小實(shí)時(shí)刷新呢？

如上邊的echarts字體隨屏幕大小自適應(yīng)的代碼舉例，我在最上邊定義了變量color，然后在從獲取到的后臺的數(shù)據(jù)切割進(jìn)行計(jì)算，不同階段的值圖表顯示不同顏色，最后設(shè)置圖表刷新時(shí)間間隔即可。

設(shè)置時(shí)間間隔，20000為20秒ajax請求一次后臺數(shù)據(jù)。?

?

以上就是近期遇到的問題總結(jié)，如大佬有更好的方法或者我寫的有問題，還請大佬不吝賜教。

總結(jié)

以上是生活随笔為你收集整理的HTML设置字体大小自适应屏幕与echarts图表颜色根据数据大小实时刷新图表颜色的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。