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

本文介绍: Unc aug h t DOMEx c ept i on: Fai led to execute ‘insertRul e‘ on ‘CSSStyleSh e e t‘: Cannot access StyleSh e et to insertRule

本文仅作为记录

由于页面使用 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 s cale放大缩小配合其它属性解决具体的忘了

采用了另一个方法继续使用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();
};

/**
 * @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();
};