使用flexible.js+rem实现字体自适应

①flexible.js用于根据屏幕尺寸变化动态调整根元素的字体大小：

<code>(function flexible(window, document) {

var docEl = document.documentElement

var dpr = window.devicePixelRatio || 1

// adjust body font size

function setBodyFontSize() {

if (document.body) {

document.body.style.fontSize = (16 * dpr) + 'px'

}

else {

document.addEventListener('DOMContentLoaded', setBodyFontSize)

}

}

setBodyFontSize();

function setRemUnit() {

var rem = docEl.clientWidth / 24

docEl.style.fontSize = rem + 'px'

}

setRemUnit()

// reset rem unit on page resize

window.addEventListener('resize', setRemUnit)

window.addEventListener('pageshow', function (e) {

if (e.persisted) {

setRemUnit()

}

})

// detect 0.5px supports

if (dpr >= 2) {

var fakeBody = document.createElement('body')

var testElement = document.createElement('div')

testElement.style.border = '.5px solid transparent'

fakeBody.appendChild(testElement)

docEl.appendChild(fakeBody)

if (testElement.offsetHeight === 1) {

docEl.classList.add('hairlines')

}

docEl.removeChild(fakeBody)

}

}(window, document))

②rem是相对于根元素的字体大小单位：使用VSCode插件并设置基准值（1920设置80）；

③main.js中引入：

<code>import './utils/flexible';

ECharts

①echarts封装：

<template>

<div :id="id" :style="style"></div>code>

</template>

<script>

import * as echarts from 'echarts'

export default {

name: 'MyEcharts',

data() {

return {

chart: ''

}

},

props: {

id: {

type: String

},

width: {

type: String,

default: '100%'

},

height: {

type: String,

default: '100%'

},

option: {

type: Object,

default() {

return {

}

}

}

},

computed: {

style() {

return {

width: this.width,

height: this.height

}

}

},

watch: {

option: {

handler(newVal, oldVal) {

if (this.chart) {

this.chart.setOption(newVal)

} else {

this.init();

}

},

deep: true

}

},

methods: {

init() {

this.chart = echarts.init(document.getElementById(this.id))

this.chart.setOption(this.option)

window.addEventListener("resize", this.chart.resize);

}

},

mounted() {

this.init()

},

}

</script>

②echarts中的px转换成rem：

export function fontSizeRem(size) {

const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

if (!clientWidth) return;

let fontSize = clientWidth / 1920;//尺寸大小

return size * fontSize;

}

③使用：

<template>

<div class="partOne">code>

<div class="center">code>

<MyEcharts id="pieECharts1" :style="{ width: '3.6875rem', height: '3.25rem' }" :option='pieDataOneOption' />code>

</div>

<!--<div style="font-size: 0.225rem; color: red;">1111</div> -->code>

</div>

</template>

<script>

import MyEcharts from './MyEcharts.vue'

import { fontSizeRem } from '../utils/rem.js'

export default {

name: 'partOne',

components: {

MyEcharts,

},

data() {

return {

pieDataOne: [

{ name: "空闲", value: 37, color: "#20E6A4" },

{ name: "占用", value: 63, color: "#F52F5F" }

],

pieDataOneOption: {

tooltip: {

show: false,

}, //提示框

legend: {

top: "bottom",

left: "center",

// width: 200,

// height: 27,

itemGap: fontSizeRem(20), //每个图例之间的间隙

itemWidth: fontSizeRem(8),

itemHeight: fontSizeRem(8),

selectedMode: false, //图例的选择模式,用图例改变显示状态

icon: "rect",

textStyle: {

fontSize: fontSizeRem(18),

lineHeight: fontSizeRem(21),

color: '#C6D1DB',

}

},

series: [

{

type: "pie", //饼图

hoverAnimation: false, //悬停动画

radius: ["55%", "60%"], //半径

center: ["50%", "48%"], //中心坐标

z: 10, //覆盖顺序

label: { //中心文本标签

position: "center",

formatter: () => {

return "实时xxxx\n利用率";

},

color: "#C6D1DB",

fontSize: fontSizeRem(18),

lineHeight: fontSizeRem(30),

},

data: [],

},

{

type: "pie",

hoverAnimation: false, //悬停动画

radius: ["50%", "65%"],

center: ["50%", "48%"],

label: { //图形上的文本标签

position: "outside",

color: "#F0F0F0",

fontSize: fontSizeRem(18),

// formatter: () => {

// return piedata.value;

// }

},

labelLine: { //标签的视觉引导线

show: true,

length: 0,

length2: fontSizeRem(16),

lineStyle: {

color: "#0783FA",

}

},

data: [],

},

],

},

}

},

mounted() {

this.pieDataOneOption.series[0].data = [

{

name: this.pieDataOne[0].name,

value: this.pieDataOne[0].value,

itemStyle: {

color: this.pieDataOne[0].color,

},

},

{

name: this.pieDataOne[1].name,

value: this.pieDataOne[1].value,

itemStyle: {

color: this.pieDataOne[1].color,

},

}

]

this.pieDataOneOption.series[1].data = [

{

name: this.pieDataOne[0].name,

value: this.pieDataOne[0].value,

itemStyle: {

color: this.pieDataOne[0].color,

opacity: 0.4,

},

},

{

name: this.pieDataOne[1].name,

value: this.pieDataOne[1].value,

itemStyle: {

color: this.pieDataOne[1].color,

opacity: 0.4,

},

}

]

this.pieDataOneOption.series[1].label.formatter = (val) => `${val.percent}%`

},

}

</script>

<style scoped>

.partOne {

background-image: url(../assets/左背景.png);

}

.center {

width: 11.4375rem;

height: 3.4625rem;

display: flex;

justify-content: center;

align-items: center;

}

</style>

展示