echarts根据屏幕宽度调整字体大小

最新推荐文章于 2024-05-28 17:05:13 发布

原创最新推荐文章于 2024-05-28 17:05:13 发布 · 1k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#echarts

收录于

前端开发专栏收录该内容

93 篇文章

订阅专栏

本文介绍了如何使用JavaScript计算字体大小以实现图表组件（如Legend）的水平布局，通过屏幕宽度和设计比例调整字体大小，确保在不同设备上保持良好的可读性。

legend: {
          orient: 'horizontal',
          show: true,
          type: 'plain',
          right: '2%',
          top: '1%',
          selectedMode: false,
          itemHeight: 5,
          itemWidth: 5,
          textStyle: {
            // color: '#fff',
            // fontWeight: 600
            // fontSize:9,
            fontSize: this.transformFontSize(14),
          }
        },

transformFontSize(fontsize) {
      debugger
        // 获取屏幕宽度
      // const width = window.screen.width
      const width = document.body.scrollWidth
      const ratio = width / 1920
      console.log('window.screen.width',window.screen.width,window, document.body.scrollWidth);
      // 取下整
      console.log('parseInt(fontsize * ratio)',parseInt(fontsize * ratio));
      return parseInt(fontsize * ratio)
    },