# Bar组件

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

import { Bar, ChartCrossSectionType } from '@tx3d/extension';

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

// 添加Bar组件
const bar = entity.addComponent( Bar, {

    shape: Tx3d.ChartCrossSectionType.Circular,
    inner: {

        size: 0.9,
        height: 5,
        material: { 

            startColor: '#0D9B8B',
            endColor: '#53FFA9',
            opacity: 1.0,
            transmission: 0.0,
            metalness: 0,
            roughness: 0,
            ior: 1.5,
            thickness: 0.01,
            reflectivity: 0.5,
            clearcoat: 0.0,
            clearcoatRoughness: 0.0,
            specularIntensity: 1,
            specularColor: 0xffffff,
            envMapIntensity: 1,

        },
        edge: {

            visible: false,
            width: 1.0,
            opacity: 1.0,
            color: '#aaaaaa'

        }

    }, 
    outer: {

        size: 1.0,
        height: 8,
        material: { 

            startColor: '#0D9B8B',
            endColor: '#53FFA9',
            opacity: 0.5,
            transmission: 1.0,
            metalness: 0,
            roughness: 0,
            ior: 1.5,
            thickness: 0.01,
            reflectivity: 0.5,
            clearcoat: 0.0,
            clearcoatRoughness: 0.0,
            specularIntensity: 1,
            specularColor: 0xffffff,
            envMapIntensity: 1,

        },
        edge: {

            visible: false,
            width: 1.0,
            opacity: 1.0,
            color: '#aaaaaa'

        }

    }

} );

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

提示

Bar组件初始化参数，详见BarParameters。

注意

Bar组件包含内外两部分组成，外部份默认为半透效果，构建参数中不给"outer"参数，即外部分不可见

# 属性

🌏 innerHeight 内部Bar的高度设置

// 获取内部bar高度
const innerHeight = bar.innerHeight;

// 设置内部bar高度
bar.innerHeight = 10;

1
2
3
4
5

🌏 outerHeight 外部Bar的高度设置

// 获取外部bar高度
const outerHeight = bar.outerHeight;

// 设置外部bar高度
bar.outerHeight = 10;

1
2
3
4
5

🌏 innerOccluded 内部bar是否可被遮挡设置

// 获取内部bar是否可被遮挡
const innerOccluded = bar.innerOccluded;

// 设置内部bar不可被遮挡
bar.innerOccluded = false;

1
2
3
4
5

🌏 outerOccluded 外部bar是否可被遮挡设置

// 获取外部bar是否可被遮挡
const outerOccluded = bar.outerOccluded;

// 设置外部bar不可被遮挡
bar.outerOccluded = false;

1
2
3
4
5

🌏 innerOpacity 内部bar透明度

// 获取内部bar透明度
const innerOpacity = bar.innerOpacity;

// 设置内部bar透明度
bar.innerOpacity = 0.75;

1
2
3
4
5

🌏 outerOpacity 外部bar透明度

// 获取外部bar透明度
const outerOpacity = bar.outerOpacity;

// 设置外部bar透明度
bar.outerOpacity = 0.75;

1
2
3
4
5

注意

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

🌏 innerColor 统一控制内部bar颜色设置，只写属性

// 设置颜色
bar.innerColor = '#de98d3';

1
2

🌏 outerColor 统一控制外部bar颜色设置，只写属性

// 设置颜色
bar.outerColor = '#de98d3';

1
2

注意

初始化创建柱状图时，同时传递(inner/outer)Color参数和（(inner/outer)StartColor及(inner/outer)EndColor）参数时，后者参数设置不起作用，以(inner/outer)Color参数设置颜色为准，设置为统一颜色，如不想统一设置颜色，可不传递(inner/outer)Color参数。（创建成功后，属性的动态修改不受影响，此仅针对初始化参数）

🌏 innerStartColor 内部bar起始端颜色设置

// 获取内部bar起始端颜色
const innerStartColor = bar.innerStartColor;

// 设置内部bar起始端颜色
bar.innerStartColor = '#ff0000';

1
2
3
4
5

🌏 outerStartColor 外部bar起始端颜色设置

// 获取外部bar起始端颜色
const outerStartColor = bar.outerStartColor;

// 设置外部bar起始端颜色
bar.outerStartColor = '#ff0000';

1
2
3
4
5

🌏 innerEndColor 内部bar末端颜色设置

// 获取内部bar末端颜色
const innerEndColor = bar.innerEndColor;

// 设置内部bar末端颜色
bar.innerEndColor = '#00ffff';

1
2
3
4
5

🌏 outerEndColor 外部bar末端颜色设置

// 获取外部bar末端颜色
const outerEndColor = bar.outerEndColor;

// 设置外部bar末端颜色
bar.outerEndColor = '#00ffff';

1
2
3
4
5

🌏 innerEdgeOpacity 内部bar边框线透明度

// 获取内部bar边框线透明度
const innerEdgeOpacity = bar.innerEdgeOpacity;

// 设置内部bar边框线透明度
bar.innerEdgeOpacity = 0.90;

1
2
3
4
5

🌏 outerEdgeOpacity 外部bar边框线透明度

// 获取外部bar边框线透明度
const outerEdgeOpacity = bar.outerEdgeOpacity;

// 设置外部bar边框线透明度
bar.outerEdgeOpacity = 0.90;

1
2
3
4
5

🌏 innerEdgeColor 内部bar边框线颜色设置

// 获取内部bar边框线颜色
const innerEdgeColor = bar.innerEdgeColor;

// 设置内部bar边框线颜色
bar.innerEdgeColor = '#ffffff';

1
2
3
4
5

🌏 outerEdgeColor 外部bar边框线颜色设置

// 获取外部bar边框线颜色
const outerEdgeColor = bar.outerEdgeColor;

// 设置外部bar边框线颜色
bar.outerEdgeColor = '#ffffff';

1
2
3
4
5

🌏 innerEdgeVisible 内部bar边框线可见性设置

// 获取内部bar边框线可见性
const innerEdgeVisible = bar.innerEdgeVisible;

// 设置内部bar边框线不可见
bar.innerEdgeVisible = false;

1
2
3
4
5

🌏 outerEdgeVisible 外部bar边框线可见性设置

// 获取外部bar边框线可见性
const outerEdgeVisible = bar.outerEdgeVisible;

// 设置外部bar边框线不可见
bar.outerEdgeVisible = false;

1
2
3
4
5

🌏 innerEdgeWidth 内部bar边框线宽度设置

// 获取内部bar边框线宽度
const innerEdgeWidth = bar.innerEdgeWidth;

// 设置内部bar边框线宽度
bar.innerEdgeWidth = 2.0;

1
2
3
4
5

🌏 outerEdgeWidth 外部bar边框线宽度设置

// 获取外部bar边框线宽度
const outerEdgeWidth = bar.outerEdgeWidth;

// 设置外部bar边框线宽度
bar.outerEdgeWidth = 2.0;

1
2
3
4
5

🌏 innerVisible 内部bar可见性设置

// 获取内部bar可见性
const innerVisible = bar.innerVisible;

// 设置内部bar不可见
bar.innerVisible = false;

1
2
3
4
5

🌏 outerVisible 外部bar可见性设置

// 获取外部bar可见性
const outerVisible = bar.outerVisible;

// 设置外部bar不可见
bar.outerVisible = false;

1
2
3
4
5

← Audio组件 Belt组件 →