syber-lowcode-business-materials
Version:
syber-lowcode-business-materials
563 lines (556 loc) • 14.4 kB
JavaScript
//主题配置
function getThemeItems() {
return [{
title: "画布背景色",
name: 'contentParams.theme.backgroundColor',
supportVariable: false,
setter: 'ColorSetter'
}, {
title: "颜色组",
name: 'contentParams.theme.color',
supportVariable: false,
setter: {
componentName: 'ArraySetter',
props: {
itemSetter: 'ColorSetter'
}
}
}];
}
//坐标轴配置
function getAxisItems(preField) {
if (preField === void 0) {
preField = 'xAxis';
}
var items = [{
name: "contentParams." + preField + ".show",
title: "是否显示",
supportVariable: false,
defaultValue: true,
setter: 'BoolSetter'
}, {
name: "contentParams." + preField + ".splitLine.show",
title: "显示分割线",
supportVariable: false,
defaultValue: true,
setter: 'BoolSetter'
}, {
name: "contentParams." + preField + ".axisLabel.rotate",
title: "文案角度",
supportVariable: false,
setter: {
componentName: "NumberSetter",
isRequired: true,
initialValue: 0,
props: {
min: -180,
max: 180,
step: 1
}
}
}, {
name: "contentParams." + preField + ".name",
title: "坐标轴名称",
supportVariable: false,
setter: {
componentName: "StringSetter",
props: {
maxLength: 30
}
}
}, {
name: "contentParams." + preField + ".nameLocation",
title: "坐标轴名称位置",
supportVariable: false,
setter: {
componentName: "SelectSetter",
props: {
options: [{
title: '首部',
value: 'start'
}, {
title: '中间',
value: 'center'
}, {
title: '尾部',
value: 'end'
}]
},
initialValue: 'end'
}
}, {
name: "contentParams." + preField + ".nameGap",
title: "名称与轴线间距",
supportVariable: false,
setter: {
componentName: "NumberSetter",
isRequired: true,
initialValue: 15,
props: {
min: 0,
max: 30,
step: 1
}
}
}, {
name: "contentParams." + preField + ".splitLine.lineStyle.color",
title: "分割线颜色",
supportVariable: false,
setter: {
componentName: 'ArraySetter',
props: {
itemSetter: 'ColorSetter'
}
}
}, {
name: "contentParams." + preField + ".splitLine.lineStyle.type",
title: "分割线类型",
supportVariable: false,
setter: {
componentName: "SelectSetter",
props: {
options: [{
title: '实线',
value: 'solid'
}, {
title: '虚线',
value: 'dashed'
}, {
title: '点线',
value: 'dotted'
}]
},
initialValue: 'solid'
}
}, {
name: "contentParams." + preField + "._axisBeforeTxt",
title: "刻度标签前缀",
supportVariable: false,
setter: {
componentName: "StringSetter",
props: {
placeholder: "填写前缀文案",
maxLength: 20
}
},
extraProps: {
setValue: function setValue(target, value) {
var _axisBeforeTxt = target.node.getPropValue("contentParams." + preField + "._axisBeforeTxt");
var _axisAfterTxt = target.node.getPropValue("contentParams." + preField + "._axisAfterTxt");
var _timeLineFormatter = target.node.getPropValue("contentParams." + preField + "._timeLineFormatter");
if (_axisBeforeTxt || _axisAfterTxt) {
var t = (_axisBeforeTxt || '') + "{value}" + (_axisAfterTxt || '');
target.node.setPropValue("contentParams." + preField + ".axisLabel.formatter", t);
} else {
if (!_timeLineFormatter) {
target.node.setPropValue("contentParams." + preField + ".axisLabel.formatter", null);
} else {
target.node.setPropValue("contentParams." + preField + ".axisLabel.formatter", _timeLineFormatter);
}
}
}
}
}, {
name: "contentParams." + preField + "._axisAfterTxt",
title: "刻度标签后缀",
supportVariable: false,
setter: {
componentName: "StringSetter",
props: {
placeholder: "填写后缀文案",
maxLength: 20
}
},
extraProps: {
setValue: function setValue(target, value) {
var _axisBeforeTxt = target.node.getPropValue("contentParams." + preField + "._axisBeforeTxt");
var _axisAfterTxt = target.node.getPropValue("contentParams." + preField + "._axisAfterTxt");
var _timeLineFormatter = target.node.getPropValue("contentParams." + preField + "._timeLineFormatter");
if (_axisBeforeTxt || _axisAfterTxt) {
var t = (_axisBeforeTxt || '') + "{value}" + (_axisAfterTxt || '');
target.node.setPropValue("contentParams." + preField + ".axisLabel.formatter", t);
} else {
if (!_timeLineFormatter) {
target.node.setPropValue("contentParams." + preField + ".axisLabel.formatter", null);
} else {
target.node.setPropValue("contentParams." + preField + ".axisLabel.formatter", _timeLineFormatter);
}
}
}
}
}, {
name: "contentParams." + preField + "._timeLineFormatter",
title: "时间轴刻度标签",
supportVariable: false,
setter: {
componentName: "SelectSetter",
props: {
options: [{
title: '自动',
value: ''
}, {
title: '年-月-日',
value: '{yyyy}年{MMM}{d}日'
}, {
title: '年-月',
value: '{yyyy}年{MMM}'
}, {
title: '月-日',
value: '{MMM}{d}日'
}, {
title: '月-日 时',
value: '{MMM}{d}日 {HH}'
}, {
title: '月-日 时:分',
value: '{MMM}{d}日 {HH}:{mm}'
}, {
title: '时:分',
value: '{HH}:{mm}'
}, {
title: '时:分:秒',
value: '{HH}:{mm}:{ss}'
}, {
title: '星期',
value: '{eeee}'
}]
}
},
extraProps: {
setValue: function setValue(target, value) {
if (!value) {
target.node.setPropValue("contentParams." + preField + ".axisLabel.formatter", null);
} else {
target.node.setPropValue("contentParams." + preField + ".axisLabel.formatter", value);
}
}
}
}, {
name: "contentParams." + preField + ".axisLabel.formatter",
title: "刻度标签模板",
supportVariable: false,
setter: {
componentName: "StringSetter",
props: {
placeholder: "编写模板",
maxLength: 50
}
}
}];
if (preField === "xAxis") {
items.push({
name: "contentParams." + preField + ".position",
title: "x轴位置",
supportVariable: false,
setter: {
componentName: "SelectSetter",
props: {
options: [{
title: '顶部',
value: 'top'
}, {
title: '底部',
value: 'bottom'
}]
},
initialValue: 'bottom'
}
});
} else {
items.push({
name: "contentParams." + preField + ".position",
title: "y轴位置",
supportVariable: false,
setter: {
componentName: "SelectSetter",
props: {
options: [{
title: '左侧',
value: 'left'
}, {
title: '右侧',
value: 'right'
}]
},
initialValue: 'left'
}
});
}
return items;
}
//通用配置
function getUsualItems() {
return [{
name: 'contentParams.usual._categoryWhere',
title: "维度轴选择",
supportVariable: false,
setter: {
componentName: "SelectSetter",
props: {
options: [{
title: 'x轴',
value: 'x'
}, {
title: 'y轴',
value: 'y'
}]
},
initialValue: 'x'
}
}, {
title: "网格",
display: 'block',
type: 'group',
items: [{
name: 'contentParams.usual.grid.top',
title: {
label: '上',
tip: '自定义填写，如10px，10%，top，middle，bottom'
},
supportVariable: false,
setter: {
componentName: "StringSetter",
props: {
placeholder: "请选择或填写"
},
initialValue: '10px'
}
}, {
name: 'contentParams.usual.grid.bottom',
title: {
label: '下',
tip: '自定义填写，如10px，10%，top，middle，bottom'
},
supportVariable: false,
setter: {
componentName: "StringSetter",
props: {
placeholder: "请选择或填写"
},
initialValue: '10px'
}
}, {
name: 'contentParams.usual.grid.left',
title: {
label: '左',
tip: '自定义填写，如10px，10%，left，center，right'
},
supportVariable: false,
setter: {
componentName: "StringSetter",
props: {
placeholder: "请选择或填写"
},
initialValue: '10px'
}
}, {
name: 'contentParams.usual.grid.right',
title: {
label: '右',
tip: '自定义填写，如10px，10%，left，center，right'
},
supportVariable: false,
setter: {
componentName: "StringSetter",
props: {
placeholder: "请选择或填写"
},
initialValue: '10px'
}
}, {
name: 'contentParams.usual.grid.containLabel',
title: {
label: '刻度标签自适应',
tip: '计算内边距时是否包含刻度标签所占空间'
},
supportVariable: false,
defaultValue: true,
setter: 'BoolSetter'
}]
}];
}
//数据标签配置
function getDataLabelItems(diySet, preField) {
if (diySet === void 0) {
diySet = {};
}
if (preField === void 0) {
preField = 'label';
}
var items = [{
name: "contentParams." + preField + ".show",
title: "是否显示",
supportVariable: false,
defaultValue: true,
setter: 'BoolSetter'
}, {
name: "contentParams." + preField + "._showPlan",
title: "显示方案",
supportVariable: false,
setter: {
componentName: "SelectSetter",
props: {
options: diySet.labelShowPlanOptions || [{
title: '普通',
value: 'normal'
}, {
title: '气泡',
value: 'pop'
}, {
title: '气泡(深色)',
value: 'popDark'
}]
},
initialValue: 'normal'
}
}, {
name: "contentParams." + preField + ".color",
title: {
label: "颜色",
tip: "不设置，则自动继承线条颜色"
},
supportVariable: false,
setter: 'ColorSetter'
}, {
name: "contentParams." + preField + ".position",
title: "位置",
supportVariable: false,
setter: {
componentName: "SelectSetter",
props: {
options: diySet.labelPositionOptions || [{
title: '上',
value: 'top'
}, {
title: '下',
value: 'bottom'
}, {
title: '左',
value: 'left'
}, {
title: '右',
value: 'right'
}]
},
initialValue: 'top'
}
}, {
name: "contentParams." + preField + "._beforeTxt",
title: "前缀",
supportVariable: false,
setter: "StringSetter"
}, {
name: "contentParams." + preField + "._afterTxt",
title: "后缀",
supportVariable: false,
setter: "StringSetter"
}];
if (diySet.extendItems) {
items = items.concat(diySet.extendItems);
}
//emphasis - 高亮配置暂不实现
return items;
}
//图例配置
function getLegendItems() {
return [{
name: 'contentParams.legend.show',
title: "是否显示",
supportVariable: false,
defaultValue: true,
setter: 'BoolSetter'
}, {
name: 'contentParams.legend._position',
title: "位置",
supportVariable: false,
setter: {
componentName: "SelectSetter",
props: {
options: [{
title: '上',
value: 'top'
}, {
title: '下',
value: 'bottom'
}, {
title: '左',
value: 'left'
}, {
title: '右',
value: 'right'
}, {
title: '左上',
value: 'topLeft'
}, {
title: '右上',
value: 'topRight'
}, {
title: '左下',
value: 'bottomLeft'
}, {
title: '右下',
value: 'bottomRight'
}, {
title: '完全居中',
value: 'center'
}]
},
initialValue: 'top'
}
}, {
name: 'contentParams.legend.icon',
title: "图形",
supportVariable: false,
setter: {
componentName: "SelectSetter",
props: {
options: [{
title: '圆',
value: 'circle'
}, {
title: '矩形',
value: 'rect'
}, {
title: '圆角矩形',
value: 'roundRect'
}, {
title: '三角',
value: 'triangle'
}, {
title: '菱形',
value: 'diamond'
}, {
title: '箭头',
value: 'arrow'
}, {
title: '透明',
value: 'none'
}]
},
initialValue: 'circle'
}
}];
}
//配置自定义转换函数
function getFormatOptionCodeItem(funcName) {
return {
name: 'formatOptionCode',
title: "自定义转换代码",
supportVariable: false,
propType: 'func',
setter: {
componentName: 'FunctionSetter',
props: {
template: funcName + '(option, resultData, ${extParams}){\n// option:当前Echarts的配置参数\n// resultData:数据集返回的数据\nreturn option;\n}'
}
}
};
}
export default {
getThemeItems: getThemeItems,
getAxisItems: getAxisItems,
getUsualItems: getUsualItems,
getDataLabelItems: getDataLabelItems,
getLegendItems: getLegendItems,
getFormatOptionCodeItem: getFormatOptionCodeItem
};
export { getThemeItems, getAxisItems, getUsualItems, getDataLabelItems, getLegendItems, getFormatOptionCodeItem };