button

TIP

基础按钮组件

button

代码示例

<template>
    <WyButton />
</template>

button

代码示例

<template>
  <!-- <BqPie :innerRadius="0"/> -->
</template>

隐藏中间提示

代码示例

<template>
  <!-- <BqPie :centerTooltip="false" /> -->
</template>

<template>
    <div class="slot-pie">
        <BqPie>
            <template v-slot:footer>
                <div class="footer">
                    <img :src="imgSrc" />
                </div>
            </template>
        </BqPie>
    </div>
</template>

<script setup lang="ts">
defineOptions({ name: "BqSlotPie" });
const imgSrc = "https://tqa.oss-cn-shanghai.aliyuncs.com/val/024af179-9e6d-4ce1-84c6-86a2ddb42ca5.png";
</script>

<style lang="scss" scoped>
.slot-pie {
    background-color: black;
    :deep(.three-pie-main) {
        z-index: 2;
    }
    .footer {
        position: absolute;
        top: 17%;
        left: 50%;
        z-index: 1;
        width: 50%;
        transform: translateX(-50%);
    }
}
</style>

API

| 成员 | 说明 | 类型 | | ------------- | -------------- | --------------------------------------------- | --- | | data | 需要展示的数据 | Array<data: {label: string;value: number;}> | | colorList | 饼图颜色 | string[] | | | innerRadius | 内环半径 | number | | | outerRadius | 外环半径 | number | | | depth | 饼图深度 | number | | | centerTooltip | 中间提示 | boolean | |

插槽

插槽名	说明
footer	自定义默认内容