<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.font18{
font-size:.28rem;
width:2rem;
border:1px solid red;
}
.font12{
font-size:.12rem;
width:1rem;
border:1px solid blue;
}
</style>
<body>
<p class="font18">18rem</p>
<p class="font12">12rem</p>
<div id="mycharts" style="width:5rem;height:5rem"></div>
<script src="jquery-1.11.0.min.js"></script>
<script src="echarts.min.js"></script>
<script>
$(function(){
setRem();
mycharts();

});
function setRem(){
def = 100/1920;// 表示1920的设计图,使用100PX的默认值
windowWidth = window.innerWidth;// 当前窗口的宽度
rem = windowWidth * def;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
$('html').css('font-size', rem + "px");
}
$(window).resize(function(){
setRem();
mycharts();
});
function mycharts(){
var watercharts = echarts.init(document.getElementById('mycharts'));
var font24=rem*0.24;
option = {
backgroundColor: "#ffffff",
color: ["#37A2DA", "#FF9F7F"],
tooltip: {},
xAxis: {
show: false
},
yAxis: {
show: false
},
legend: {
data: ['预算', '开销'],
textStyle:{
fontSize:font24
},

},
radar: {
// shape: 'circle',
indicator: [{
name: '食品',
max: 500
},
{
name: '玩具',
max: 500
},
{
name: '服饰',
max: 500
},
{
name: '绘本',
max: 500
},
{
name: '医疗',
max: 500
},
{
name: '门票',
max: 500
}
]
},
series: [{
name: '预算 vs 开销',
type: 'radar',
data: [{
value: [430, 340, 500, 300, 490, 400],
// name: '预算'
},
{
value: [300, 430, 150, 300, 420, 250],
// name: '开销'
}
]
}, {
type: 'line',
name: '预算',
data: [],
itemStyle: {
normal: {
color: '#37A2DA'
}
}
}, {
type: 'line',
data: [],
name: '开销',
itemStyle: {
normal: {
color: '#FF9F7F'
}
}
}]
};
watercharts.setOption(option, true);
window.addEventListener("resize", function() {
watercharts.resize();
var font24=rem*0.24;
})
};
</script>

</body>
</html>

pc端字体大小计算以及echart中字体大小计算的更多相关文章

  1. Eclipse设置：背景与字体大小和xml文件中字体大小调整

    Eclipse中代码编辑背景颜色修改:代码编辑界面默认颜色为白色.对于长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以改变workspace的背景色,可以使眼睛舒服一些.设置方法如下:1.打开wi ...

  2. Eclipse背景与字体大小和xml文件中字体大小设置

    1.打开window / Preference,弹出Preference面板  2.展开General标签,选中Editors选项,展开.  3.选中 Text Editors,右边出现 TestEd ...

  3. Eclipse中设置背景颜色与字体大小和xml文件中字体大小调整

    Eclipse中代码编辑背景颜色修改: 代码编辑界面默认颜色为白色.对于长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以改变workspace的背景色,可以使眼睛舒服一些.设置方法如下: 1.打开 ...

  4. Eclipse设置：背景与字体大小、xml文件中字体大小调整和自动提示 SVN插件安装

    Eclipse中代码编辑背景颜色修改: 代码编辑界面默认颜色为白色.对于长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以改变workspace的背景色,可以使眼睛舒服一些.设置方法如下: 1.打开 ...

  5. MyEclipse背景与字体大小和xml文件中字体大小调整

    1.打开window / Preference,弹出Preference面板 2.展开General标签,选中Editors选项,展开. 3.选中 Text Editors,右边出现TestEdito ...

  6. （备忘）Eclipse设置：背景与字体大小和xml文件中字体大小调整

    Eclipse中代码编辑背景颜色修改: 1.打开window / Preference,弹出Preference面板  2.展开General标签,选中Editors选项,展开.  3.选中 Text ...

  7. React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了

    原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...

  8. 适配方案（二）之PC端适配

    PC端 特点 PC端的屏幕具备以下特点: 屏幕大小一般是大于 13.3英寸 用户会经常拖拉浏览器的大小 原因 正是因为 PC端上的浏览器大小会经常被改变,而且改变的范围还很大,用户会全屏浏览器,用户也 ...

  9. C++游戏（大型PC端枪战游戏）服务器架构

    实习期间深入参与到某大型pc端枪战游戏的后端开发中,此游戏由著名游戏工作室编写,代码可读性极高,自由时间对游戏后台代码进行了深入研究,在满足自身工作需要的同时对游戏后台的架构也有了理解,记录在此,以便 ...

随机推荐

  1. java 运算符的了解和运算符的优先级

    Java 语言支持如下运算符: 算术运算符: +,-,*,/,%,++,-- 赋值运算符 = 扩展赋值运算符:+=,-=,*=,/= 关系运算符: >,<,>=,<=,==,! ...

  2. 再见，Python！你好，Go语言

    Go 语言诞生于谷歌,由计算机领域的三位宗师级大牛 Rob Pike.Ken Thompson 和 Robert Griesemer 写成.由于出身名门,Go 在诞生之初就吸引了大批开发者的关注.诞生 ...

  3. 计算机基础 & python基础

    五大组成部分 控制器 运算器(数学运算+逻辑运算) 存储器(存取数据) 输入设备(键盘.鼠标等) 输出设备(显示器.打印机等) CPU CPU=运算器+控制器 CPU的分类: 精简指令集(RISC): ...

  4. javascript 路径读取

    //获取当前文件全路径 <script language="javascript"> alert(window.location.href); alert(window ...

  5. ORACLE 根据 sql_id 查询绑定变量的传入值

    查询当前查询: select b.NAME,b.POSITION,b.DATATYPE_STRING,b.VALUE_STRING,b.LAST_CAPTUREDfrom v$sql_bind_cap ...

  6. mysql 查询近7天数据，缺失补0

    相信很多人的项目都有这种需求,就是查询近7天的记录,但是这7天总有那么几天是没数据的,所以缺失的只能补 0 下面的代码不知道能不能看懂,我简单的说一下思路 1)先查询红色字体的近7天,再转换成日期 2 ...

  7. Android的BroadcastReceiver组件

    BroadcastReceiver的作用: BroadcastReceiver,是和Intent有很大关系的Android组件. Android中的 Intent 可以用来: 1. 在应用程序内部和应 ...

  8. 13树莓派手动安装Home Assistant

    2017-09-05 00:53:02 https://home-assistant.io/docs/installation/raspberry-pi/ 已经安装步骤安装了带桌面的树莓派系统,在SD ...

  9. PHP文件上传大小限制问题

    一.Thinkphp方面限制  $upload->maxSize   =     31457280 ; //设置附件上传大小 二.七牛方面限制: 'UPLOAD_FILE_QINIU' => ...

  10. 04_ switch 练习 _ 你及格了吗

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...