# Pie组件

使用Pie组件可以为实体添加3D饼状图，由 @tx3d/extension 包提供。

import { Pie } from '@tx3d/extension';

// 创建实体
const entity = engine.createEntity();

// 添加Pie组件
const pie = entity.addComponent( Pie, {

    innerRadius: 10.0,
    outerRadius: 20.0,
    height: 2,
    segments: 64.0,
    startAngle: 30,
    angle: 90,
    material: {

        startColor: '#99ffcc',
        endColor: '#99ffff',
        // color: '#ffffff',
        opacity: 1.0,               
        metalness: 0.0,
        roughness: 0.1,
        clearcoat: 1.0, 
        clearcoatRoughness: 0.1, 
        sheen: 1.0,
        transmission: 0.5

    },
    edge: { 

        color: '#16bbd4',
        visible: true,
        opacity: 1.0,
        width: 1.5

    }

} );

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

提示

Pie组件初始化参数，详见PieParameters。

# 属性

🌏 height 高度设置

// 获取是饼状图高度
const height = pie.height;

// 设置饼状图高度
pie.height = 10;

1
2
3
4
5

🌏 angle 饼状图圆周角大小设置

// 获取圆周角大小
const angle = pie.angle;

// 设置圆周角大小
pie.angle = 135;

1
2
3
4
5

注意

angle取值应在[ 0.0 ~ 360.0 ]区间

🌏 startAngle 饼状图起始角度设置

// 获取起始角度大小
const startAngle = pie.startAngle;

// 设置起始角度大小
pie.startAngle = 90;

1
2
3
4
5

注意

startAngle取值应在[ 0.0 ~ 360.0 ]区间

🌏 occluded 是否可被遮挡设置

// 获取是否可被遮挡
const occluded = pie.occluded;

// 设置不可被遮挡
pie.occluded = false;

1
2
3
4
5

🌏 opacity 透明度

// 获取透明度
const opacity = pie.opacity;

// 设置透明度
pie.opacity = 0.75;

1
2
3
4
5

注意

opacity取值应在[ 0.0 ~ 1.0 ]区间

🌏 color 统一控制颜色设置，只写属性

// 设置颜色
pie.color = '#de98d3';

1
2

注意

初始化创建饼状图时，同时传递color参数和（startColor及endColor）参数时，后者参数设置不起作用，以color参数设置颜色为准，设置为统一颜色，如不想统一设置颜色，可不传递color参数

🌏 startColor 起始端颜色设置

// 获取起始端颜色
const startColor = pie.startColor;

// 设置起始端颜色
pie.startColor = '#ff0000';

1
2
3
4
5

🌏 endColor 末端颜色设置

// 获取末端颜色
const endColor = pie.endColor;

// 设置末端颜色
pie.endColor = '#00ffff';

1
2
3
4
5

🌏 edgeOpacity 边框线透明度

// 获取边框线透明度
const edgeOpacity = pie.edgeOpacity;

// 设置边框线透明度
pie.edgeOpacity = 0.90;

1
2
3
4
5

注意

edgeOpacity取值应在[ 0.0 ~ 1.0 ]区间

🌏 edgeColor 边框线颜色设置

// 获取边框线颜色
const edgeColor = pie.edgeColor;

// 设置边框线颜色
pie.edgeColor = '#ffffff';

1
2
3
4
5

🌏 edgeVisible 边框线可见性设置

// 获取边框线可见性
const edgeVisible = pie.edgeVisible;

// 设置边框线不可见
pie.edgeVisible = false;

1
2
3
4
5

🌏 edgeWidth 边框线宽度设置

// 获取边框线宽度
const edgeWidth = pie.edgeWidth;

// 设置边框线宽度
pie.edgeWidth = 2.0;

1
2
3
4
5

🌏 angleDivideDirection 角平分线方向，只读属性

// 获取角平分线方向
const angleDivideDirection = pie.angleDivideDirection;

1
2

🌏 innerRadius 内半径，只读属性

// 获取内半径大小
const innerRadius = pie.innerRadius;

1
2

🌏 outerRadius 外半径大小，只读属性

// 获取外半径大小
const outerRadius = pie.outerRadius;

1
2

← Paint组件 PoolWater组件 →