解决ScaleBox来实现大屏自适应时，页面的饼图会变形的问题

封装一个公用组件pieChartAdaptation.vue

代码如下：

<template>
	<div :style="styleObject" class="pie-chart-adaptation">
		<slot></slot>
	</div>
</template>

<script setup lang="ts">
import { inject, computed } from "vue";
const scaleBox: any = inject("scaleBox");

const styleObject = computed(() => {
	let scaleRatio = 1;
	if (scaleBox.scaleX < scaleBox.scaleY) {
		scaleRatio = scaleBox.scaleX;
	} else {
		scaleRatio = scaleBox.scaleY;
	}
	return {
		transform: `scale(${(1 / scaleBox.scaleX) * scaleRatio},${(1 / scaleBox.scaleY) * scaleRatio})`
	};
});
</script>

<style scoped></style>

ScaleBox里面要传递参数过来

这里的ScaleBox文件参考我写的另一篇文章：

Vue3封装ScaleBox组件

let that = reactive({
	width: 1920,
	height: 1080,
	scaleX: 1,
	scaleY: 1
});

provide("scaleBox", that);

在饼图的实例化地方直接使用

<pieChartAdaptation>要包裹的饼图</pieChartAdaptation>

即可解决饼图变形为椭圆的问题