示例
基本形式
<donutChart 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'},
],
},
});
隐藏图例
<donutChart 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'},
],
},
});
其它
<donutChart 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
DonutChart
继承自。
Options
new DonutChart()
参数 | 类型 | 默认值 | 数据流向 | 描述 |
---|---|---|---|---|
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.series | Array | [] | outside => inside | 序列信息 |
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 |