echarts 等比伸缩

问题

em、rem、vw 这些 CSS 单位真心好用,然而使用 echarts 的自适应却比较原始,字体大小是不会伸缩的,只会伸缩图形,所以在小的分辨率下经常会走形:

HTML:

1920 分辨率下的效果:


echarts 等比伸缩_第1张图片
image.png

使用 chart.resize() 后1280 分辨率下的效果:

echarts 等比伸缩_第2张图片
image.png

解决

找了半天的配置项方法,也没有想到如何让字体也等比伸缩。
于是只好自己另辟蹊径。

HTML:

JS:

function chartResize() {
    var times = document.documentElement.offsetWidth / 1920 * 0.5;
    $("#chart").css("transform", "scale(" + times + ")");
}
chartResize();
window["onresize"] = function() { chartResize()};

1280 下的效果:


echarts 等比伸缩_第3张图片
image.png

简直完美!

你可能感兴趣的:(echarts 等比伸缩)