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 };