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

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里响应式，字体响应式