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