syber-lowcode-business-materials
Version:
syber-lowcode-business-materials
737 lines (732 loc) • 20.2 kB
text/typescript
import {IPublicTypeComponentMetadata, IPublicTypeSnippet} from '@alilc/lowcode-types';
import {
getThemeItems,
getAxisItems,
getUsualItems,
getDataLabelItems,
getLegendItems,
getFormatOptionCodeItem
} from '../../src/utils/metaConfigHelp/echartConItem';
const ChartLineMeta: IPublicTypeComponentMetadata = {
priority: 22,
componentName: "ChartLine",
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.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.lineSpecial._transition',
title: "过渡效果",
supportVariable: false,
setter: {
componentName: "SelectSetter",
props: {
options: [
{
title: '折线',
value: 'normal',
},
{
title: '平滑',
value: 'smooth',
},
{
title: '阶梯',
value: 'step',
},
],
},
initialValue: 'normal',
}
},
{
name: 'contentParams.lineSpecial._averageLine',
title: "显示平均线",
supportVariable: false,
defaultValue: false,
setter: 'BoolSetter',
},
{
name: 'contentParams.lineSpecial._maxMinPoint',
title: "显示极值点",
supportVariable: false,
defaultValue: false,
setter: 'BoolSetter',
},
{
name: 'contentParams.lineSpecial._symbolSet.showSymbol',
title: "显示数据点标记",
supportVariable: false,
defaultValue: false,
setter: 'BoolSetter',
},
{
name: 'contentParams.lineSpecial._timeAxis',
title: {label: "采用时间轴模式", tip: "时间轴模式的数据需要特殊格式"},
supportVariable: false,
defaultValue: false,
setter: 'BoolSetter',
},
{
name: 'contentParams.lineSpecial._symbolSet.symbol',
title: "标记的图形",
supportVariable: false,
setter: {
componentName: "SelectSetter",
props: {
options: [
{
title: '不展示图形',
value: 'none',
},
{
title: '圆',
value: 'emptyCircle',
},
{
title: '实心圆',
value: 'circle',
},
{
title: '矩形',
value: 'emptyRect',
},
{
title: '实心矩形',
value: 'rect',
},
{
title: '圆角矩形',
value: 'emptyRoundRect',
},
{
title: '实心圆角矩形',
value: 'roundRect',
},
{
title: '三角',
value: 'emptyTriangle',
},
{
title: '实心三角',
value: 'triangle',
},
{
title: '菱形',
value: 'emptyDiamond',
},
{
title: '菱形',
value: 'emptyDiamond',
},
{
title: '实心菱形',
value: 'diamond',
},
{
title: '坐标',
value: 'emptyPin',
},
{
title: '实心坐标',
value: 'pin',
},
{
title: '箭头',
value: 'emptyArrow',
},
{
title: '实心箭头',
value: 'arrow',
},
],
},
initialValue: 'emptyCircle',
}
},
{
name: 'contentParams.lineSpecial._symbolSet.symbolSize',
title: '标记的大小',
supportVariable: false,
setter: {
componentName: 'NumberSetter',
props: {
min: 0,
max: 50,
},
initialValue: 5,
},
},
{
name: 'contentParams.lineSpecial._lineType',
title: "折线类型",
supportVariable: false,
setter: {
componentName: "SelectSetter",
props: {
options: [
{
title: '实线',
value: 'solid',
},
{
title: '虚线',
value: 'dashed',
},
{
title: '点线',
value: 'dotted',
},
],
},
initialValue: 'solid',
}
},
{
name: 'contentParams.lineSpecial._lineWidth',
title: '折线宽度',
supportVariable: false,
setter: {
componentName: 'NumberSetter',
props: {
min: 0,
max: 10,
},
initialValue: 2,
},
},
{
title: "数值最小值配置",
display: 'block',
type: 'group',
items: [
{
name: 'contentParams.lineSpecial._minSet.type',
title: "配置方式",
supportVariable: false,
setter: {
componentName: "SelectSetter",
props: {
options: [
{
title: '不设定',
value: 'none',
},
{
title: '手动',
value: 'set',
},
{
title: '自动',
value: 'auto',
},
],
},
initialValue: 'none',
}
},
{
name: 'contentParams.lineSpecial._minSet.setNum',
title: '设定最小值',
supportVariable: false,
setter: {
componentName: 'NumberSetter',
props: {
min: -10000000,
max: 10000000,
},
initialValue: 0,
},
condition: {
type: 'JSFunction',
value: 'target => target.getProps().getPropValue("contentParams.lineSpecial._minSet.type") === "set"',
},
},
{
name: 'contentParams.lineSpecial._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.lineSpecial._minSet.type") === "auto"',
},
},
{
name: 'contentParams.lineSpecial._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.lineSpecial._minSet.type") === "auto"',
},
},
]
},
]
},
{
title: "主题配置",
display: 'block',
type: 'group',
items: getThemeItems()
},
{
title: "布局配置",
display: 'block',
type: 'group',
items: getUsualItems()
},
{
title: "数据标签",
display: 'block',
type: 'group',
items: getDataLabelItems()
},
{
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: "X 轴配置",
display: 'block',
type: 'group',
items: getAxisItems("xAxis"),
},
{
title: "Y 轴配置",
display: 'block',
type: 'group',
items: getAxisItems("yAxis"),
},
{
title: "代码自定义",
display: 'block',
type: 'group',
items: [
getFormatOptionCodeItem("formatChartLineOptionFunc")
]
}
],
supports: {
style: true,
events: [
{
name: 'onChartLineItemClick',
template:
"\nonChartLineItemClick(item,${extParams}){\n// 点击图表项后的回调\nconsole.log('onChartLineItemClick', item);}",
},
],
},
component: {}
}
};
const snippets: IPublicTypeSnippet[] = [
{
title: "折线图",
screenshot: require('./__screenshots__/chart-line-1.png'),
schema: {
componentName: "ChartLine",
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,
},
},
lineSpecial: {
seeMore: false,
_transition: 'normal',
_averageLine: false,
_maxMinPoint: false,
_timeAxis: false,
_symbolSet: {
showSymbol: true,
symbol: 'emptyCircle',
symbolSize: 5,
},
_lineType: 'solid',
_lineWidth: 2,
_minSet: {
type: 'none',
autoNum: 10,
setNum: 0,
autoStep: 1,
},
},
label: {
_setType: 'normal',
show: false,
_showPlan: 'normal', //normal pop
color: '#000000',
position: 'top',
_beforeTxt: '',
_afterTxt: '',
_emphasisSel: [],
_emphasis: {},
},
}
}
}
},
{
title: "折线图(时间轴)",
screenshot: require('./__screenshots__/chart-line-1.png'),
schema: {
componentName: "ChartLine",
props: {
dataSource: [
{
"日期": 1742368355718,
"A产品": 2200,
"B产品": 2900,
},
{
"日期": 1742454755718,
"A产品": 2600,
"B产品": 1800,
},
{
"日期": 1742541155718,
"A产品": 2300,
"B产品": 600,
},
],
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,
},
},
//折线图特殊
lineSpecial: {
seeMore: false,
_transition: 'normal',
_averageLine: false,
_maxMinPoint: false,
_timeAxis: true,
_symbolSet: {
showSymbol: true,
symbol: 'emptyCircle',
symbolSize: 5,
},
_lineType: 'solid',
_lineWidth: 2,
_minSet: {
type: 'none',
autoNum: 10,
setNum: 0,
autoStep: 1,
},
},
//标签
label: {
_setType: 'normal',
show: false,
_showPlan: 'normal', //normal pop
color: '#000000',
position: 'top',
_beforeTxt: '',
_afterTxt: '',
_emphasisSel: [],
_emphasis: {},
},
}
}
}
}
];
export default {
...ChartLineMeta,
snippets
};