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

本文章解决的是：echarts大屏适配以及图标配置项里面的文字适配。非常好用！

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

(git地址)

(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-在vscode商店里面下载

2-1 点击设置

2-2 根据ui给的图来改。例如ui图为1920--->1920/10-->最终就是192。改完记得重启！！！

2-3 样式使用如下图

2-3-1 引入上面的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();
                });
            });
       },