javascript - echarts 在不同的分辨率的移动设备上字体怎么适配呀

问题描述

问 题

echarts 在不同的分辨率的移动设备上字体怎么适配呀？就是在一个分辨率下调式好了，在别的分辨率下整体的字体就会变小显得不适配，怎么才能让字体适配？或者这个fontSize可以获取么？为什么写成百分比的话不管用？急求，请熟悉小伙伴帮帮忙解答一下。

解决方案

我也遇到这个问题，所以来回答下

因为我在手机端用的是淘宝的适配方案 移动端自适应方案

但是在引入第三方插件的时候，需要对样式做一些修改才行(viewport 有收缩比例)

我的笨办法是写一个函数

  var getDpr = function getDpr(){
        var dpr = $('html').attr('data-dpr');
        if (dpr == 1) {
            return 12;
        }else if (dpr == 2) {
            return  24;
        }else {
            return 36;
        }
    };

然后在echarts需要的图表中传入这个全局的函数，比如这样：

        xAxis: {
            show : true,
            type: 'category',
            boundaryGap: false,
            data: ['1月','2月','3月','4月','5月'],
            axisLabel : {
                textStyle : {
                    fontSize : getDpr()
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLabel : {
                textStyle : {
                    fontSize : getDpr()
                }
            }
        }

楼主可以看看

这篇关于javascript - echarts 在不同的分辨率的移动设备上字体怎么适配呀的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！