import {IPublicTypeComponentMetadata, IPublicTypeSnippet} from '@alilc/lowcode-types'; import { getThemeItems, getAxisItems, getUsualItems, getDataLabelItems, getLegendItems, getFormatOptionCodeItem } from '../../src/utils/metaConfigHelp/echartConItem'; const ChartBarMeta: IPublicTypeComponentMetadata = { 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: getThemeItems() }, { title: "布局配置", display: 'block', type: 'group', items: getUsualItems() }, { title: "数据标签", display: 'block', type: 'group', items: 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: 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("formatChartBarOptionFunc") ] } ], supports: { style: true, events: [ { name: 'onChartBarItemClick', template: "\nonChartBarItemClick(item,${extParams}){\n// 点击图表项后的回调\nconsole.log('onChartBarItemClick', item);}", }, ], }, component: {} } }; const snippets: IPublicTypeSnippet[] = [ { 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: {}, }, } } } }, ]; export default { ...ChartBarMeta, snippets };