解决页面使用zoom导致echarts位置偏移问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了解决页面使用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();
};

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

echarts zoom,echarts,前端,javascript

所以查了一下大概就是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报错问题文章来源地址https://www.toymoban.com/news/detail-755920.html

到了这里，关于解决页面使用zoom导致echarts位置偏移问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！