BQ-Design

Appearance

3D 饼图 ​

TIP

使用该组件需要提前安装threeJs、当前所用版本0.164.1

圆环饼图 ​

66.4%
TM
21.7%
DOUYIN
7.6%
JD
2.4%
VIP
1.9%
Others

代码示例

vue
<template>
  <BqPie/>
</template>

饼图 ​

66.4%
TM
21.7%
DOUYIN
7.6%
JD
2.4%
VIP
1.9%
Others

代码示例

vue
<template>
  <BqPie :innerRadius="0"/>
</template>

隐藏中间提示 ​

代码示例

vue
<template>
  <BqPie :centerTooltip="false" />
</template>

增加背景图 ​

66.4%
TM
21.7%
DOUYIN
7.6%
JD
2.4%
VIP
1.9%
Others

代码示例

vue
<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自定义默认内容