解决页面使用zoom导致echarts位置偏移问题

本文仅作为记录

由于页面使用zoom来适配pc页面

/**
 * @description: 等比例放大
 * @return {*}
 */
function bodyScale() {
 

    var devicewidth = document.documentElement.clientWidth;
    var scale = devicewidth / 1920; // 分母——设计稿的尺寸宽度
    // document.body.style.zoom = scale-0.07113;
    //页面尺寸放大
    document.body.style.zoom = scale;

}

 



window.onload = window.onresize = function () {
    bodyScale();
};

但是会导致页面上echarts位置偏移

当时找到两个方法是弃用zoom改用transform scale放大缩小配合其它属性解决具体的忘了

采用了另一个方法继续使用zoom给echarts的canvas加上其它属性来解决这个问题

刚开始使用的是这个

/**
 * @description: 等比例放大
 * @return {*}
 */
function bodyScale() {

    

    var devicewidth = document.documentElement.clientWidth;
    var scale = devicewidth / 1920; // 分母——设计稿的尺寸宽度
    // document.body.style.zoom = scale-0.07113;
    //页面尺寸放大
    document.body.style.zoom = scale;
    //解决zoom放大缩小导致echarts位置偏移问题
     document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {zoom: ' + 1 / scale + '}');
     document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {transform: scale(' + scale + ')}');
     document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {transform-origin: 0 0}')
    

}
 



window.onload = window.onresize = function () {
    bodyScale();
};

刚开始还有效果但是后面开始报错

 所以查了一下大概就是chrome浏览器出于安全考虑对这个方法做了一些限制所以我又查了一下使用上去

/**
 * @description: 等比例放大
 * @return {*}
 */
function bodyScale() {



    var devicewidth = document.documentElement.clientWidth;
    var scale = devicewidth / 1920; // 分母——设计稿的尺寸宽度
    // document.body.style.zoom = scale-0.07113;
    //页面尺寸放大
    document.body.style.zoom = scale;
    //解决zoom放大缩小导致echarts位置偏移问题
    let strScale = `scale(${scale})`
    var obj = {
        zoom: 1 / scale,
        transform: strScale,
        transformOrigin: "0 0",

    }

    insertCss("canvas", obj);


}

function insertCss(select, styles) {
    console.log(styles);
    if (document.styleSheets.length === 0) { //如果没有style标签,则创建一个style标签
        var style = document.createElement("style");
        document.head.appendChild(style);
    }
    var styleSheet = document.styleSheets[document.styleSheets.length - 1]; //如果有style 标签.则插入到最后一个style标签中
    var str = select + " {"; //插入的内容必须是字符串,所以得把obj转化为字符串
    for (var prop in styles) {
        str += prop.replace(/([A-Z])/g, function (item) { //使用正则把大写字母替换成 '-小写字母'
            return "-" + item.toLowerCase();
        }) + ":" + styles[prop] + ";"
    }
    str += "}";
    styleSheet.insertRule(str, styleSheet.cssRules.length); //插入样式到最后一个style标签中的最后面
}



window.onload = window.onresize = function () {
    bodyScale();
};

这样就避免了Uncaught DOMException: Failed to execute ‘insertRule’ on ‘CSSStyleSheet’: Cannot access StyleSheet to insertRule报错问题

代码007普通

打赏 收藏 海报 链接