echarts 字体自适应的方法(使用rem) |
您所在的位置：网站首页 › echarts字符云调整字符大小 › echarts 字体自适应的方法(使用rem) |
|
采用rem为单位，根据屏幕的宽度调整html的font-size。 获取屏幕宽度并计算比例： function fontSize(res){ const clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth; if (!clientWidth) return; let fontSize = clientWidth / 1920; return res*fontSize; }在需要设置字体的地方可以这样写， 如在1920屏宽下字体设置为12px，就可以传入12给fontSize tooltip : { trigger: 'axis', textStyle:{ fontSize: fontSize(12), } },当浏览器窗口发生改变的时候，需要重绘图表，才能实现实时改变echarts字体 window.addEventListener('resize',()=>{ this.refreshChart(); }) // vue setFontOption() { this.chart.setOption({ tooltip : { textStyle:{ fontSize: fontSize(12), } } }) }, refreshChart() { if (!this.chart) return; this.chart.resize(); this.setFontOption(); } |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |