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

Question

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

Answer 1

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

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

但是在引入第三方插件的时候，需要对样式做一些修改才行(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()
                }
            }
        }

楼主可以看看

Answer 2

echarts里面的字体是数字，设百分百 ，字符串是没用的，
有个 办法 是 你在 不同的 分辨率下 动态的 去设置fontSize；

Answer 3

请问你有没有设置『 <meta name="viewport" content="width=device-width, initial-scale=1" />』

Answer 4

echartsBox.setOption(option);
window.onresize = function (){

 echartsBox.resize();

}
echartsBox为放echarts的容器。
这么写之后当改变窗口的时候echarts就会自适应了。
想让字体也改变、就把字体写成百分比。
textStyle:{

fontSize:'150%',
color:'#fff'

}
像这样。自己也会根据分辨率的改变而改变了。