echarts字体大小自适应
问题描述
做大屏时可能会遇到这种情况,图表可以根据容器(div
)的大小自动调整,因为你可以在相关配置项中设置为百分比,但是字体大小就不一样了,你只能传个写死的数字。这里记录一下怎么做到文字自适应。
解决方案
在methods
里面搞一个方法,举个例子,比如美工给你的设计稿是1920*1080的,字体大小你量的是30px,那么网页加载时,获得屏幕的宽度,然后用屏幕宽度除以1920,得到比例,用30px乘以比例,就是你想要的字体大小了。比如在960px宽度的屏幕上,比例就是960 / 1920 = 0.5,
得到的字体大小就是15px。
// 根据不同的屏幕宽度换算字体大小transformFontSize(fontsize) {// 获取屏幕宽度const width = window.screen.widthconst ratio = width / 1920// 取下整return parseInt(fontsize * ratio)}
echarts
配置项使用示例:
label: {normal: {formatter: this.waterData[2] + '',textStyle: {fontSize: this.transformFontSize(32),color: '#dbfbfc'},position: ['50%', '30%']}}
实际项目使用示例
实际项目我一般使用混入,因为图表比较多,方法具有通用性。贴混入代码
/* eslint-disable */
export default {data() {return {// echarts的实例myChart: null}},mounted() {// 监听屏幕大小变化window.addEventListener('resize', this.screenAdatper)},methods: {screenAdatper() {this.myChart && this.myChart.resize()},// 根据不同的屏幕宽度换算字体大小transformFontSize(fontsize) {const width = window.screen.widthconst ratio = width / 1920return parseInt(fontsize * ratio)}},beforeDestoryed() {// 组件销毁前移除监听,防止内存泄露window.removeEventListener('resize')}
}
/* eslint-disable */
echarts字体大小自适应相关推荐
- echarts-折线图-echarts字体大小自适应
<template><div><div><!--为echarts准备一个具备大小的容器dom--><div id="org_ech_li ...
- HTML设置字体大小自适应屏幕与echarts图表颜色根据数据大小实时刷新图表颜色
设置html文字大小根据页面大小自适应,在使用rem之前是使用的px和百分比,后来发现页面缩放或在小屏幕的电脑显示不尽人意,后改用rem,写法如:font-size: .21rem;或font-siz ...
- 字体大小自适应屏幕分辨率 CSS解决方案
字体大小自适应屏幕分辨率 CSS解决方案 参考文章: (1)字体大小自适应屏幕分辨率 CSS解决方案 (2)https://www.cnblogs.com/love0618/p/4020752.htm ...
- 使用rem,使字体大小自适应屏幕
rem是CSS3新增的一个相对单位(root em,根em).这个单位与em区别在于使用rem为元素设 定字体大小时,仍然是相对大小,但相对的只是HTML根元素.这个单位可谓集相对大小和绝对大小的优点 ...
- 使用阿里云的oss对图片加水印并且字体大小自适应(阿里云oss暂不支持字体大小自适应)
使用阿里云的oss对图片加水印并且字体大小自适应(阿里云oss暂不支持字体大小自适应) 背景: 首先阿里云oss云对象存储是不能做到字体大小自适应的,因为在开发中我们的图片上传的尺寸是做不到固定大小宽 ...
- Echarts图表大小自适应浏览器窗口大小
1.mixins文件:resize.js // 当调整浏览器窗口大小时,发生 resize 事件:监听resize,实现Echarts图表大小自适应浏览器窗口大小 export default {da ...
- pyqt5标签中的字设置不同字体_PyQt5 实现字体大小自适应分辨率的方法
最近遇到一个现象,将做好的软件放在更高分辨率的电脑上运行,会导致字体显示不完全,出现被控件遮挡的情况.具体原因可以上网查询,在这里将记录下解决方法. 这里记录两种方法,如果使用的Qt版本在5.6.0之 ...
- js设置字体大小自适应屏幕分辨率
js可以通过 screen.width获取屏幕分辨率的大小. var conf_div = document.createElement('div'); //创建div conf_div.style. ...
- html 字号自适应,html自适应网页里字体大小自适应屏幕的方法
html自适应网页里字体大小自适应屏幕的方法 发布时间:2020-11-20 16:40:22 来源:亿速云 阅读:216 作者:小新 这篇文章主要介绍了html自适应网页里字体大小自适应屏幕的方法, ...
- html5纯css字体大小自适应设置
css 字体大小自适应样式设置篇 字体可以设置大小使用css font-size来实现,有时需要对字体大小根据浏览器分辨率来判断后自适应大小. 在CSS 2.0中字体大小自适应是难实现的,一般使用JS ...
最新文章
- 蚂蚁上市后,马云不是最大赢家,竟是她!
- mysql 田_Mysql知识总结
- python 面向对象编程 之 上下文管理协议
- 23种设计模式C++源码与UML实现--桥接模式
- 【thymeleaf】data-*
- pymysql建表_Python数据库操作,针对pymysql 和 MYSQL数据库
- 微信对账单 java_微信支付对账,你是如何处理的?
- Deep Learning基础--各个损失函数的总结与比较
- Java 算法 找素数
- 众MVP对本书的赞誉
- 轻量化html编辑器,web端实现富文本编辑器
- python匹配部分字符串_python – 即使只是部分匹配字符串,如何匹配字符串?
- 熊猫烧香手工清除实验
- Saved Blogs
- 企业网站建设为什么要定制开发?
- T229473 D. 背单词的小智(二分)
- 用php的定界符EOT需要注意的地方
- 【yum是什么?】centos7基于阿里云,配置网络yum
- 【Python3.6爬虫学习记录】(十三)在阿里云服务器上运行爬虫
- 深入浅出学算法008-韩信点兵
热门文章
- linux如何更改主题颜色,修改Ubuntu主题的颜色
- excel如何把多张表合并成一个表_如何快速把多个excel表合并成一个excel表?
- 台式机鼠标失灵打开计算机,台式电脑鼠标没反应是怎么回事
- python 相似形态 股票_比对相似k线软件 python比对股市k线相似性
- Win10喇叭图标出现红叉提示“未安装任何音频输出设备“
- 时空数据生成对抗网络研究综述(上)
- 联机带AI版3D桌球游戏源码
- 听说这是互联网时代100本必读书单,你看过几本?
- 如何为macOS High Sierra创建可启动的USB安装程序
- 高速电路中菊花链、fly-by与T点拓扑