echarts中的字体，自适应无法生效

上一篇文章我写了大屏字体自适应的方法，但是echarts中的字体，自适应无法生效，所以，更新一种echarts字体自适应的方法。
在需要设置自适应的echarts页面的vue文件中，定义 px转换rem方法：

   /*** px转换rem*/fontSize(res) {// eslint-disable-next-line no-unused-varslet docEl = document.documentElement,clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;if (!clientWidth) return;let fontSize = 20 * (clientWidth / 1920);return res * fontSize;},

在echarts配置中直接调用方法，即可，调用方式this.fontSize(0.7),参数为rem单位的数值：

      label: {normal: {show: false, //关闭省份名展示fontSize: this.fontSize(0.7),color: "#fff",},emphasis: {show: false, //关闭省份名展示fontSize: this.fontSize(0.7),color: "#fff",},},

echarts中的字体，自适应无法生效相关推荐

Echarts中的高度自适应
移动端Echarts高度自适应最近做一个h5页面,需要嵌入app进行使用:用到echarts绘制图像,同时页面底部有操作按钮对图像进行控制.产品希望所有内容在一个页面内完整显示,而不需要滑动.. 根 ...
vue2项目中实现字体自适应（使用px2rem插件将px转rem）
1.安装px2rem插件 npm add postcss-px2rem 2.配置 (1)在src下的utils目录中新建px2rem.js文件(没有utils就新建一个) px2rem.js // 基 ...
在Vue中使用flex布局 echarts多图标不能自适应缩放问题
前言:最近有个项目需要用到echarts绘制多个图表,需求是要支持大屏展示,还有需要支持不同比例的缩放和任意手动缩放.因此,深入学习了echarts和flex布局.虽然遇到很多问题,但都一一解决了收获 ...
Android中，字体大小自适应不同分辨率，以及注意事项
今天有人问我, Android系统不同分辨率,不同大小的手机,字体大小怎么去适应呢?其实字体的适应和图片的适应是一个道理的. 一. 原理如下: 假设需要适应320x240,480x320分辨率.在re ...
vue项目实现大屏PC端字体自适应
vue项目实现大屏PC端字体自适应我们字体自适应选择使用rem作为单位,通过监听窗口大小的变化,更新1rem的对应的px数来实现字体自适应. 注意该方法,我们需要在APP.vue文件中实现, 首先A ...
Vue进阶（幺柒零）：前端用户体验提升（四）应用 rem/em 实现字体自适应
文章目录一.前言二.em 继承的例子三.实际应用 3.1 使用 em 单位 3.2 通常不使用 em 单位控制字体大小四.使用 rem 单位五.小贴士 5.1 始终使用 rem 单位做媒体查 ...
【Echarts】ECharts中常用的标签
详细的标签详解 ECharts中常用的标签 ECharts中常用的标签 title标签 legend tooltip xAxis和yAxis 不同种类图的区别 ECharts中常用的标签 title标 ...
Echarts中引入中国地图
摘要:最近公司要求开发大屏大数据展示界面,其中有个需求是迁徙图,以下是自己的相关总结,如有些的不好的地方请大家多多指教,我会虚心学习并修改不足的地方. 思考:1.迁徙图实现的第一步是引入中国地图,那如 ...
小例子：在 ECharts 中实现日历图
在 ECharts 发布的 3.5 版本中,新增了日历坐标系,用于在日历中绘制图表.如何快速写出一个日历图呢? 通过以下三个步骤即可实现上述效果: 第一步:引入js文件下载的最新完整版本 echa ...

echarts中的字体，自适应无法生效

echarts中的字体，自适应无法生效

echarts中的字体，自适应无法生效相关推荐

最新文章

热门文章