<!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. Windows caffe 跑mnist实例

       一. 装完caffe当然要来跑跑自带的demo,在examples文件夹下. 先来试试用于手写数字识别的mnist,在 examples/mnist/ 下有需要的代码文件,但是没有图像库. mn ...

  2. 爬虫框架 Scrapy

    一 介绍 crapy一个开源和协作的框架,其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的,使用它可以以快速.简单.可扩展的方式从网站中提取所需的数据.但目前Scrapy的用途十分广泛,可用 ...

  3. LQFP（未整理完成）

    注意:文中所提供的链接有可能会失效.不定期维护,如有异常,期待指正,谢谢! LQFP48 7 x 7 mm 图片来源:https://www.st.com/resource/en/datasheet/ ...

  4. 解决git反复输入密码的问题

    打开git命令面板 cd到项目根目录 $ git config --global credential.helper store然后只输入一次密码,后面就不需要了

  5. 利用MySQL游标进行计算排名

    SELECT a.id, a.nick_name, a.member_account, a.integral, () AS tRank #计算行号 FROM tzqc_raw_data AS a, ( ...

  6. Scala模式匹配| 隐式转换

    1. 模式匹配 Scala中的模式匹配类似于Java中的switch语法,但是更加强大.模式匹配语法中,采用match关键字声明,每个分支采用case关键字进行声明,当需要匹配时,会从第一个case分 ...

  7. JS对象与原型链

    每个函数都存在一个prototype的属性,然后这个属性值为一个对象,我们称之为原型对象 每个对象都存在着一个隐藏的属性"__proto__" 这个属性引用了创建这个对象的函数的p ...

  8. S0.0 计算机如何看东西

    标签(空格分隔):数字图像处理 opencv 当我们用特定软件打开一张图片或者更改某些位图的格式为txt时,就会发现图像的本质不过就是一堆数据罢了. 采样 我们可以用相机采样到一幅二维图像,图像的分辨 ...

  9. BSUIR Open Finals

    A. Game with chocolates 因为差值必须是$P$的幂,故首先可以$O(\log n)$枚举出先手第一步所有取法,判断之后的游戏是否先手必败. 对于判断,首先特判非法的情况,并假设$ ...

  10. XVII Open Cup named after E.V. Pankratiev. Grand Prix of America (NAIPC-2017)

    A. Pieces of Parentheses 将括号串排序,先处理会使左括号数增加的串,这里面先处理减少的值少的串:再处理会使左括号数减少的串,这里面先处理差值较大的串.确定顺序之后就可以DP了. ...