首页 > 其他分享 >echarts大屏适配(rem)+图表的文字适配

echarts大屏适配(rem)+图表的文字适配

时间:2024-09-11 16:52:12浏览次数:11  
标签:适配 clientWidth docEl window fontSize rem 大屏 document

echarts大屏适配以及图标配置项里面的文字适配。

1-创建js文件,并复制下面的函数

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1
 
  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();
 
  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }
 
  setRemUnit()
 
  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })
 
  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

2-引入上面的js文件

<script>
import '../../utils/fontSizeFun';
...
</script>

3-复制下面函数

(作用就是自适应图表配置项的文字大小)

fontSize(res) {
            let clientWidth =
                window.innerWidth ||
                document.documentElement.clientWidth ||
                document.body.clientWidth;
            if (!clientWidth) return;
            // 此处的3840 为设计稿的宽度,记得修改!
            let fontSize = clientWidth / 1920;
            return res * fontSize;
},

4-使用this.fontSize()函数的正确使用

4-1 把我们的图标配置项,封装为一个函数。

 4-1-1 使用this.fontSize()

 5-渲染

waterDataFun() {//排水统计
          
            const myChart = this.$echarts.init(document.getElementById("m_r_charts3")); // 图标初始化
            myChart.setOption(this.waterDataFunData()); // 渲染页面
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                myChart.setOption(this.waterDataFunData());
                myChart.resize();
            });
            this.$on("hook:destroyed", () => {
                window.removeEventListener("resize", function () {
                    myChart.resize();
                });
            });
       },

实现了echarts里响应式,字体响应式

标签:适配,clientWidth,docEl,window,fontSize,rem,大屏,document
From: https://www.cnblogs.com/houxianzhou/p/18408502

相关文章

  • CAD 3dsmax maya等autodesk系列专用卸载修复工具AutoRemove,一键完全彻底卸载删除软件
    AutoRemove是一款功能强大的软件卸载工具,专门设计用于彻底清除Autodesk系列软件,如AutoCAD、3dsMax、Revit、Maya、Inventor、Navisworks、civil3d、sketchbook、Architecture、Electrical、Mechanical、、等,从您的系统中。它通过深度清理注册表项和残留文件,确保卸载过程既彻底......
  • 探索前端可视化大屏:创造令人惊叹的数据可视化体验
    介绍......
  • 中电金信:源启混沌工程平台(V4)与东方通TongwebV7.0完成适配认证
    近日,源启混沌工程平台(V4)与北京东方通科技股份有限公司(以下简称东方通)应用服务器软件东方通TongwebV7.0完成产品兼容互认证,通过在产品功能、性能、兼容性方面的全面严格测试,得出结论:东方通应用服务器软件TongWebV7.0产品与源启混沌工程平台V4产品完全兼容,整体运行稳定高效,为双方......
  • 响应式布局全解析:让你轻松掌握多端适配
    最近,山海鲸可视化的许多组件新增了一个非常实用的功能,叫作“响应式布局”。今天我来为大家介绍一下这个新功能以及它如何提升我们在不同设备上的使用体验。你可能在用手机浏览网页时注意到,有些网站在手机和电脑上的显示方式几乎相同。然而,由于手机和电脑的屏幕尺寸差异,这些网页......
  • 平台开发到落地详解:从食堂采购系统源码到可视化供应链管理数据大屏
    随着数字化转型的加速,越来越多的企业和组织开始重视供应链的智能化与可视化管理。在食堂采购领域,供应链管理的复杂性与日俱增,而传统的手工操作往往效率低下、容易出错。因此,开发食堂采购系统并结合可视化数据大屏的解决方案,成为了许多企业提高运营效率、优化采购流程的关键手段。 ......
  • Axure科技感设计案例教程:从按钮到大屏的全面探索
    AxureRP,作为一款强大的原型设计工具,不仅能够帮助设计师快速构建产品界面,还能通过其丰富的交互功能实现高度逼真的科技感效果。以下是一个简要的教程,介绍如何使用AxureRP设计科技感按钮、图标、统计、图表以及大屏界面。1.科技感按钮设计设计思路:科技感按钮往往强调简洁、......
  • 如何使用Pyecharts创建数据可视化大屏
            在当今数据驱动的时代,数据可视化已经成为帮助决策、传达信息和发现数据模式的关键工具。数据大屏(DataDashboard)是一种直观、高效展示大量数据的方式,广泛应用于商业、医疗、教育等各个领域。本文将带领大家使用Pyecharts,一个基于Python的强大数据可视化库,创建......
  • 获取rem像素转换比例 flag为true返回数字
    //获取rem像素转换比例flag为true返回数字exportfunctiongetRem(px,flag){px=(px||0)+''if(!(px.indexOf('%')!==-1||px.indexOf('rem')!==-1)){px=(Number(px)/40)+'rem'}if(flag){returnN......
  • 适配器模式
    适配器模式是一种结构型设计模式,用于将一个类的接口转换成另一个客户期望的接口。这种模式可以让原本由于接口不兼容而无法在一起工作的类能够协同工作。以下是一个简单的适配器模式的示例代码:usingSystem;//目标接口interfaceITarget{voidRequest();}//适配......
  • Pr官版中国|Adobe Premiere Pro 最佳免费办公软件下载指南
    Pr官版中国|Adobe Premiere Pro 最佳免费办公软件下载指南Pr官版中国|AdobePremierePro最佳免费办公软件下载指南在数字时代,视频制作已经成为一种重要的沟通和表达方式。无论是个人创作者、小型企业还是大型公司,都需要一款强大的视频编辑软件来实现他们的创意。AdobePremiere......