问题
em、rem、vw 这些 CSS 单位真心好用,然而使用 echarts 的自适应却比较原始,字体大小是不会伸缩的,只会伸缩图形,所以在小的分辨率下经常会走形:
HTML:
<div name="chart" id="chart" style="height:12em; width:12em;"></div>
1920 分辨率下的效果:
使用 chart.resize()
后1280 分辨率下的效果:
解决
找了半天的配置项方法,也没有想到如何让字体也等比伸缩。
于是只好自己另辟蹊径。
HTML:
<div style="width:12em; height:12em; overflow:hidden; margin:0 auto;">
<div name="chart" id="chart" style="height:432px; width:432px; transform-origin:left top;"></div>
</div>
JS:
function chartResize() {
var times = document.documentElement.offsetWidth / 1920 * 0.5;
$("#chart").css("transform", "scale(" + times + ")");
}
chartResize();
window["onresize"] = function() { chartResize()};
1280 下的效果:
简直完美!