<!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. django模型层优化(关联对象) 懒加载和预加载 +长链接

    懒加载 存在于外键和多对多关系不检索关联对象的数据调用关联对象会再次查询数据库 问题根源 查看django orm的数据加载,两次. 查询user,查询menu 预加载的方法 预加载单个关联对象--s ...

  2. 【python3接口自动化基础】json总结

    Json知识归纳: Post请求有两种方法传json参数 传json参数(自动转json了)---json=dict 传data参数(需json转换) ---data=json.dumps(dic) ...

  3. springboot配置Druid数据源

    springboot配置druid数据源 Author:SimpleWu springboot整合篇 前言 对于数据访问层,无论是Sql还是NoSql,SpringBoot默认采用整合SpringDa ...

  4. type=file的inpu美化，自定义上传按钮样式

    <div class="div1"> <div class="div2">点击上传</div> <input type ...

  5. ubuntu+github配置使用

    2015年底开始学习Python,接触了git这个东西,会基础的使用,顺便在github上注册了账号 https://github.com/haoxr 今天重新整理一下配置使用的整个流程 1 gith ...

  6. .net 本地日志的添加

    /// <summary> /// 写入日志到文本文件 /// </summary> /// <param name="userName">用户 ...

  7. Oracle做insert或者update时未提交事务导致表锁定解决办法

    //查看被锁定表有几个 select object_name,machine,s.sid,s.serial# from v$locked_object l,dba_objects o ,v$sessi ...

  8. laravel 服务容器

    服务容器,也叫IOC容器,其实包含了依赖注入(DI)和控制反转(IOC)两部分,是laravel的真正核心.其他的各种功能模块比如 Route(路由).Eloquent ORM(数据库 ORM 组件) ...

  9. Git permission denied(public key) 解决方法

    1. 在Linux上: # ssh-keygen       ##一定用 id_rsa.pub # cat /root/.ssh/id_rsa.pub 2. copy 整个文件内容到剪切板 3. 打开 ...

  10. 根据文件大小自动判断单位B,KB,MB,GB

    <php> /** * 文件大小格式化 * @param integer $size 初始文件大小,单位为byte * @return array 格式化后的文件大小和单位数组,单位为by ...