Regular UI

示例

基本形式

<pieChart data={data} />

let component = new RGUI.Component({
    template,
    data: {
        data: [
            {percent: 25, key: '1', name: 'sector1'},
            {percent: 25, key: '2', name: 'sector2'},
            {percent: 20, key: '3', name: 'sector3'},
            {percent: 30, key: '4', name: 'sector4'},
        ],
    },
});

隐藏图例

<pieChart legend={false} data={data} />

let component = new RGUI.Component({
    template,
    data: {
        data: [
            {percent: 12, key: '1', name: 'sector1'},
            {percent: 20, key: '2', name: 'sector2'},
            {percent: 30, key: '3', name: 'sector3'},
            {percent: 18, key: '4', name: 'sector4'},
            {percent: 20, key: '5', name: 'sector5'},
        ],
    },
});

其它

<pieChart border title="每星期访问量" data={data} />

let component = new RGUI.Component({
    template,
    data: {
        data: [
            {percent: 12, key: '1', name: 'sector1'},
            {percent: 20, key: '2', name: 'sector2'},
            {percent: 30, key: '3', name: 'sector3'},
            {percent: 18, key: '4', name: 'sector4'},
            {percent: 20, key: '5', name: 'sector5'},
        ],
    },
});

API

Class

PieChart

继承自。

Options

new PieChart()

参数	类型	默认值	数据流向	描述
`data`	Object			绑定属性
`data.width`	string	`'100%'`	outside => inside	图表宽度
`data.height`	string	`'480px'`	outside => inside	图表高度
`data.title`	string	`''`	outside => inside	标题
`data.titleTemplate`	string	`''`	outside @=> inside	标题模板
`data.tooltipTemplate`	string	`''`	outside @=> inside	工具提示模板
`data.data`	Array		outside => inside	数据。如果为`undefined`，表示数据正在加载；如果为`[]`，表示数据为空。
`data.border`	boolean	`false`	outside => inside	是否显示边框
`data.legend`	boolean	`true`	outside => inside	是否显示图例
`data.visible`	boolean	`true`	outside => inside	是否显示
`data.class`	string	`'m-donutChart'`	outside => inside	补充class