<!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. vue+cordova插件使用，bluetoothSerial.connect()连接失败

    这是GitHub地址https://github.com/don/BluetoothSerial

  2. 【python】实用的logging封装

    #!/usr/bin/python import logging import logging.handlers def set_logger(filename, logmod): log_size ...

  3. python之配置日志的三种方式

    以下3种方式来配置logging: 1)使用Python代码显式的创建loggers, handlers和formatters并分别调用它们的配置函数: 2)创建一个日志配置文件,然后使用fileCo ...

  4. 【Android】PreferenceActivity 详解

    PreferenceActivity是专业的设置界面,只要给它指定一个配置好的xml,它就能自动根据操作更改程序Preference的相应值. 首先要用一个xml文件来配置一个设置界面,也就是我们说的 ...

  5. 企业级中带你ELK如何实时收集分析Mysql慢查询日志

    什么是Mysql慢查询日志? 当SQL语句执行时间超过设定的阈值时,便于记录到指定的日志文件中或者表中,所有记录称之为慢查询日志 为什么要收集Mysql慢查询日志? 数据库在运行期间,可能会存在这很多 ...

  6. Redis新接触

    一.redis简介 redis即Remote Dictionary Server,是一个key—value存储系统. 二.优点 1.redis支持的存储类型较多,如String.List.Hash.s ...

  7. port bridge enable命令导致的环路

    1.故障描述 前几天机房一台连接数据中心与核心交换的交换机宕机(硬件故障),机房有备用的设备,随即更换(配置也是早就配置好了的),但是下午就出现数据中心网络丢包问题,表现为存在mac漂移 2.拓扑 核 ...

  8. LeetCode（21. 合并两个有序链表）

    问题描述 将两个有序链表合并为一个新的有序链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. 示例: 输入:1->2->4, 1->3->4 输出:1->1-& ...

  9. css 文本设置

    常用的应用文本的css样式: (1)color 设置文字和颜色,如:color:red; (2)font-size 设置文字的大小,如:font-size:20px; (3)font-family 设 ...

  10. angularjs 初始化方法执行两次以及url定义错误导致传值错误问题

    1.初始化方法执行两次以上的问题定义一个 route.如下所示:.state('main.channelQryDetail', { url:'/channelDetail/:channelNo/:pa ...