echarts大屏字体自适应

用echarts做大屏可视化的时候会遇到不是用电脑投屏而是直接在大屏打开的情况，这时候大屏幕下固定的px为单位的字体就会显得很小。有一种解决方法就是采用rem为单位，根据屏幕的宽度调整html的font-size.

获取屏幕宽度并计算比例

function fontSize(res){
    let docEl = document.documentElement,
        clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
    if (!clientWidth) return;
    let fontSize = 100 * (clientWidth / 1920);
    return res*fontSize;

}

在需要设置字体的地方可以这样写，
如在1920屏宽下字体设置为12px,就可以传入0.12给fontSize fontSize(0.12)

tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            textStyle:{
                fontSize: fontSize(0.12),
            }
        },

echartsInstance.resize()时，这些设置的字体并不会自动改变，需要echartsInstance.setOption重新设置大小

  function initChart() {
        const _title = {
          fontSize: fontSize(0.18)
        }
        const _legend = {
          itemWidth: fontSize(0.1),
          itemHeight: fontSize(0.05)
        }
        const _labelLine = {
          length: fontSize(0.05),
          length2: fontSize(0.05)
        }
        const _label = {
          fontSize: fontSize(0.12)
        }
        if (chart.instance) {
          const updataOption = {
            title: {
              textStyle: {
                ..._title
              }
            },
            legend: {
              ..._legend
            },
            series: [
              {
                labelLine: {
                  normal: {
                    ..._labelLine
                  }
                },
                label: {
                  ..._label
                },
                data: props.data
              }
            ]
          }
          chart.instance.setOption(updataOption)
          return
        }
        const _dom = document.getElementById(props.domId)
        if (!_dom) return
        chart.instance = echarts.init(_dom)
        const option = {
          tooltip: {},
          title: {
            text: 112,
            textStyle: {
              ..._title
            },
            // subtext:112,
            top: 'center',
            left: 'center'
          },
          grid: {
            left: '10%',
            right: '10%',
            bottom: '3%',
            containLabel: true
          },
          legend: {
            show: false,
            type: 'scroll',
            ..._legend
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['50%', '50%'],
              labelLine: {
                normal: {
                  show: true,
                  ..._labelLine
                },
                emphasis: {
                  show: false
                }
              },
              label: {
                show: true,
                formatter(param) {
                  return param.name + ` (${param.value})`
                },
                ..._label
              },
              itemStyle: {
                // borderRadius: 8
              },
              data: props.data
            }
          ]
        }
        chart.instance.setOption(option)
        window.addEventListener(
          'resize',
          debouncing(() => {
            chart.instance && (chart.instance.resize(), initChart())
          }, 1000)
        )
      }