# 饼状图

使用PieChart可创建三维饼状图，由 @tx3d/extension 包提供。

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

const pieChart = new PieChart( engine, {

    name: '3D饼图',
    innerRadius: 15.0,
    outerRadius: 30.0,
    height: 3.0,
    startAngle: 90.0,
    position: [ 0, 0, 0 ],
    edge: { 

        color: '#66ffff',
        opacity: 1.0,
        width: 1.0

    },

    material:{

        opacity: 1.0,
        roughness: 0.0,
        metalness: 0.0,
        clearcoat: 1.0,
        clearcoatRoughness: 0,

    },
    data:   [

        { name: "上衣", value: 1048, color: { startColor: '#cc00ff', endColor: '#cc99ff' } },
        { name: "裤子", value: 735, color: { startColor: '#00ff00', endColor: '#ffff00' } },
        { name: "鞋子", value: 580, color: { startColor: '#6600ff', endColor: '#66ccff' } },
        { name: "帽子", value: 484, color: { startColor: '#00ffff', endColor: '#99ffcc' } },
        { name: "袜子", value: 300, color: { startColor: '#0066ff', endColor: '#00ccff' } },

    ]
    onCompleted: ( chart ) => {}

} );

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

提示

PieChart对象初始化参数，详见PieChartParameters。

# 属性

🌏 guid 3D饼图GUID，只读

// 获取GUID
const guid = pieChart.guid;

1
2

🌏 name 3D饼图的名称，只读

// 获取Name
const name = pieChart.name;

1
2

🌏 rootEntity 3D饼图表根节点，只读

// 获取根节点
const rootEntity = pieChart.rootEntity;

1
2

🌏 childrenEntites 获取所有子实体，只读

// 获取所有子实体
const entities = pieChart.childrenEntites;

1
2

🌏 height 高度

// 获取高度
const height = pieChart.height;

// 设置高度
pieChart.height = 5;

1
2
3
4
5

🌏 startAngle 初始化角度

// 获取饼图初始化角度
const startAngle = pieChart.startAngle;

// 设置饼图初始化角度为90度
pieChart.startAngle = 90;

1
2
3
4
5

🌏 occluded 是否可被遮挡

// 获取可被遮挡
const occluded = pieChart.occluded;

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

1
2
3
4
5

🌏 edgeOpacity 边框透明度，只写

// 设置边框透明度
pieChart.edgeOpacity = 1.0;

1
2

注意

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

🌏 edgeColor 边框颜色，只写

// 设置边框颜色
pieChart.edgeColor = '#ffff00';

1
2

🌏 edgeVisible 边框是否显示，只写

// 设置边框显示
pieChart.edgeVisible = true;

1
2

🌏 edgeWidth 边框宽度，只写

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

1
2

🌏 angles 数据对应的角度，只读

// 获取数据对应的角度
const angles = pieChart.angles;

1
2

# 接口

🌏 update 3D饼图批量属性更新接口

pieChart.update( { 

    // 更新数据属性
    data:  [

        { name: "手套", value: 800, color: { startColor: '#ffff22', endColor: '#0000ff' } },
        { name: "上衣", value: 200, color: { startColor: '#ff00ff', endColor: '#770077' } },
        { name: "裤子", value: 100, color: { startColor: '#00ff00', endColor: '#007700' } },
        { name: "鞋子", value: 50, color: { startColor: '#ffff00', endColor: '#777700' } },
        { name: "袜子", value: 1000, color: { startColor: '#0000ff', endColor: '#000077' } },

    ], 

} );

1
2
3
4
5
6
7
8
9
10
11
12
13
14

注意

update接口适用于更新当前数据, 更新参数中的data参数，数量长度最大不应超过初始数据data的长度。
若更新参数data长度大于初始data长度，即更新从零到初始data长度的数据，超出数据不做处理。
理论上允许更新参数data长度小于初始参数data长度，即更新索引从0到最新data.length - 1对应的数据子饼图对象，超出最新data长度的子饼图对象不予更新。
如果新数据数量和初始数据数量不一致（多指最新数据data长度大于初始数据data长度），建议使用新数据重建图表

提示

PieChart更新接口参数，同PieChartParameters。目前该参数中半径等属性不支持更新

← 柱状图金字塔图 →