import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types'; import { default as ColorArraySetter } from '../setter/ColorArraySetter'; import { default as CenterTabsSetter } from '../setter/CenterTabsSetter'; import Api from './api'; const BarLineGroupMeta: IPublicTypeComponentMetadata = { componentName: 'BarLineGroup', title: '柱状折线图', docUrl: '', screenshot: '', devMode: 'proCode', category: '图表', group: '精选组件', npm: { package: 'temp-materials', exportName: 'BarLineGroup', main: 'src\\index.tsx', destructuring: true, subName: '', }, configure: { props: [ // 常用配置 { title: '常用配置', type: 'group', display: 'accordion', items: [ // 柱体圆角 { name: 'barCircle', title: { label: '柱体圆角', tip: '是否开启柱体圆角(条形图不生效)', }, condition: (target) => { return !target.parent.getPropValue('isBar'); }, setter: { componentName: 'BoolSetter', isRequired: true, initialValue: true, }, }, // 智能显示|自定义 { name: 'styleType', title: { label: '柱体样式', tip: '可选择默认样式或者自定义柱体样式', }, setter: { componentName: 'RadioGroupSetter', props: { options: [ { title: '智能显示', value: 'smart' }, { title: '自定义', value: 'custom' }, ], }, initialValue: 'smart', }, }, // 柱体样式 { name: 'theme', display: 'plain', setter: { componentName: 'ObjectSetter', props: { config: { items: [ { name: 'size', title: { label: '柱形粗细', tip: '设置柱形图粗细,范围0-100,为空时默认值15', }, condition: (target) => { return target.parent.parent.getPropValue('styleType') === 'custom'; }, setter: { defaultValue: 15, componentName: 'NumberSetter', prop: { min: 0, max: 100, }, }, }, { name: 'maxColumnWidth', title: { label: '最大宽度', tip: '设置柱体图最大宽度限制,范围0-100', }, condition: (target) => { return target.parent.parent.getPropValue('styleType') === 'custom'; }, setter: { defaultValue: 20, componentName: 'NumberSetter', prop: { min: 0, max: 100, }, }, }, { name: 'minColumnWidth', title: { label: '最小宽度', tip: '设置柱体图最小宽度限制,范围0-100', }, condition: (target) => { return target.parent.parent.getPropValue('styleType') === 'custom'; }, setter: { defaultValue: 10, componentName: 'NumberSetter', prop: { min: 0, max: 100, }, }, }, ], }, }, initialValue: { maxColumnWidth: 20, minColumnWidth: 10, size: 15, }, }, }, // 折线样式 { name: 'lineTheme', display: 'plain', setter: { componentName: 'ObjectSetter', props: { config: { items: [ { title: { label: '曲线', tip: '开启后线条变为平滑曲线,默认为折线段', }, name: 'smooth', type: 'field', setter: { componentName: 'BoolSetter', isRequired: false, initialValue: false, }, }, { title: { label: '展示点', tip: '开启后,在数值位置显示标记点', }, name: 'showDot', setter: { componentName: 'BoolSetter', isRequired: false, initialValue: true, }, }, { title: { label: '点大小', tip: '设置标记点尺寸,范围2-10', }, name: 'dotSize', condition: (target) => { return target.parent.getPropValue('showDot'); }, setter: { componentName: 'NumberSetter', isRequired: false, defaultValue: 4, props: { max: 10, min: 2, }, }, }, { name: 'dotShape', title: { label: '点形状', tip: '设置标记点形状', }, defaultValue: 'circle', condition: (target) => { return target.parent.getPropValue('showDot'); }, setter: { componentName: 'SelectSetter', props: { options: [ { title: '实心圆形', value: 'circle' }, { title: '空心圆形', value: 'hollow-circle' }, { title: '正方形', value: 'square' }, { title: '三角形', value: 'triangle' }, ], }, }, }, { title: { label: '线条粗细', tip: '设置折线图线段粗细,范围2-10', }, name: 'lineSize', defaultValue: 2, setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 2, props: { max: 10, min: 2, }, }, condition: (target) => { return target.parent.getPropValue('showLine'); }, }, ], }, }, initialValue: { smooth: true, dotSize: 4, dotShape: 'circle', showDot: true, lineSize: 2, }, }, }, //系列颜色 { name: 'color', title: { label: '图表套色', tip: '设置图表的系列颜色,按系列顺序一一对应', }, setter: { componentName: ColorArraySetter, isRequired: false, initialValue: '#2A8BFF,#F99300,#2DA84F,#FCD000,#7367EE,#72C4EC,#6D748F,#F9785A,#1F7D9A,#FBAAA6', }, }, // 标题 { title: { label: '显示标题', tip: '是否显示标题', }, name: 'hasTitle', setter: { componentName: 'BoolSetter', isRequired: true, initialValue: true, }, }, // 标题文本 { title: { label: '标题文本', tip: '需要展示的标题文本,不填时,取所选数据集为标题', }, name: 'titleText', setter: { componentName: 'StringSetter', initialValue: '', }, }, ], }, // 坐标轴 { title: '坐标轴', type: 'group', display: 'accordion', items: [ { display: 'plain', name: 'axisType', setter: { componentName: CenterTabsSetter, }, }, // x轴 { title: '横坐标', name: 'xAxis', condition: (target) => { return target.parent.getPropValue('axisType') === 'xAxis'; }, display: 'plain', setter: { componentName: 'ObjectSetter', props: { config: { items: [ { title: { label: '显示横轴', tip: '控制横轴显示和隐藏', }, name: 'visible', setter: { componentName: 'BoolSetter', isRequired: false, initialValue: true, }, }, { title: { label: '标题', tip: '控制标题显示和隐藏', }, name: 'showTitle', condition: (target) => { return target.parent.getPropValue('visible'); }, setter: { componentName: 'BoolSetter', isRequired: false, initialValue: false, }, }, { title: { label: '标题内容', tip: '设置横轴标题内容文本', }, name: 'title', condition: (target) => { return ( target.parent.getPropValue('showTitle') && target.parent.getPropValue('visible') ); }, setter: { componentName: 'StringSetter', isRequired: false, initialValue: '横轴标题', }, }, { title: { label: '轴线', tip: '是否显示横轴轴线', }, name: 'line', condition: (target) => { return target.parent.getPropValue('visible'); }, setter: { componentName: 'BoolSetter', isRequired: false, initialValue: true, }, }, { title: { label: '刻度线', tip: '是否显示横轴刻度线', }, name: 'tickLine', condition: (target) => { return target.parent.getPropValue('visible'); }, setter: { componentName: 'BoolSetter', isRequired: false, initialValue: true, }, }, { title: { label: '网格线', tip: '是否显示横轴网格线', }, name: 'grid', condition: (target) => { return target.parent.getPropValue('visible'); }, setter: { componentName: 'BoolSetter', isRequired: false, initialValue: false, }, }, { title: { label: '轴标签', tip: '是否显示横轴轴标签样式', }, name: 'label', condition: (target) => { return target.parent.getPropValue('visible'); }, setter: { componentName: 'BoolSetter', isRequired: false, initialValue: true, }, }, { title: { label: '标签样式', tip: '选择横轴轴标签样式设置方式', }, name: 'labelType', condition: (target) => { return ( target.parent.getPropValue('visible') && target.parent.getPropValue('label') ); }, setter: { componentName: 'RadioGroupSetter', isRequired: false, initialValue: 'defalut', props: { options: [ { label: '默认显示', value: 'defalut' }, { label: '自定义', value: 'custom' }, ], }, }, }, { title: { label: '颜色', tip: '设置横轴轴标签颜色', }, name: 'labelColor', condition: (target) => { return ( target.parent.getPropValue('visible') && target.parent.getPropValue('labelType') === 'custom' ); }, setter: { componentName: 'ColorSetter', isRequired: false, initialValue: '#171A1D', }, }, { title: { label: '大小', tip: '设置横轴轴标签文字大小', }, name: 'labelSize', condition: (target) => { return ( target.parent.getPropValue('visible') && target.parent.getPropValue('labelType') === 'custom' ); }, setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 14, props: { min: 10, max: 36, }, }, }, { title: { label: '最大长度', tip: '设置横轴轴标签最大长度展示方式', }, name: 'labelLength', condition: (target) => { return ( target.parent.getPropValue('visible') && target.parent.getPropValue('labelType') === 'custom' ); }, setter: { componentName: 'RadioGroupSetter', isRequired: false, initialValue: 'percent', props: { options: [ { label: '百分比', value: 'percent' }, { label: '固定值', value: 'fixed' }, ], }, }, }, { title: { label: '占比', tip: '设置横轴轴标签最大长度占比', }, name: 'labelPercentWidth', condition: (target) => { return ( target.parent.getPropValue('visible') && target.parent.getPropValue('labelType') === 'custom' && target.parent.getPropValue('labelLength') === 'percent' ); }, setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 30, props: { min: 0, }, }, }, { title: { label: '长度', tip: '设置横轴轴标签长度', }, name: 'labelFixedWidth', condition: (target) => { return ( target.parent.getPropValue('visible') && target.parent.getPropValue('labelType') === 'custom' && target.parent.getPropValue('labelLength') === 'fixed' ); }, setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 100, props: { min: 0, }, }, }, { title: { label: '自动旋转', tip: '横轴轴标签文本角度是否自动旋转', }, name: 'autoRotate', condition: (target) => { return ( target.parent.getPropValue('visible') && target.parent.getPropValue('labelType') === 'custom' ); }, setter: { componentName: 'BoolSetter', isRequired: false, initialValue: true, }, }, { title: { label: '旋转角度', tip: '设置横轴轴标签文本角度', }, name: 'labelRotateAngle', condition: (target) => { return ( target.parent.getPropValue('visible') && target.parent.getPropValue('labelType') === 'custom' && !target.parent.getPropValue('autoRotate') ); }, setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 0, props: { min: 0, max: 360, }, }, }, { title: { label: '自动稀疏', tip: '是否开启横轴标签文本自动稀疏', }, name: 'autoHide', condition: (target) => { return ( target.parent.getPropValue('visible') && target.parent.getPropValue('labelType') === 'custom' ); }, setter: { componentName: 'BoolSetter', isRequired: false, initialValue: true, }, }, ], }, }, }, }, // y轴 { title: '横坐标', name: 'yAxis', condition: (target) => { return target.parent.getPropValue('axisType') === 'yAxis'; }, display: 'plain', setter: { componentName: 'ObjectSetter', props: { config: { items: [ { title: { label: '显示纵轴', tip: '是否显示纵轴', }, name: 'visible', setter: { componentName: 'BoolSetter', isRequired: false, initialValue: true, }, }, { title: { label: '标题', tip: '是否显示纵轴标题', }, name: 'showTitle', condition: (target) => { return target.parent.getPropValue('visible'); }, setter: { componentName: 'BoolSetter', isRequired: false, initialValue: false, }, }, { title: { label: '标题内容', tip: '设置纵轴标题内容文本', }, name: 'title', condition: (target) => { return ( target.parent.getPropValue('showTitle') && target.parent.getPropValue('visible') ); }, setter: { componentName: 'StringSetter', isRequired: false, initialValue: '横轴标题', }, }, { title: { label: '轴线', tip: '是否显示纵轴轴线', }, name: 'line', condition: (target) => { return target.parent.getPropValue('visible'); }, setter: { componentName: 'BoolSetter', isRequired: false, initialValue: true, }, }, { title: { label: '刻度线', tip: '是否显示纵轴刻度线', }, name: 'tickLine', condition: (target) => { return target.parent.getPropValue('visible'); }, setter: { componentName: 'BoolSetter', isRequired: false, initialValue: true, }, }, { title: { label: '网格线', tip: '是否显示纵轴网格线', }, name: 'grid', condition: (target) => { return target.parent.getPropValue('visible'); }, setter: { componentName: 'BoolSetter', isRequired: false, initialValue: false, }, }, { title: { label: '轴标签', tip: '是否显示纵轴轴标签样式', }, name: 'label', condition: (target) => { return target.parent.getPropValue('visible'); }, setter: { componentName: 'BoolSetter', isRequired: false, initialValue: true, }, }, { title: { label: '标签样式', tip: '选择纵轴轴标签样式设置方式', }, name: 'labelType', condition: (target) => { return ( target.parent.getPropValue('visible') && target.parent.getPropValue('label') ); }, setter: { componentName: 'RadioGroupSetter', isRequired: false, initialValue: 'defalut', props: { options: [ { label: '默认显示', value: 'defalut' }, { label: '自定义', value: 'custom' }, ], }, }, }, { title: { label: '颜色', tip: '设置纵轴轴标签颜色', }, name: 'labelColor', condition: (target) => { return ( target.parent.getPropValue('visible') && target.parent.getPropValue('labelType') === 'custom' ); }, setter: { componentName: 'ColorSetter', isRequired: false, initialValue: '#171A1D', }, }, { title: { label: '大小', tip: '设置纵轴轴标签文字大小', }, name: 'labelSize', condition: (target) => { return ( target.parent.getPropValue('visible') && target.parent.getPropValue('labelType') === 'custom' ); }, setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 14, props: { min: 10, max: 36, }, }, }, { title: { label: '最大长度', tip: '设置纵轴轴标签最大长度展示方式', }, name: 'labelLength', condition: (target) => { return ( target.parent.getPropValue('visible') && target.parent.getPropValue('labelType') === 'custom' ); }, setter: { componentName: 'RadioGroupSetter', isRequired: false, initialValue: 'percent', props: { options: [ { label: '百分比', value: 'percent' }, { label: '固定值', value: 'fixed' }, ], }, }, }, { title: { label: '占比', tip: '设置纵轴轴标签最大长度占比', }, name: 'labelPercentWidth', condition: (target) => { return ( target.parent.getPropValue('visible') && target.parent.getPropValue('labelType') === 'custom' && target.parent.getPropValue('labelLength') === 'percent' ); }, setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 30, props: { min: 0, }, }, }, { title: { label: '长度', tip: '设置纵轴轴标签长度', }, name: 'labelFixedWidth', condition: (target) => { return ( target.parent.getPropValue('visible') && target.parent.getPropValue('labelType') === 'custom' && target.parent.getPropValue('labelLength') === 'fixed' ); }, setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 100, props: { min: 0, }, }, }, { title: { label: '自动旋转', tip: '纵轴轴标签文本角度是否自动旋转', }, name: 'autoRotate', condition: (target) => { return ( target.parent.getPropValue('visible') && target.parent.getPropValue('labelType') === 'custom' ); }, setter: { componentName: 'BoolSetter', isRequired: false, initialValue: true, }, }, { title: { label: '旋转角度', tip: '设置纵轴轴标签文本角度', }, name: 'labelRotateAngle', condition: (target) => { return ( target.parent.getPropValue('visible') && target.parent.getPropValue('labelType') === 'custom' && !target.parent.getPropValue('autoRotate') ); }, setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 0, props: { min: 0, max: 360, }, }, }, { title: { label: '自动稀疏', tip: '是否开启纵轴标签文本自动稀疏', }, name: 'autoHide', condition: (target) => { return ( target.parent.getPropValue('visible') && target.parent.getPropValue('labelType') === 'custom' ); }, setter: { componentName: 'BoolSetter', isRequired: false, initialValue: true, }, }, { title: { label: '最小值', tip: '设置纵轴可显示数值的最小值', }, name: 'min', condition: (target) => { return target.parent.getPropValue('visible'); }, setter: { componentName: 'NumberSetter', isRequired: false, props: { min: 0, }, }, }, { title: { label: '最大值', tip: '设置纵轴可显示数值的最大值', }, name: 'max', condition: (target) => { return target.parent.getPropValue('visible'); }, setter: { componentName: 'NumberSetter', isRequired: false, props: { min: 0, }, }, }, { title: { label: '刻度数', tip: '设置纵轴分段刻度数', }, name: 'tickCount', condition: (target) => { return target.parent.getPropValue('visible'); }, setter: { componentName: 'NumberSetter', isRequired: false, props: { min: 0, }, initialValue: 5, }, }, ], }, }, isRequired: true, }, }, ], }, // 图例 { title: '图例', display: 'accordion', name: 'legend', setter: { componentName: 'ObjectSetter', props: { config: { items: [ { title: { label: '显示图例', tip: '是否显示图表图例', }, name: 'visible', setter: { componentName: 'BoolSetter', isRequired: false, initialValue: true, }, }, // 显示位置 { title: { label: '显示位置', tip: '设置图例的展示位置', }, name: 'position', condition: (target) => { return target.parent.getPropValue('visible'); }, setter: [ { componentName: 'SelectSetter', props: { options: [ { title: '上', value: 'top' }, { title: '上左', value: 'top-left' }, { title: '上右', value: 'top-right' }, { title: '左', value: 'left' }, { title: '左上', value: 'left-top' }, { title: '左下', value: 'left-bottom' }, { title: '右', value: 'right' }, { title: '右上', value: 'right-top' }, { title: '右下', value: 'right-bottom' }, { title: '下', value: 'bottom' }, { title: '下左', value: 'bottom-left' }, { title: '下右', value: 'bottom-right' }, ], }, }, ], defaultValue: 'bottom', }, ], }, }, }, }, // 标签数据 { title: '标签数据', name: 'label', display: 'accordion', setter: { componentName: 'ObjectSetter', props: { config: { items: [ // 显示图例 { title: { label: '显示标签', tip: '是否在图表中显示标签', }, name: 'visible', setter: { componentName: 'BoolSetter', isRequired: true, initialValue: true, }, }, { title: { label: '展示样式', tip: '选择智能显示样式或自定义配置标签样式', }, name: 'displayType', setter: [ { componentName: 'RadioGroupSetter', props: { options: [ { title: '智能显示', value: 'smart' }, { title: '自定义', value: 'custom' }, ], }, }, ], defaultValue: 'smart', }, { name: 'style', condition: (target) => { return ( target.parent.getPropValue('visible') && target.parent.getPropValue('displayType') === 'custom' ); }, display: 'plain', setter: { componentName: 'ObjectSetter', props: { config: { items: [ { title: { title: '标签字号', tip: '设置标签的字体大小,范围10-30', }, name: 'fontSize', setter: { componentName: 'NumberSetter', isRequired: false, props: { min: 10, max: 30, }, initialValue: 12, }, }, { title: { label: '自动颜色', tip: '标签颜色是否使用默认值', }, name: 'autoFill', setter: { componentName: 'BoolSetter', isRequired: true, initialValue: true, }, }, { title: { label: '文本颜色', tip: '设置标签文本颜色', }, name: 'fill', condition: (target) => { return !target.parent.getPropValue('autoFill'); }, setter: { componentName: 'ColorSetter', isRequired: false, initialValue: '#000000', }, }, { title: { label: '自动位置', tip: '是否根据布局动态匹配标签位置', }, name: 'autoPosition', setter: { componentName: 'BoolSetter', isRequired: true, initialValue: true, }, }, { title: { label: '显示位置', tip: '自主设置文本位置', }, name: 'position', condition: (target) => { return !target.parent.getPropValue('autoPosition'); }, setter: [ { componentName: 'SelectSetter', props: { options: [ { title: '顶部', value: 'top' }, { title: '中间', value: 'middle' }, { title: '底部', value: 'bottom' }, { title: '左边', value: 'left' }, { title: '右边', value: 'right' }, ], }, }, ], defaultValue: 'middle', }, ], }, }, }, }, ], }, }, }, }, // 提示信息 { title: '提示信息', name: 'tooltip', display: 'accordion', setter: { componentName: 'ObjectSetter', props: { config: { items: [ { title: { label: '开启', tip: '是否开启提示信息', }, name: 'visible', setter: { componentName: 'BoolSetter', isRequired: false, }, defaultValue: true, }, ], }, }, }, }, ], supports: { style: true, }, component: {}, advanced: { context: { dataSourceProps: [ { label: '横轴', props: 'xaxis', limit: 1 }, { label: '纵轴(柱)', props: 'yaxish', limit: 99 }, { label: '纵轴(线)', props: 'yaxisl', limit: 99 }, // { label: '参考线', props: 'line', limit: 99 }, ], datasetProps: [ { label: '条件过滤', props: 'filter', type: 'filter_btn' }, { label: '显示前', props: 'limit', type: 'num_limit' }, ], }, }, }, }; const snippets: IPublicTypeSnippet[] = [ { title: '柱状折线图', screenshot: '', schema: { componentName: 'BarLineGroup', props: { data: Api.defalutData, color: '#2A8BFF,#F99300,#2DA84F,#FCD000,#7367EE,#72C4EC,#6D748F,#F9785A,#1F7D9A,#FBAAA6', adjust: { type: 'dodge', }, barCircle: true, lineTheme: { smooth: true, showDot: true, dotSize: 4, dotShape: 'hollow-circle', lineSize: 2, }, yAxis: { visible: true, showTitle: false, title: '纵轴标题', line: true, tickLine: true, grid: false, label: true, labelType: 'defalut', labelColor: '#171A1D', labelSize: 14, labelLength: 'percent', labelPercentWidth: 30, labelFixedWidth: 100, autoRotate: true, autoHide: true, labelRotateAngle: 0, min: null, max: null, tickCount: 5, hasTitle: true, titleText: '', }, }, }, }, ]; export default { ...BarLineGroupMeta, snippets, };