vue 动态适配宽高 echarts适配自适应字体字号

vue 动态适配宽高 echarts适配自适应字体字号

工具autoFontSize.js

export function autoFontSize(res) {
    let clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
    if (!clientWidth) return;
    // 此处的3840 为设计稿的宽度，记得修改！
    let fontSize = clientWidth / 3840;
    return res * fontSize;
},

项目中使用

• main.js中全局使用

import { autoFontSize } from "@/utils/autoFontSize.js";
Vue.prototype.$autoFontSize = autoFontSize;

• echarts中使用

yAxis: [
    {
        type: "value",
        nameTextStyle: {
            fontSize: this.$autoFontSize(24),
        },
        axisLabel: {
            textStyle: {
                color: "#ffffff",
                fontSize: this.$autoFontSize(28),
            },
        },
    },
],

• el-table中使用

<el-table-column type="index" label="序号" :width="this.$autoFontSize(140)"></el-table-column>