syber-lowcode-business-materials
Version:
syber-lowcode-business-materials
538 lines (537 loc) • 13.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _echartConItem = require("../../src/utils/metaConfigHelp/echartConItem");
var ChartBarMeta = {
priority: 21,
componentName: "ChartBar",
group: '仪表板',
category: '图表',
title: "柱状图",
docUrl: "",
screenshot: "",
configure: {
props: [{
title: "数据源",
display: 'block',
type: 'group',
items: [{
name: 'dataSource',
title: {
label: "数据源"
},
setter: 'JsonSetter',
supportVariable: true,
isRequired: true
}]
}, {
title: "数据对接设置",
display: 'block',
type: 'group',
items: [{
name: "contentParams.dataSetConfig.labelField",
title: "标签属性",
supportVariable: true,
setter: {
componentName: "StringSetter",
props: {
placeholder: "填写维度对接字段"
}
}
}, {
name: "contentParams.dataSetConfig.lineArr",
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.barSpecial.showBackground',
title: "显示柱条的底色",
supportVariable: false,
defaultValue: true,
setter: 'BoolSetter'
}, {
name: 'contentParams.barSpecial.backgroundStyle.color',
title: {
label: "底色颜色",
tip: "不设置，则自动继承线条颜色"
},
supportVariable: false,
setter: 'ColorSetter'
}, {
name: 'contentParams.barSpecial._barGap',
title: {
label: "不同系列柱间距(%)",
tip: "为负数时，将发生重叠"
},
supportVariable: false,
setter: {
componentName: "NumberSetter",
isRequired: true,
initialValue: 500,
props: {
min: -100,
max: 100,
step: 1
}
}
}, {
title: "数值最小值配置",
display: 'block',
type: 'group',
items: [{
name: 'contentParams.barSpecial._minSet.type',
title: "配置方式",
supportVariable: false,
setter: {
componentName: "SelectSetter",
props: {
options: [{
title: '不设定',
value: 'none'
}, {
title: '手动',
value: 'set'
}, {
title: '自动',
value: 'auto'
}]
},
initialValue: 'none'
}
}, {
name: 'contentParams.barSpecial._minSet.setNum',
title: '设定最小值',
supportVariable: false,
setter: {
componentName: 'NumberSetter',
props: {
min: -10000000,
max: 10000000
},
initialValue: 0
},
condition: {
type: 'JSFunction',
value: 'target => target.getProps().getPropValue("contentParams.barSpecial._minSet.type") === "set"'
}
}, {
name: 'contentParams.barSpecial._minSet.autoNum',
title: '设定最小比例（%）',
supportVariable: false,
setter: {
componentName: 'NumberSetter',
props: {
min: 0,
max: 100,
step: 1
},
initialValue: 0
},
condition: {
type: 'JSFunction',
value: 'target => target.getProps().getPropValue("contentParams.barSpecial._minSet.type") === "auto"'
}
}, {
name: 'contentParams.barSpecial._minSet.autoStep',
title: '设定步长',
supportVariable: false,
setter: {
componentName: 'NumberSetter',
props: {
min: 0.01,
max: 10000000,
step: 1,
precision: 2
},
initialValue: 1
},
condition: {
type: 'JSFunction',
value: 'target => target.getProps().getPropValue("contentParams.barSpecial._minSet.type") === "auto"'
}
}]
}, {
name: 'contentParams.barSpecial._timeAxis',
title: {
label: "采用时间轴模式",
tip: "时间轴模式的数据需要特殊格式"
},
supportVariable: false,
defaultValue: false,
setter: 'BoolSetter'
}]
}, {
title: "主题配置",
display: 'block',
type: 'group',
items: (0, _echartConItem.getThemeItems)()
}, {
title: "布局配置",
display: 'block',
type: 'group',
items: (0, _echartConItem.getUsualItems)()
}, {
title: "数据标签",
display: 'block',
type: 'group',
items: (0, _echartConItem.getDataLabelItems)({
labelPositionOptions: [{
title: '上',
value: 'top'
}, {
title: '下',
value: 'bottom'
}, {
title: '左',
value: 'left'
}, {
title: '右',
value: 'right'
}, {
title: '内嵌',
value: 'inside'
}, {
title: '顶部内嵌',
value: 'insideTop'
}, {
title: '底部内嵌',
value: 'insideBottom'
}, {
title: '左侧内嵌',
value: 'insideLeft'
}, {
title: '右侧内嵌',
value: 'insideRight'
}]
})
}, {
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: (0, _echartConItem.getLegendItems)()
}, {
title: "X 轴配置",
display: 'block',
type: 'group',
items: (0, _echartConItem.getAxisItems)("xAxis")
}, {
title: "Y 轴配置",
display: 'block',
type: 'group',
items: (0, _echartConItem.getAxisItems)("yAxis")
}, {
title: "代码自定义",
display: 'block',
type: 'group',
items: [(0, _echartConItem.getFormatOptionCodeItem)("formatChartBarOptionFunc")]
}],
supports: {
style: true,
events: [{
name: 'onChartBarItemClick',
template: "\nonChartBarItemClick(item,${extParams}){\n// 点击图表项后的回调\nconsole.log('onChartBarItemClick', item);}"
}]
},
component: {}
}
};
var snippets = [{
title: "柱状图",
screenshot: require("./__screenshots__/chart-bar-1.png"),
schema: {
componentName: "ChartBar",
props: {
dataSource: [{
"季度": "第一季度",
"A产品": 2200,
"B产品": 2900
}, {
"季度": "第二季度",
"A产品": 2600,
"B产品": 2400
}],
contentParams: {
dataSetConfig: {
labelField: "季度",
lineArr: [{
index: 0,
field: "A产品"
}, {
index: 1,
field: "B产品"
}]
},
theme: {
backgroundColor: '#00000000',
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
},
usual: {
_categoryWhere: 'x',
grid: {
top: '10px',
bottom: '10px',
left: '10px',
right: '10px',
containLabel: true
}
},
tooltip: {
seeMore: false,
show: true,
trigger: 'axis',
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
},
xAxis: {
seeMore: false,
show: true,
showSplitLine: false,
position: 'bottom',
name: null,
nameLocation: 'end',
nameGap: 15,
axisLabel: {
rotate: 0
}
},
yAxis: {
seeMore: false,
show: true,
showSplitLine: false,
position: 'left',
name: null,
nameLocation: 'end',
nameGap: 15,
axisLabel: {
rotate: 0
}
},
//柱状图特殊
barSpecial: {
showBackground: false,
backgroundStyle: {
color: '#b4b4b455'
},
_barGap: 30,
_minSet: {
type: 'none',
autoNum: 10,
setNum: 0,
autoStep: 1
},
_timeAxis: false
},
//标签
label: {
_setType: 'normal',
show: false,
_showPlan: 'normal',
//normal pop
color: '#000000',
position: 'top',
_beforeTxt: '',
_afterTxt: '',
_emphasisSel: [],
_emphasis: {}
}
}
}
}
}, {
title: "柱状图(时间轴)",
screenshot: require("./__screenshots__/chart-bar-1.png"),
schema: {
componentName: "ChartBar",
props: {
dataSource: [{
"日期": 1742368355718,
"A产品": 2200,
"B产品": 2900
}, {
"日期": 1742454755718,
"A产品": 2600,
"B产品": 2400
}, {
"日期": 1742541155718,
"A产品": 2300,
"B产品": 1100
}],
contentParams: {
dataSetConfig: {
labelField: "日期",
lineArr: [{
index: 0,
field: "A产品"
}, {
index: 1,
field: "B产品"
}]
},
//主题
theme: {
backgroundColor: '#00000000',
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
},
usual: {
_categoryWhere: 'x',
grid: {
top: '10px',
bottom: '10px',
left: '10px',
right: '10px',
containLabel: true
}
},
tooltip: {
seeMore: false,
show: true,
trigger: 'axis',
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
},
xAxis: {
seeMore: false,
show: true,
showSplitLine: false,
position: 'bottom',
name: null,
nameLocation: 'end',
nameGap: 15,
axisLabel: {
rotate: 0,
formatter: "{MMM}{d}日 {HH}:{mm}"
}
},
yAxis: {
seeMore: false,
show: true,
showSplitLine: false,
position: 'left',
name: null,
nameLocation: 'end',
nameGap: 15,
axisLabel: {
rotate: 0
}
},
//柱状图特殊
barSpecial: {
showBackground: false,
backgroundStyle: {
color: '#b4b4b455'
},
_barGap: 30,
_minSet: {
type: 'none',
autoNum: 10,
setNum: 0,
autoStep: 1
},
_timeAxis: true
},
//标签
label: {
_setType: 'normal',
show: false,
_showPlan: 'normal',
//normal pop
color: '#000000',
position: 'top',
_beforeTxt: '',
_afterTxt: '',
_emphasisSel: [],
_emphasis: {}
}
}
}
}
}];
var _default = exports["default"] = (0, _extends2["default"])({}, ChartBarMeta, {
snippets: snippets
});