封裝一個公用組件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>

即可解決餅圖變形為橢圓的問題