145 lines
3.3 KiB
TypeScript
145 lines
3.3 KiB
TypeScript
|
|
import type { MetaContainerItem } from 'open-data-v/base'
|
||
|
|
import { ComponentGroup, CustomComponent, DataMode, FormType } from 'open-data-v/base'
|
||
|
|
import { h } from 'vue'
|
||
|
|
|
||
|
|
export const componentName = 'BasicPieChart2'
|
||
|
|
class BasicPieChartComponent extends CustomComponent {
|
||
|
|
constructor(id?: string, name?: string, icon?: string) {
|
||
|
|
super({
|
||
|
|
component: componentName,
|
||
|
|
group: ComponentGroup.PIE,
|
||
|
|
name: name ? name : '基础饼状图2',
|
||
|
|
id,
|
||
|
|
width: 520,
|
||
|
|
height: 260,
|
||
|
|
icon,
|
||
|
|
dataMode: DataMode.UNIVERSAL
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
_prop: MetaContainerItem[] = [
|
||
|
|
{
|
||
|
|
label: '数据配置',
|
||
|
|
prop: 'data',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
prop: 'upperLimit',
|
||
|
|
label: '上限',
|
||
|
|
type: FormType.NUMBER,
|
||
|
|
props: {
|
||
|
|
defaultValue: 150
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'lowerLimit',
|
||
|
|
label: '下限',
|
||
|
|
type: FormType.NUMBER,
|
||
|
|
props: {
|
||
|
|
defaultValue: 0
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '图例',
|
||
|
|
prop: 'legend',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
prop: 'isShow',
|
||
|
|
label: '是否显示',
|
||
|
|
type: FormType.SWITCH,
|
||
|
|
props: {
|
||
|
|
defaultValue: true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '标签',
|
||
|
|
prop: 'label',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
prop: 'isShow',
|
||
|
|
label: '是否显示',
|
||
|
|
type: FormType.SWITCH,
|
||
|
|
props: {
|
||
|
|
defaultValue: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'labelColor',
|
||
|
|
label: '文字颜色',
|
||
|
|
type: FormType.COLOR,
|
||
|
|
props: {
|
||
|
|
defaultValue: '#00BAFF'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
prop: 'labelSize',
|
||
|
|
label: '文字大小',
|
||
|
|
type: FormType.NUMBER,
|
||
|
|
props: {
|
||
|
|
defaultValue: 40
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'labelWeight',
|
||
|
|
label: '文字宽度',
|
||
|
|
type: FormType.FONT_WEIGHT,
|
||
|
|
props: {
|
||
|
|
defaultValue: 400
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '系列样式',
|
||
|
|
prop: 'series',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
prop: 'radiusMin',
|
||
|
|
label: '半径下限',
|
||
|
|
type: FormType.NUMBER,
|
||
|
|
props: {
|
||
|
|
defaultValue: 40,
|
||
|
|
suffix: () => h('span', {}, '%')
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
prop: 'radiusMax',
|
||
|
|
label: '半径上限',
|
||
|
|
type: FormType.NUMBER,
|
||
|
|
props: {
|
||
|
|
defaultValue: 70,
|
||
|
|
suffix: () => h('span', {}, '%')
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
prop: 'borderRadius',
|
||
|
|
label: '边框半径',
|
||
|
|
type: FormType.NUMBER,
|
||
|
|
props: {
|
||
|
|
defaultValue: 10
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
_style: MetaContainerItem[] = []
|
||
|
|
get exampleData() {
|
||
|
|
return [
|
||
|
|
{ label: '秦', value: Math.round(Math.random() * 100) },
|
||
|
|
{ label: '齐', value: Math.round(Math.random() * 100) },
|
||
|
|
{ label: '楚', value: Math.round(Math.random() * 100) },
|
||
|
|
{ label: '赵', value: Math.round(Math.random() * 100) },
|
||
|
|
{ label: '燕', value: Math.round(Math.random() * 100) },
|
||
|
|
{ label: '韩', value: Math.round(Math.random() * 100) },
|
||
|
|
{ label: '魏', value: Math.round(Math.random() * 100) }
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default BasicPieChartComponent
|