本文僅作為記錄

由于頁面使用zoom來適配pc頁面

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

    var devicewidth = document.documentElement.clientWidth;
    var scale = devicewidth / 1920; // 分母——設(shè)計稿的尺寸寬度
    // document.body.style.zoom = scale-0.07113;
    //頁面尺寸放大
    document.body.style.zoom = scale;

}

 



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

但是會導(dǎo)致頁面上echarts位置偏移

當(dāng)時找到兩個方法是棄用zoom改用transform scale放大縮小配合其它屬性解決具體的忘了

采用了另一個方法繼續(xù)使用zoom給echarts的canvas加上其它屬性來解決這個問題

剛開始使用的是這個

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

    

    var devicewidth = document.documentElement.clientWidth;
    var scale = devicewidth / 1920; // 分母——設(shè)計稿的尺寸寬度
    // document.body.style.zoom = scale-0.07113;
    //頁面尺寸放大
    document.body.style.zoom = scale;
    //解決zoom放大縮小導(dǎo)致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; // 分母——設(shè)計稿的尺寸寬度
    // document.body.style.zoom = scale-0.07113;
    //頁面尺寸放大
    document.body.style.zoom = scale;
    //解決zoom放大縮小導(dǎo)致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標(biāo)簽,則創(chuàng)建一個style標(biāo)簽
        var style = document.createElement("style");
        document.head.appendChild(style);
    }
    var styleSheet = document.styleSheets[document.styleSheets.length - 1]; //如果有style 標(biāo)簽.則插入到最后一個style標(biāo)簽中
    var str = select + " {"; //插入的內(nèi)容必須是字符串,所以得把obj轉(zhuǎn)化為字符串
    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標(biāo)簽中的最后面
}



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

這樣就避免了Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Cannot access StyleSheet to insertRule報錯問題文章來源地址http://www.zghlxwxcb.cn/news/detail-755920.html

到了這里，關(guān)于解決頁面使用zoom導(dǎo)致echarts位置偏移問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！