VUE中可适化大屏的自适应

<template>

<div ref="main" style="width: 1000px; height: 1000px"></div>

<!-- <v-scale-screen width="1920" height="1080" class="app" style="transform: scale(1, 1); background-color: #fff">

</v-scale-screen> -->

</template>

<script setup lang="ts">

import * as echarts from "echarts";

// import VScaleScreen from "v-scale-screen";

import { ref, onMounted } from "vue";

// 按需引入 echarts

const main = ref(); // 使用ref创建虚拟DOM引用，使用时用main.value

onMounted(() => {

init();

});

function init() {

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(main.value);

var datas = [

[

{ name: "银河帝国5：迈向基地", value: 3.8 },

{ name: "俞军产品方法论", value: 2.3 },

{ name: "艺术的逃难", value: 2.2 },

{ name: "第一次世界大战回忆录（全五卷）", value: 1.3 },

{ name: "Scrum 精髓", value: 1.2 },

{ name: "其它", value: 5.7 },

],

];

// 指定图表的配置项和数据

var option = {

title: {

text: "阅读书籍分布",

left: "center",

top: "center",

textStyle: {

color: "#999",

fontWeight: "normal",

fontSize: 12,

},

},

series: datas.map(function (data) {

return {

type: "pie",

radius: [120, 100],

height: "33.33%",

left: "center",

top: "center",

width: 500,

itemStyle: {

borderColor: "#fff",

borderWidth: 2,

},

label: {

alignTo: "edge",

formatter: "{name|{b}}\n{time|{c} 小时}",

minMargin: 5,

edgeDistance: 10,

lineHeight: 15,

rich: {

time: {

fontSize: 10,

color: "#999",

},

},

},

labelLine: {

length: 15,

length2: 0,

maxSurfaceAngle: 80,

},

labelLayout: function (params: any) {

const isLeft = params.labelRect.x < myChart.getWidth() / 2;

const points = params.labelLinePoints;

// Update the end point.

points[2][0] = isLeft

? params.labelRect.x

: params.labelRect.x + params.labelRect.width;

return {

labelLinePoints: points,

};

},

data: data,

};

}),

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

}

</script>

<style scoped>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

.app {

transition-property: all;

transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

transition-duration: 0.5s;

position: relative;

overflow: hidden;

z-index: 100;

transform-origin: left top;

}

</style>