echarts [Bug] It seems that it is not possible to adapt to both mobile and PC devices normally, and the normal Rem unit is too small on the PC, resulting in a significant difference in font size between the mobile and PC devices.

Version

5.5.0

Link to Minimal Reproduction

https://codepen.io/Ovilia/pen/dyYWXWM

Steps to Reproduce

<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=bump-chart&code=MYewdgzgLgBGCGBbAphGBeGBtAUDGA5APIBO8YA5sgQDR6EAqIi8UIt9BAggA48A21OvgIBleAGty8DiIBC0hLMIBJAO7wIACwCWysQj4BPGADEd2_QBlkicPoAKmqDJwBdANw5QkWEeTwJGiYWAQATAAMEQCMtISREWFx4VEAzMkJACwZUQCsOREAbASe3uDQMNoArgBmNYIYMAAUgWRGAJQYAHwwAN70grDAVSQkyGBQKmAAJsgAHo2t8EYAdIKUUFpe-IMwZDPMU7MLmBHbMGq6DU3Do-OTM_MwPRGd_fj4-9OHjycwALKsLQreogEAkJqAzYrL7MJqdABUMFuYwmR3m7XO-BR93RcwAtPisdglkYsDi0b83DQYKSsLDEHi3G5GrgPh86QymcJ2bTRstySNUQ9jm56PhSvgAL70MZQEZgPltLxSrw-CpUMDIMhQZAAJXIEh0lAAIqx4I14d0-vR1bAWDxGlq1AD4Dx4ec7TBZjV4FV-FADWAjZRGlx-asaiQ4b0YOsKJsAFxwJCoNbjBNaGBSmlNAD6NJ0nXQPR0MAA1DBopj6DVwc0vXmYCAajB_IEIG9xcjyrBqnVBOG2o1-_VkE0fX6A0GQxQa-yECgICDwQBReDALRNJqL5CF4s9d68h0rCDIKA71O5k9UC-7zoAHwf2Dc7RWPmArCao8HEawOlfecPilICZU-c8FRgB0VTVXsYE1bVWGQURtR0VArAsWBMCtEsbWxOCzxINCIAwioQklHtfD2Q1jQoQFHUwBCdX1GjTXND1ZVYui3RXEh103bdpnNGl72tI98KowjiMacSPl3Hl2QgIxEAAIxAfhRB0AAvZBk2iVIFI-KAjB4XTCH4Y0hG7fAIDsEAkxgKASCqPdrJgWweC0TQLGTWT2TrYYIGTAgpNQAg3JzNzxmmKx4BU5B-F8tybK0EA1GTJyXMM_zwRYKBdRIYLengKVlF5b1MPIYAzMiCLsrjSzRGMwQkvK_A1B0aYHLCOq3KElxu1VbtQpIzCVh4KptG_VDUFAoC5UgkbSKgGCcBAHgoB0cAZPoTaoBavCjPmKBgrkKpEEdABhLySFgJoZ1o9pwulHk2HUzaeFaoyiIoKhCsIHRdUQZ7sx5CgiOmL6dmQGoTpgVIIkMn6tDh6JokR7s1Py5hkwRwyfBcY1YvixLHOc5B6Ei_A3v4NS5ihmAagCeUxgZmz4AAN2QLgIBUFgqF8sDgMpnk5i4OYfMO6mTLMghP11ChwSMMrKgEQGMK1NnKlS9KyZcwbDPgCWSLihKtZYEgKGNXGMfKusJk0nTkwAImiMZEGdg3MZAKoZkCIwAHE3WTX1-DPQz-vgZN2yCEX6CMcXJdk4zTOCjn4H4FyVaNixibNqWPgtq2wBt-r7agR2zOdiIVgATlSd3nbL3LWAK4KAGJenTzPkFKr32WNLmgjMzLXIHiZtW7vTDMQa2qxno3k13Zd402OObJmoL4PGRDdRQoj0Mw-EcFVIA
	⚠ 请注意，该图表不是 Apache ECharts 官方示例，而是由用户代码生成的。请注意鉴别其内容。
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/extension/dataTool.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts-gl/2/files/dist/echarts-gl.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts-stat/latest/files/dist/ecStat.min.js"></script>


  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/4.9.0/files/map/js/china.js"></script>
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/4.9.0/files/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/extension/bmap.min.js"></script>
  -->
  <script type="text/javascript" src="./flexible.js"></script>
  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    
    var option;

    const names = [
  'Orange',
  'Tomato',
  'Apple',
  'Sakana',
  'Banana',
  'Iwashi',
  'Snappy Fish',
  'Lemon',
  'Pasta'
];
const years = ['2001', '2002', '2003', '2004', '2005', '2006'];
const shuffle = (array) => {
  let currentIndex = array.length;
  let randomIndex = 0;
  while (currentIndex > 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;
    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex],
      array[currentIndex]
    ];
  }
  return array;
};
const generateRankingData = () => {
  const map = new Map();
  const defaultRanking = Array.from({ length: names.length }, (_, i) => i + 1);
  for (const _ of years) {
    const shuffleArray = shuffle(defaultRanking);
    names.forEach((name, i) => {
      map.set(name, (map.get(name) || []).concat(shuffleArray[i]));
    });
  }
  return map;
};
const generateSeriesList = () => {
  const seriesList = [];
  const rankingMap = generateRankingData();
  rankingMap.forEach((data, name) => {
    const series = {
      name,
      symbolSize: 13,
      type: 'line',
      smooth: true,
      emphasis: {
        focus: 'series'
      },
      endLabel: {
        show: true,
        formatter: '{a}',
        distance: 20
      },
      lineStyle: {
        width: 2
      },
      data
    };
    seriesList.push(series);
  });
  return seriesList;
};
option = {
  title: {
    text: 'Bump Chart (Ranking)'
  },
  tooltip: {
    trigger: 'item'
  },
  grid: {
    left: 30,
    right: 110,
    bottom: 30,
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    splitLine: {
      show: true
    },
    axisLabel: {
      margin: 30,
      fontSize: "1rem"
    },
    boundaryGap: false,
    data: years
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      margin: 30,
      fontSize: "0.93rem",
      formatter: '#{value}'
    },
    inverse: true,
    interval: 1,
    min: 1,
    max: names.length
  },
  series: generateSeriesList()
};

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
  <span style="font-size:0.93rem">这是0.93rem</style>   <span style="font-size:0.15rem">这是0.15rem</style>
</body>
</html>

My project is a Vue project, and the 0.1 units I wrote to death are the normal size on the phone, but it appears very small on the computer. In addition, the 0.1 rem I wrote outside is very small on the Edge browser, which is also very small on the computer and phone. However, Google Chrome cannot shrink it, so it gave me an illusion. Anyway, it turns out that echart does not support rem

Current Behavior

not support unit rem

Expected Behavior

support unit rem

Environment

- OS:Window/Phone
- Browser:
- Framework:

Any additional comments?

use remToPx is ok


function remToPx(rem) {
    var fontSize = document.documentElement.style.fontSize;
    return Math.floor(rem * fontSize.replace('px', ''));
}

Feb 20 '24 03:02 lozn00

axisLabel.fontSize says fontSize must be a number, but it seems strings (like "0.53rem") are supported too - Demo Code. 📌 please close issue if problem solved.

Feb 20 '24 17:02 helgasoft

function remToPx(rem) { var fontSize = document.documentElement.style.fontSize; return rem * Number.parseFloat(fontSize); }

建议将将rem单位转成px来使用

Feb 24 '24 06:02 soeasyjx