封装一个公用组件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>

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