syber-lowcode-business-materials
Version:
syber-lowcode-business-materials
906 lines (900 loc) • 25.9 kB
text/typescript
import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
import {getFontSet, distanceSet} from '../../src/utils/metaConfigHelp/commonFormItems';
import {
getDataLabelItems,
getFormatOptionCodeItem,
getLegendItems,
getThemeItems
} from "../../src/utils/metaConfigHelp/echartConItem";
const ChartPieMeta: IPublicTypeComponentMetadata = {
priority: 20,
componentName: "ChartPie",
title: "饼状图",
group: '仪表板',
category: '图表',
docUrl: "",
screenshot: "",
configure: {
props: [
{
title: "数据源",
display: 'block',
type: 'group',
items: [
{
name: 'dataSource',
title: {
label: "数据源"
},
setter: 'JsonSetter',
supportVariable: true,
isRequired: true,
},
{
name: 'contentParams.limitNum',
title: {
label: "数据量限制",
tip: "limitNum | 能展示的最大数据量"
},
supportVariable: false,
setter: {
componentName: "NumberSetter",
isRequired: true,
initialValue: 500,
props: {
min: 10,
max: 1000000,
},
}
},
]
},
{
title: "数据对接设置",
display: 'block',
type: 'group',
items: [
{
name: "contentParams.dataSetConfig.labelField",
title: "名称维度",
supportVariable: true,
setter: {
componentName: "StringSetter",
props: {
placeholder: "填写名称对接字段",
},
}
},
{
name: "contentParams.dataSetConfig.valueField",
title: "数值维度",
supportVariable: true,
setter: {
componentName: "StringSetter",
props: {
placeholder: "填写数值对接字段",
},
}
},
{
name: "contentParams.dataSetConfig.pieSetArr",
title: "颜色映射",
supportVariable: true,
setter: {
componentName: "ArraySetter",
props: {
itemSetter: {
componentName: 'ObjectSetter',
props: {
config: {
items: [
{
name: 'field',
title: '饼块名称',
setter: 'StringSetter',
},
{
name: 'extraStyle.color',
title: '饼块颜色',
setter: 'ColorSetter',
},
],
}
},
}
}
}
}
]
},
{
title: "饼图专用",
display: 'block',
type: 'group',
items: [
{
name: 'contentParams.pieSpecial._pieType',
title: "图形类型",
supportVariable: false,
setter: {
componentName: "SelectSetter",
props: {
options: [
{
title: '普通饼图',
value: 'normal',
},
{
title: '南丁格尔图-圆心模式',
value: 'radius',
},
{
title: '南丁格尔图-面积模式',
value: 'area',
},
],
},
initialValue: 'normal',
}
},
{
name: 'contentParams.pieSpecial._radiusInner',
title: '内圈半径(%)',
supportVariable: false,
setter: {
componentName: 'NumberSetter',
props: {
min: 0,
max: 100,
step: 1,
},
initialValue: 0,
},
},
{
name: 'contentParams.pieSpecial._radiusOuter',
title: '外圈半径(%)',
supportVariable: false,
setter: {
componentName: 'NumberSetter',
props: {
min: 0,
max: 100,
step: 1,
},
initialValue: 0,
},
},
{
title: "圆心位置",
display: 'block',
type: 'group',
items: [
{
name: 'contentParams.pieSpecial._centerSetX',
title: { label: '水平', tip: '自定义填写，如100px，50%' },
supportVariable: false,
setter: {
componentName: "StringSetter",
props: {
placeholder: "请选择或填写",
},
initialValue: '50%',
}
},
{
name: 'contentParams.pieSpecial._centerSetY',
title: { label: '垂直', tip: '自定义填写，如100px，50%' },
supportVariable: false,
setter: {
componentName: "StringSetter",
props: {
placeholder: "请选择或填写",
},
initialValue: '50%',
}
},
]
},
{
name: 'contentParams.pieSpecial._clockwise',
title: '排列方式',
supportVariable: false,
setter: {
componentName: "SelectSetter",
props: {
options: [
{
title: '顺时针',
value: 'clockwise',
},
{
title: '逆时针',
value: 'counterclockwise',
},
],
},
initialValue: 'clockwise',
}
},
{
name: 'contentParams.pieSpecial._showAllLabel',
title: { label: '需要展示所有数据的标签', tip: '选否，会自动隐藏占比不足1%的数据的标签' },
supportVariable: false,
defaultValue: false,
setter: 'BoolSetter',
},
{
name: 'contentParams.pieSpecial._labelLine',
title: { label: '视觉引导线', tip: '扇区与标签的连线类型' },
supportVariable: false,
setter: {
componentName: 'RadioGroupSetter',
props: {
options: [
{
title: '隐藏',
value: 'hide',
},
{
title: '折线',
value: 'line',
},
{
title: '曲线',
value: 'curve',
},
],
},
initialValue: 'line',
}
},
]
},
{
title: "总量信息面板",
display: 'block',
type: 'group',
items: [
{
name: 'contentParams.totalMsg.show',
title: "是否展示",
supportVariable: false,
defaultValue: false,
setter: 'BoolSetter',
},
{
title: "文案位置",
display: 'block',
type: 'group',
items: [
{
name: 'contentParams.totalMsg._centerSetX',
title: '水平(%)',
supportVariable: false,
setter: {
componentName: 'NumberSetter',
props: {
min: 0,
max: 100,
step: 1,
},
initialValue: 50,
},
},
{
name: 'contentParams.totalMsg._centerSetY',
title: '垂直(%)',
supportVariable: false,
setter: {
componentName: 'NumberSetter',
props: {
min: 0,
max: 100,
step: 1,
},
initialValue: 50,
},
},
]
},
{
title: "总量数字设置",
display: 'block',
type: 'group',
items: getFontSet('contentParams.totalMsg.centerTextSet',true,false)
},
{
title: "左间隙",
display: 'block',
type: 'group',
items: distanceSet("contentParams.totalMsg.marginRight.num","contentParams.totalMsg.marginRight.unit",["px","rem"])
},
{
title: "右间隙",
display: 'block',
type: 'group',
items: distanceSet("contentParams.totalMsg.marginRight.num","contentParams.totalMsg.marginRight.unit",["px","rem"])
},
{
title: "前缀文案设置",
display: 'block',
type: 'group',
items: [
{
name: 'contentParams.totalMsg.beforeTextSet.text',
title: '文案',
supportVariable: false,
setter: {
componentName: "StringSetter",
props: {
placeholder: "请填写文案",
maxLength: 50,
},
}
},
...getFontSet('contentParams.totalMsg.beforeTextSet',true,false)
],
},
{
title: "后缀文案设置",
display: 'block',
type: 'group',
items: [
{
name: 'contentParams.totalMsg.afterTextSet.text',
title: '文案',
supportVariable: false,
setter: {
componentName: "StringSetter",
props: {
placeholder: "请填写文案",
maxLength: 50,
},
}
},
...getFontSet('contentParams.totalMsg.afterTextSet',true,false)
],
},
{
title: "其它设置",
display: 'block',
type: 'group',
items: [
{
name: 'contentParams.totalMsg.alignItems',
title: "对齐方式",
supportVariable: false,
setter: {
componentName: 'RadioGroupSetter',
props: {
options: [
{
title: '顶部对齐',
value: 'flex-start',
},
{
title: '居中对齐',
value: 'center',
},
{
title: '基线对齐',
value: 'baseline',
},
{
title: '底部对齐',
value: 'flex-end',
},
],
},
initialValue: 'center',
}
},
{
name: 'contentParams.totalMsg.tranBigNum',
title: "大数字处理",
supportVariable: false,
defaultValue: true,
setter: 'BoolSetter',
},
{
name: 'contentParams.totalMsg.bigNumPoint',
title: "保留小数位数",
supportVariable: false,
setter: {
componentName: "NumberSetter",
isRequired: true,
initialValue: 2,
props: {
min: 0,
max: 4,
step: 1
},
},
condition: {
type: 'JSFunction',
value: 'target => !!target.getProps().getPropValue("contentParams.totalMsg.tranBigNum")',
},
},
]
}
]
},
{
title: "扇区样式",
display: 'block',
type: 'group',
items: [
{
name: 'contentParams.itemStyle._borderRadiusInner',
title: "内侧圆角(%)",
supportVariable: false,
setter: {
componentName: "NumberSetter",
isRequired: true,
initialValue: 0,
props: {
min: 0,
max: 100,
step: 1
},
},
},
{
name: 'contentParams.itemStyle._borderRadiusOuter',
title: "外侧圆角(%)",
supportVariable: false,
setter: {
componentName: "NumberSetter",
isRequired: true,
initialValue: 0,
props: {
min: 0,
max: 100,
step: 1
},
},
},
{
name: 'contentParams.itemStyle.borderWidth',
title: "描边线宽",
supportVariable: false,
setter: {
componentName: "NumberSetter",
isRequired: true,
initialValue: 0,
props: {
min: 0,
max: 10,
step: 1
},
},
},
{
name: 'contentParams.itemStyle.borderColor',
title: "描边线颜色",
supportVariable: false,
setter: 'ColorSetter'
},
{
name: 'contentParams.itemStyle.borderType',
title: "描边线类型",
supportVariable: false,
setter: {
componentName: 'RadioGroupSetter',
props: {
options: [
{
title: '实线',
value: 'solid',
},
{
title: '虚线',
value: 'dashed',
}
],
},
initialValue: 'solid',
}
},
{
name: 'contentParams.itemStyle.shadowBlur',
title: "阴影大小",
supportVariable: false,
setter: {
componentName: "NumberSetter",
isRequired: true,
initialValue: 0,
props: {
min: 0,
max: 20,
step: 1
},
},
},
{
name: 'contentParams.itemStyle.shadowColor',
title: "阴影颜色",
supportVariable: false,
setter: 'ColorSetter'
},
{
title: "主题配置",
display: 'block',
type: 'group',
items: getThemeItems()
},
{
title: "数据标签",
display: 'block',
type: 'group',
items: getDataLabelItems({
labelPositionOptions: [
{
title: '扇区外侧',
value: 'outside',
},
{
title: '扇区内侧',
value: 'inside',
},
],
extendItems: [
{
name: 'contentParams.label._showRealNum',
title: "显示数值",
supportVariable: false,
defaultValue: false,
setter: 'BoolSetter',
},
{
name: 'contentParams.label._showPercentage',
title: "显示百分比",
supportVariable: false,
defaultValue: false,
setter: 'BoolSetter',
},
]
})
},
]
},
{
title: "鼠标提示面板",
display: 'block',
type: 'group',
items: [
{
name: 'contentParams.tooltip.show',
title: "是否显示",
supportVariable: false,
defaultValue: true,
setter: 'BoolSetter',
},
{
name: 'contentParams.tooltip._showPercentage',
title: "显示百分比",
supportVariable: false,
defaultValue: false,
setter: 'BoolSetter',
},
]
},
{
title: "图例",
display: 'block',
type: 'group',
items: getLegendItems()
},
{
title: "代码自定义",
display: 'block',
type: 'group',
items: [
getFormatOptionCodeItem("formatChartPieOptionFunc")
]
}
],
supports: {
style: true,
events: [
{
name: 'onChartPieItemClick',
template:
"\nonChartPieItemClick(item,${extParams}){\n// 点击图表项后的回调\nconsole.log('onChartPieItemClick', item);}",
},
],
},
component: {}
}
};
const snippets: IPublicTypeSnippet[] = [
{
title: "饼状图",
screenshot: require('./__screenshots__/chart-pie-1.png'),
schema: {
componentName: "ChartPie",
props: {
dataSource: [
{
"季度": "第一季度",
"数量": 2200,
},
{
"季度": "第二季度",
"数量": 2600,
},
{
"季度": "第三季度",
"数量": 1600,
},
],
contentParams: {
dataSetConfig: {
labelField: "季度",
valueField: "数量",
},
theme: {
backgroundColor: '#00000000',
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
},
usual: {},
//鼠标提示面板
tooltip: {
seeMore: false,
show: true,
trigger: 'item',
triggerOn: 'mousemove|click',
backgroundColor: '#ffffffb3',
borderColor: '#333333ff',
borderWidth: 0,
padding: 5,
textStyle: {
color: null,
},
_showPercentage: false,
},
//图例
legend: {
seeMore: false,
show: false,
type: 'plain', //plain scroll
icon: 'roundRect',
_position: 'top',
width: 'auto',
height: 'auto',
orient: 'horizontal',
align: 'auto',
itemGap: 10,
},
//饼图特殊
pieSpecial: {
seeMore: false,
_pieType: 'normal',
_clockwise: 'clockwise',
_showAllLabel: false,
_labelLine: 'line',
_radiusInner: 0,
_radiusOuter: 75,
_centerSetX: '50%',
_centerSetY: '50%',
},
//标签
label: {
_setType: 'normal',
show: true,
_showPlan: 'normal', //normal pop
color: '#000000',
position: 'outside',
_beforeTxt: '',
_afterTxt: '',
_showRealNum: false,
_showPercentage: false,
_emphasisSel: [],
_emphasis: {},
},
//扇区样式
itemStyle: {
borderWidth: 0,
borderColor: '#000000',
borderType: 'solid',
shadowBlur: 0,
shadowColor: '#000000e5',
_borderRadiusInner: 0,
_borderRadiusOuter: 0,
},
//总量信息
totalMsg: {
show: false,
_centerSetX: 50,
_centerSetY: 50,
centerTextSet: {
fontFamily: 'default',
text: null,
color: '#000000',
fontSize: 18,
sizeUnit: 'px', //px rem
fontBold: true, //加粗
fontItalic: false, //倾斜
},
beforeTextSet: {
fontFamily: 'default',
text: null,
color: '#000000',
fontSize: 14,
sizeUnit: 'px', //px rem
fontBold: false, //加粗
fontItalic: false, //倾斜
},
afterTextSet: {
fontFamily: 'default',
text: null,
color: '#000000',
fontSize: 14,
sizeUnit: 'px', //px rem
fontBold: false, //加粗
fontItalic: false, //倾斜
},
marginLeft: {
num: 4,
unit: 'px',
},
marginRight: {
num: 4,
unit: 'px',
},
tranBigNum: true,
bigNumPoint: 2,
alignItems: 'center',
},
}
}
}
},
{
title: "饼状图(面积模式)",
screenshot: require('./__screenshots__/chart-pie-1.png'),
schema: {
componentName: "ChartPie",
props: {
dataSource: [
{
"季度": "第一季度",
"数量": 2200,
},
{
"季度": "第二季度",
"数量": 2600,
},
{
"季度": "第三季度",
"数量": 1600,
},
],
contentParams: {
dataSetConfig: {
labelField: "季度",
valueField: "数量",
},
theme: {
backgroundColor: '#00000000',
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
},
usual: {},
//鼠标提示面板
tooltip: {
seeMore: false,
show: true,
trigger: 'item',
triggerOn: 'mousemove|click',
backgroundColor: '#ffffffb3',
borderColor: '#333333ff',
borderWidth: 0,
padding: 5,
textStyle: {
color: null,
},
_showPercentage: false,
},
//图例
legend: {
seeMore: true,
show: false,
type: 'plain', //plain scroll
icon: 'roundRect',
_position: 'top',
width: 'auto',
height: 'auto',
orient: 'horizontal',
align: 'auto',
itemGap: 10,
},
//饼图特殊
pieSpecial: {
seeMore: false,
_pieType: 'area',
_clockwise: 'clockwise',
_showAllLabel: false,
_labelLine: 'line',
_radiusInner: 35,
_radiusOuter: 75,
_centerSetX: '50%',
_centerSetY: '50%',
},
//标签
label: {
_setType: 'normal',
show: true,
_showPlan: 'normal', //normal pop
color: null,
position: 'outside',
_beforeTxt: '',
_afterTxt: '',
_showRealNum: true,
_showPercentage: true,
_emphasisSel: [],
_emphasis: {},
},
//扇区样式
itemStyle: {
borderWidth: 1,
borderColor: '#00000066',
borderType: 'dashed',
shadowBlur: 0,
shadowColor: '#000000e5',
_borderRadiusInner: 10,
_borderRadiusOuter: 15,
},
//总量信息
totalMsg: {
show: true,
_centerSetX: 50,
_centerSetY: 50,
centerTextSet: {
fontFamily: 'default',
text: null,
color: '#000000',
fontSize: 18,
sizeUnit: 'px', //px rem
fontBold: true, //加粗
fontItalic: false, //倾斜
},
beforeTextSet: {
fontFamily: 'default',
text: null,
color: '#000000',
fontSize: 14,
sizeUnit: 'px', //px rem
fontBold: false, //加粗
fontItalic: false, //倾斜
},
afterTextSet: {
fontFamily: 'default',
text: null,
color: '#000000',
fontSize: 14,
sizeUnit: 'px', //px rem
fontBold: false, //加粗
fontItalic: false, //倾斜
},
marginLeft: {
num: 4,
unit: 'px',
},
marginRight: {
num: 4,
unit: 'px',
},
tranBigNum: true,
bigNumPoint: 2,
alignItems: 'center',
},
}
}
}
}
];
export default {
...ChartPieMeta,
snippets
};