diff --git a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenDigitalFlopChart.java b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenDigitalFlopChart.java index 25f5c5cb..58b259e6 100644 --- a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenDigitalFlopChart.java +++ b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenDigitalFlopChart.java @@ -61,6 +61,14 @@ public class ScreenDigitalFlopChart extends Chart { @ApiModelProperty(notes = "高度") private Integer height; + @ApiModelProperty(notes = "边框颜色") + private String borderColor; + + @ApiModelProperty(notes = "边框宽度") + private Integer borderWidth; + + + } diff --git a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenNumbersChart.java b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenNumbersChart.java index 03c26496..e787742f 100644 --- a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenNumbersChart.java +++ b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenNumbersChart.java @@ -38,5 +38,11 @@ public class ScreenNumbersChart extends Chart { @ApiModelProperty(notes = "标题") private String title; + @ApiModelProperty(notes = "文字对齐方式") + private String align; + + @ApiModelProperty(notes = "文字间距") + private Integer letterSpacing; + } } diff --git a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenPictureChart.java b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenPictureChart.java index 718068a5..07fa2a94 100644 --- a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenPictureChart.java +++ b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenPictureChart.java @@ -19,7 +19,7 @@ public class ScreenPictureChart extends Chart { @Data public static class Customize { @ApiModelProperty(notes = "透明度") - private Integer opacity; + private Float opacity; @ApiModelProperty(notes = "圆角") private Integer radius; diff --git a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenTextChart.java b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenTextChart.java index 0319498c..bb95daf6 100644 --- a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenTextChart.java +++ b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenTextChart.java @@ -37,5 +37,11 @@ public class ScreenTextChart extends Chart { @ApiModelProperty(notes = "标题") private String title; + @ApiModelProperty(notes = "文字对齐方式") + private String align; + + @ApiModelProperty(notes = "文字间距") + private Integer letterSpacing; + } } diff --git a/data-room-ui/packages/BasicComponents/Numbers/index.vue b/data-room-ui/packages/BasicComponents/Numbers/index.vue index 454e9c73..3e351269 100644 --- a/data-room-ui/packages/BasicComponents/Numbers/index.vue +++ b/data-room-ui/packages/BasicComponents/Numbers/index.vue @@ -5,7 +5,7 @@ >
{{ config.customize.title }}
@@ -62,10 +62,11 @@ export default { width: 100%; display: flex; align-items: center; - justify-content: center; + //justify-content: center; } .content-box{ - //text-align: center; + width: 100%; + text-align: center; /* 将背景设为渐变 */ /*background-image: -webkit-linear-gradient(left, #6294F7, #C85D14);*/ /* 规定背景绘制区域 */ diff --git a/data-room-ui/packages/BasicComponents/Numbers/setting.vue b/data-room-ui/packages/BasicComponents/Numbers/setting.vue index 35777728..156c15e4 100644 --- a/data-room-ui/packages/BasicComponents/Numbers/setting.vue +++ b/data-room-ui/packages/BasicComponents/Numbers/setting.vue @@ -74,6 +74,16 @@ placeholder="请输入数字权重" /> + + + + + + + +
{{ config.customize.title }}
@@ -73,7 +73,8 @@ export default { justify-content: center; } .content-box{ - //text-align: center; + width: 100%; + text-align: center; /* 将背景设为渐变 */ /*background-image: -webkit-linear-gradient(left, #6294F7, #C85D14);*/ /* 规定背景绘制区域 */ diff --git a/data-room-ui/packages/BasicComponents/Texts/setting.vue b/data-room-ui/packages/BasicComponents/Texts/setting.vue index 00acf058..048839fa 100644 --- a/data-room-ui/packages/BasicComponents/Texts/setting.vue +++ b/data-room-ui/packages/BasicComponents/Texts/setting.vue @@ -74,6 +74,16 @@ placeholder="请输入文字权重" /> + + + + + + + + @@ -116,6 +143,18 @@ export default { data () { return { fontFamilyList: fontList, + alignList: [{ + label: '靠左', + value: 'left' + }, + { + label: '居中', + value: 'center' + }, + { + label: '靠右', + value: 'right' + }], rules: { title: [ { required: true, message: '请输入标题', trigger: 'blur' } diff --git a/data-room-ui/packages/BasicComponents/Texts/settingConfig.js b/data-room-ui/packages/BasicComponents/Texts/settingConfig.js index 6eb9e016..12b5c430 100644 --- a/data-room-ui/packages/BasicComponents/Texts/settingConfig.js +++ b/data-room-ui/packages/BasicComponents/Texts/settingConfig.js @@ -8,7 +8,7 @@ import { commonConfig, displayOption } from 'data-room-ui/js/config' export const settingConfig = { theme: 'dark', - data:[], + data: [], text: '文本标签占位符', // text内容 // 设置面板属性的显隐 displayOption: { @@ -58,7 +58,9 @@ const customConfig = { fontSize: 20, fontWeight: 700, fontFamily: '', // 字体类型 - color: 'left,#ffffff,#ffffff' + color: 'left,#ffffff,#ffffff', + align: 'center', // 文字对齐方式 + letterSpacing: 1// 文字间距 } } diff --git a/data-room-ui/packages/BigScreenDesign/ComponentDialog/index.vue b/data-room-ui/packages/BigScreenDesign/ComponentDialog/index.vue index f8b251b5..2453a97f 100644 --- a/data-room-ui/packages/BigScreenDesign/ComponentDialog/index.vue +++ b/data-room-ui/packages/BigScreenDesign/ComponentDialog/index.vue @@ -440,6 +440,7 @@ export default { const settingContent = cloneDeep(this.resolveStrSetting(this.focus.settingContent)) config.setting = settingContent.setting config.option = settingContent.option + config.optionHandler = settingContent.optionHandler this.$emit('setRemoteComponent', config) // config = getRemoteComponentConfig(this.focus.code, this.focus.name) // this.$emit('setRemoteComponent', config) @@ -494,6 +495,8 @@ export default { let title = [] // eslint-disable-next-line prefer-const, no-unused-vars let data = [] + // eslint-disable-next-line prefer-const, no-unused-vars + let optionHandler = '' // eslint-disable-next-line prefer-const settingContent = settingContent.replaceAll('const ', '') // 去掉 export default及后面代码 @@ -506,7 +509,8 @@ export default { } return { option, - setting + setting, + optionHandler } }, // 获取目录的列表 diff --git a/data-room-ui/packages/BigScreenDesign/MouseSelect/index.vue b/data-room-ui/packages/BigScreenDesign/MouseSelect/index.vue index 935bdabd..39004caf 100644 --- a/data-room-ui/packages/BigScreenDesign/MouseSelect/index.vue +++ b/data-room-ui/packages/BigScreenDesign/MouseSelect/index.vue @@ -90,12 +90,12 @@ export default { } this.isSelectDown = true // 点击在底部背景上 - if (event.target.className.indexOf('mouse-select-wrap') !== -1) { + if (typeof event.target.className === 'string' && event.target.className.indexOf('mouse-select-wrap') !== -1) { this.startX = event.offsetX this.endX = event.offsetX this.startY = event.offsetY this.endY = event.offsetY - } else if (event.target.className.indexOf('design-drag-wrap') !== -1) { + } else if (typeof event.target.className === 'string' && event.target.className.indexOf('design-drag-wrap') !== -1) { this.startX = event.offsetX + 50 this.endX = event.offsetX + 50 this.startY = event.offsetY + 50 @@ -116,10 +116,10 @@ export default { this.isSelecting = true } if (this.isSelecting) { - if (event.target.className.indexOf('mouse-select-wrap') !== -1) { + if (typeof event.target.className === 'string' && event.target.className.indexOf('mouse-select-wrap') !== -1) { this.endX = event.offsetX this.endY = event.offsetY - } else if (event.target.className.indexOf('design-drag-wrap') !== -1) { + } else if (typeof event.target.className === 'string' && event.target.className.indexOf('design-drag-wrap') !== -1) { this.startX = event.offsetX + 50 this.endY = event.offsetY + 50 } diff --git a/data-room-ui/packages/BigScreenDesign/RightSetting/ExpressionDialog.vue b/data-room-ui/packages/BigScreenDesign/RightSetting/ExpressionDialog.vue index 1f4efcc5..a857c109 100644 --- a/data-room-ui/packages/BigScreenDesign/RightSetting/ExpressionDialog.vue +++ b/data-room-ui/packages/BigScreenDesign/RightSetting/ExpressionDialog.vue @@ -185,7 +185,10 @@ export default { const str = node.value const code = node.code if (node.disabled) return - this.$refs.codemirrorRef.codemirror.setValue(this.currentConfig.expression + ' + ' + str) + // 判断编辑器里面是return + 0或者多个空格 还是包含其他表达式，每次添加第一个表达式时不要加‘+’,防止计算错误 + const isInit = /^[\w\s]+$/.test(this.currentConfig.expression) + const newStr = isInit ? this.currentConfig.expression + str : this.currentConfig.expression + ' + ' + str + this.$refs.codemirrorRef.codemirror.setValue(newStr) // 同时将点击的数据存在expressionCodes中 if (this.currentConfig.expressionCodes && Array.isArray(this.currentConfig.expressionCodes)) { this.currentConfig.expressionCodes.push(code) diff --git a/data-room-ui/packages/BizComponent/Preview.vue b/data-room-ui/packages/BizComponent/Preview.vue index 704e7210..ce94c9b0 100644 --- a/data-room-ui/packages/BizComponent/Preview.vue +++ b/data-room-ui/packages/BizComponent/Preview.vue @@ -41,6 +41,8 @@ export default { let title = '' // eslint-disable-next-line prefer-const, no-unused-vars let data = [] + // eslint-disable-next-line prefer-const, no-unused-vars + let optionHandler = '' const g2Plots = g2Plot const echarts = _echarts // eslint-disable-next-line prefer-const @@ -53,7 +55,8 @@ export default { option, setting, echarts, - g2Plots + g2Plots, + optionHandler } }, set (val) {} diff --git a/data-room-ui/packages/G2Plots/images/componentLogo/堆叠条形图.png b/data-room-ui/packages/G2Plots/images/componentLogo/堆叠条形图.png new file mode 100644 index 00000000..bfa9aeac Binary files /dev/null and b/data-room-ui/packages/G2Plots/images/componentLogo/堆叠条形图.png differ diff --git a/data-room-ui/packages/G2Plots/plotListSort.js b/data-room-ui/packages/G2Plots/plotListSort.js index ecb7214b..6e27e553 100644 --- a/data-room-ui/packages/G2Plots/plotListSort.js +++ b/data-room-ui/packages/G2Plots/plotListSort.js @@ -20,8 +20,10 @@ export default [ '基础面积图', '渐变色面积图', '堆叠面积图', + '基础条形图', '分组条形图', + '堆叠条形图', '基础饼图', '基础环图', diff --git a/data-room-ui/packages/G2Plots/折线图/多折线图.js b/data-room-ui/packages/G2Plots/折线图/多折线图.js index 38f3b0fa..f3d98608 100644 --- a/data-room-ui/packages/G2Plots/折线图/多折线图.js +++ b/data-room-ui/packages/G2Plots/折线图/多折线图.js @@ -80,6 +80,105 @@ const setting = [ tabName: 'custom', groupName: 'graph' }, + { + label: '折线点样式', + type: 'select', + field: 'point_shape', + optionField: 'point.shape', + // 是否多选 + multiple: false, + value: 'circle', + tabName: 'custom', + options: [ + { + label: '无', + value: false + }, + { + label: '空心圆', + value: 'hollow-circle' + }, + { + label: '圆形', + value: 'circle' + }, + { + label: '正方形', + value: 'square' + }, + { + label: '菱形', + value: 'diamond' + }, + { + label: '三角形', + value: 'triangle' + }, + { + label: '六边形', + value: 'hexagon' + }, + { + label: '菱形交叉', + value: 'bowtie' + }, + { + label: '十字形', + value: 'cross' + }, + { + label: 'I形', + value: 'tick' + }, + { + label: '加号', + value: 'plus' + }, + { + label: '连字号', + value: 'hyphen' + } + ], + groupName: 'graph' + }, + { + label: '折线点大小', + type: 'inputNumber', + field: 'point_size', + optionField: 'point.size', + value: 0, + tabName: 'custom', + groupName: 'graph' + }, + { + label: '折线点颜色', + type: 'colorPicker', + field: 'point_style_fill', + optionField: 'point.style.fill', + // 是否多选 + multiple: false, + value: '#ffffff', + tabName: 'custom', + groupName: 'graph' + }, + { + label: '数据标签字体大小', + type: 'inputNumber', + field: 'label_style_fontSize', + optionField: 'label.style.fontSize', + value: 0, + tabName: 'custom', + groupName: 'graph' + }, + { + label: '数据标签颜色', + type: 'colorPicker', + field: 'label_style_fill', + optionField: 'label.style.fill', + value: 'rgba(255,255,255,1)', + tabName: 'custom', + groupName: 'graph' + }, // 网格线 grid { label: '虚线', @@ -518,11 +617,13 @@ const data = [ ] // 配置处理脚本 -const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' + - '\n if (option.legendEnable) {\n' + - ' option.legend.itemName = option.legendItemName\n' + - ' };' + - 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]' +const optionHandler = ` +option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === 'legendPosition').value} : false; +if (option.legendEnable) { + option.legend.itemName = option.legendItemName +} +option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === 'yAxis_grid_line_style_lineDash').value] +` // 数据处理脚本 const dataHandler = '' @@ -549,6 +650,21 @@ const option = { } }, color: ['#6b74e4', '#4391f4', '#38bbe5', '#69d6fd', '#36c6a0'], + point: { + size: 5, + shape: 'circle', + style: { + fill: 'white', + stroke: '#5B8FF9', + lineWidth: 0 + } + }, + label: { + style: { + fill: '#8C8C8C', + fontSize: 12, + } + }, xAxis: { title: { text: '', diff --git a/data-room-ui/packages/G2Plots/条形图/堆叠条形图.js b/data-room-ui/packages/G2Plots/条形图/堆叠条形图.js new file mode 100644 index 00000000..54935a6d --- /dev/null +++ b/data-room-ui/packages/G2Plots/条形图/堆叠条形图.js @@ -0,0 +1,698 @@ +/* + * @description: 配置，参考https://g2plot.antv.antgroup.com/examples + * @Date: 2023-03-27 14:38:23 + * @Author: xing.heng + */ + +// 配置版本号 +const version = '20231107' +// 分类 +const category = 'Bar' +// 标题 +const title = '堆叠条形图' +// 类别， new Line() +const chartType = 'Bar' +// 用于标识，唯一，和文件夹名称一致 +const name = 'DuiDieTiaoXingTu' + +// 右侧配置项 +const setting = [ + { + label: '维度', + // 设置组件类型 + type: 'select', + // 字段 + field: 'yField', + // 对应options中的字段 + optionField: 'yField', + // 是否多选 + multiple: false, + value: '', + tabName: 'data' + }, + { + label: '指标', + // 设置组件类型， select / input / colorPicker + type: 'select', + // 字段 + field: 'xField', + optionField: 'xField', // 对应options中的字段 + // 是否多选 + multiple: false, + // 绑定的值 + value: '', + // tab页。 data: 数据， custom: 自定义 + tabName: 'data' + }, + { + label: '分组', + // 设置组件类型 + type: 'select', + // 字段 + field: 'seriesField', + // 对应options中的字段 + optionField: 'seriesField', + // 是否多选 + multiple: false, + value: '', + tabName: 'data' + }, + /** 样式配置 **/ + // 图表 graph + // { + // label: '条形样式', + // type: 'select', // 设置组件类型 + // field: 'shape', // 字段 + // optionField: 'shape', // 对应options中的字段 + // // 是否多选 + // multiple: false, + // value: 'default', + // tabName: 'custom', + // options: [ + // { + // label: '实心条形', + // value: 'default' + // }, + // // { + // // label: '线性', + // // value: 'line' + // // }, + // { + // label: '空心条形', + // value: 'hollow-rect' + // }, + // { + // label: '钉形', + // value: 'tick' + // } + // ], + // groupName: 'graph' + // }, + { + label: '数据标签', + type: 'switch', // 设置组件类型 + field: 'label_style_opacity', // 字段 + optionField: 'label.style.opacity', // 对应options中的字段 + value: 0, + active: 1, + inactive: 0, + tabName: 'custom', + groupName: 'graph' + }, + { + label: '数据标签大小', + // 设置组件类型 + type: 'inputNumber', + // 字段 + field: 'label_style_fontSize', + // 对应options中的字段 + optionField: 'label.style.fontSize', + value: 12, + tabName: 'custom', + groupName: 'graph' + }, + { + label: '条形颜色', + // 设置组件类型 + type: 'colorSelect', + // 字段 + field: 'color', + // 对应options中的字段 + optionField: 'color', + value: ['#6b74e4', '#4391f4', '#38bbe5', '#69d6fd', '#36c6a0'], + tabName: 'custom', + groupName: 'graph' + }, + { + label: '条形最小宽度', + // 设置组件类型 + type: 'inputNumber', + // 字段 + field: 'minBarWidth', + // 对应options中的字段 + optionField: 'minBarWidth', + value: 0, + tabName: 'custom', + groupName: 'graph' + }, + { + label: '条形最大宽度', + // 设置组件类型 + type: 'inputNumber', + // 字段 + field: 'maxBarWidth', + // 对应options中的字段 + optionField: 'maxBarWidth', + value: 100, + tabName: 'custom', + groupName: 'graph' + }, + // 网格线 grid + { + label: '虚线', + type: 'switch', + field: 'yAxis_grid_line_style_lineDash', + optionField: 'yAxis.grid.line.style.lineDash', + value: 0, + active: 5, + inactive: 0, + tabName: 'custom', + groupName: 'grid' + }, + { + label: '宽度', + type: 'inputNumber', + field: 'xAxis_grid_line_style_lineWidth', + optionField: 'xAxis.grid.line.style.lineWidth', + value: 0, + tabName: 'custom', + groupName: 'grid' + }, + { + label: '颜色', + type: 'colorPicker', + field: 'xAxis_grid_line_style_stroke', + optionField: 'xAxis.grid.line.style.stroke', + value: '#d0d0d0', + tabName: 'custom', + groupName: 'grid' + }, + // 图例 legend + { + label: '显示', + type: 'switch', // 设置组件类型 + field: 'legendEnable', // 字段 + optionField: 'legendEnable', // 对应options中的字段 + value: false, + active: true, + inactive: false, + tabName: 'custom', + groupName: 'legend' + }, + { + label: '位置', + type: 'select', // 设置组件类型 + field: 'legendPosition', // 字段 + optionField: 'legendPosition', // 对应options中的字段 + // 是否多选 + multiple: false, + value: 'top', + tabName: 'custom', + options: [ + { label: '顶部', value: 'top' }, + { label: '左上角', value: 'top-left' }, + { label: '右上角', value: 'top-right' }, + { label: '左侧', value: 'left' }, + // { label: '左上方', value: 'left-top' }, + // { label: '左下方', value: 'left-bottom' }, + { label: '右侧', value: 'right' }, + // { label: '右上方', value: 'right-top' }, + // { label: '右下方', value: 'right-bottom' }, + { label: '底部', value: 'bottom' }, + { label: '左下角', value: 'bottom-left' }, + { label: '右下角', value: 'bottom-right' } + ], + groupName: 'legend' + }, + { + label: '字体大小', + type: 'inputNumber', + field: 'legendItemName_style_fontSize', + optionField: 'legendItemName.style.fontSize', + value: 12, + tabName: 'custom', + groupName: 'legend' + }, + { + label: '字体权重', + type: 'inputNumber', + step: 100, + max: 900, + field: 'legendItemName_style_fontWeight', + optionField: 'legendItemName.style.fontWeight', + value: 400, + tabName: 'custom', + groupName: 'legend' + }, + { + label: '字体颜色', + type: 'colorPicker', + field: 'legendItemName_style_fill', + optionField: 'legendItemName.style.fill', + value: '#595959', + tabName: 'custom', + groupName: 'legend' + }, + // X轴 xAxis + { + label: '标题', + type: 'input', + field: 'xAxis_title_text', + optionField: 'xAxis.title.text', + value: '', + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标题位置', + type: 'select', + field: 'xAxis_title_position', + optionField: 'xAxis.title.position', + value: 'end', + tabName: 'custom', + options: [ + { + label: '左', + value: 'start' + }, + { + label: '中', + value: 'center' + }, + { + label: '右', + value: 'end' + }], + groupName: 'xAxis' + }, + { + label: '标题字体大小', + type: 'inputNumber', + field: 'xAxis_title_style_fontSize', + optionField: 'xAxis.title.style.fontSize', + value: 12, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标题颜色', + type: 'colorPicker', + field: 'xAxis_title_style_fill', + optionField: 'xAxis.title.style.fill', + // 是否多选 + multiple: false, + value: '#8C8C8C', + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签大小', + type: 'inputNumber', + field: 'xAxis_label_style_fontSize', + optionField: 'xAxis.label.style.fontSize', + value: 12, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签颜色', + type: 'colorPicker', + field: 'xAxis_label_style_fill', + optionField: 'xAxis.label.style.fill', + // 是否多选 + multiple: false, + value: '#8C8C8C', + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '轴线宽度', + type: 'inputNumber', + field: 'xAxis_line_style_lineWidth', + optionField: 'xAxis.line.style.lineWidth', + value: 0, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '轴线颜色', + type: 'colorPicker', + field: 'xAxis_line_style_stroke', + optionField: 'xAxis.line.style.stroke', + // 是否多选 + multiple: false, + value: '#d0d0d0', + tabName: 'custom', + groupName: 'xAxis' + }, + // Y轴 yAxis + { + label: '标题', + type: 'input', + field: 'yAxis_title_text', + optionField: 'yAxis.title.text', + value: '', + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '标题过长时旋转', + type: 'switch', + field: 'yAxis_title_autoRotate', + optionField: 'yAxis.title.autoRotate', + value: true, + active: true, + inactive: false, + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '标题位置', + type: 'select', + field: 'yAxis_title_position', + optionField: 'yAxis.title.position', + value: 'end', + tabName: 'custom', + options: [ + { + label: '上', + value: 'start' + }, + { + label: '中', + value: 'center' + }, + { + label: '下', + value: 'end' + }], + groupName: 'yAxis' + }, + { + label: '标题字体大小', + type: 'inputNumber', + field: 'yAxis_title_style_fontSize', + optionField: 'yAxis.title.style.fontSize', + value: 12, + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '标题颜色', + type: 'colorPicker', + field: 'yAxis_title_style_fill', + optionField: 'yAxis.title.style.fill', + // 是否多选 + multiple: false, + value: '#8C8C8C', + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '显示标签', + type: 'switch', + field: 'yAxis_label_style_opacity', + optionField: 'yAxis.label.style.opacity', + value: 1, + active: 1, + inactive: 0, + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '标签字体大小', + type: 'inputNumber', + field: 'yAxis_label_style_fontSize', + optionField: 'yAxis.label.style.fontSize', + value: 12, + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '标签字体颜色', + type: 'colorPicker', + field: 'yAxis_label_style_fill', + optionField: 'yAxis.label.style.fill', + // 是否多选 + multiple: false, + value: '#8C8C8C', + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '轴线宽度', + type: 'inputNumber', + field: 'yAxis_line_lineWidth', + optionField: 'yAxis.line.style.lineWidth', + value: 0, + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '轴线颜色', + type: 'colorPicker', + field: 'yAxis_line_stroke', + optionField: 'yAxis.line.style.stroke', + // 是否多选 + multiple: false, + value: 'rgba(255,255,255,1)', + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: 'y刻度线宽度', + type: 'inputNumber', + field: 'yAxis_tickLine_style_lineWidth', + optionField: 'yAxis.tickLine.style.lineWidth', + value: 1, + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: 'y刻度线颜色', + type: 'colorPicker', + field: 'yAxis_tickLine_style_stroke', + optionField: 'yAxis.tickLine.style.stroke', + // 是否多选 + multiple: false, + value: '#d0d0d0', + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '标签过多时旋转', + type: 'switch', + field: 'yAxis_label_autoRotate', + optionField: 'yAxis.label.autoRotate', + value: true, + active: true, + inactive: false, + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '标签过多时隐藏', + type: 'switch', + field: 'yAxis_label_autoHide', + optionField: 'yAxis.label.autoHide', + value: true, + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '标签过长时省略', + type: 'switch', + field: 'yAxis_label_autoEllipsis', + optionField: 'yAxis.label.autoEllipsis', + value: true, + tabName: 'custom', + groupName: 'yAxis' + }, + // 边距 padding +] + +// 模拟数据 +const data = [ + { + label: 'Mon.', + type: 'series1', + value: 2800 + }, + { + label: 'Mon.', + type: 'series2', + value: 2260 + }, + { + label: 'Tues.', + type: 'series1', + value: 1800 + }, + { + label: 'Tues.', + type: 'series2', + value: 1300 + }, + { + label: 'Wed.', + type: 'series1', + value: 950 + }, + { + label: 'Wed.', + type: 'series2', + value: 900 + }, + { + label: 'Thur.', + type: 'series1', + value: 500 + }, + { + label: 'Thur.', + type: 'series2', + value: 390 + }, + { + label: 'Fri.', + type: 'series1', + value: 170 + }, + { + label: 'Fri.', + type: 'series2', + value: 100 + } +] + +// 配置处理脚本 +const optionHandler = '\noption.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' + + '\nconst radiusNum = setting.find(settingItem=>settingItem.field === \'radiusNum\').value; option.barStyle.radius = [radiusNum,radiusNum,0,0];' + + 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]' + +// 数据处理脚本 +const dataHandler = '' + +// 图表配置 new Line('domName', option) +const option = { + // 数据将要放入到哪个字段中 + dataKey: 'data', + renderer: 'canvas', + data, + isStack: true, + // shape: ' ', + xField: 'value', + yField: 'label', + seriesField: 'type', + legendEnable: false, + legendLayout: 'vertical', + legendPosition: 'top', + legendItemName: { + style: { + fill: '#595959', + fontSize: 12, + fontWeight: 400 + } + }, + /** 自定义颜色 */ + color: ['#6b74e4', '#4391f4', '#38bbe5', '#69d6fd', '#36c6a0'], + legend: false, + label: { + position: 'middle', + style: { + fill: '#59F25F', + opacity: 0, + fontSize: 12 + }, + layout: [ + // 柱形图数据标签位置自动调整 + { type: 'interval-adjust-position' }, + // 数据标签防遮挡 + { type: 'interval-hide-overlap' }, + // 数据标签文颜色自动调整 + { type: 'adjust-color' }, + ], + }, + radiusNum: 0, // 设置条形图的圆角的中间值 + xAxis: { + grid: { + line: { + style: { + stroke: '#d0d0d0', + lineWidth: 0 + } + } + }, + title: { + text: '', + position: 'end', + style: { + fill: '#8C8C8C', + fontSize: 12 + } + }, + label: { + style: { + fill: '#8C8C8C', + fontSize: 12 + } + }, + line: { + style: { + stroke: '#d0d0d0', + lineWidth: 0 + } + }, + tickLine: { + style: { + stroke: '#d0d0d0', + lineWidth: 0 + } + } + }, + yAxis: { + title: { + text: '', + position: 'end', + autoRotate: false, + // rotation: Math.PI / 2, + style: { + fill: '#8C8C8C', + fontSize: 12 + } + }, + grid: { + line: { + style: { + stroke: '#d0d0d0', + lineWidth: 0, + strokeOpacity: 0.7 + } + } + }, + label: { + autoRotate: false, + autoHide: true, + autoEllipsis: true, + style: { + fill: '#8C8C8C', + fontSize: 12, + opacity: 1 + } + }, + line: { + style: { + stroke: '#d0d0d0', + lineWidth: 0 + } + }, + tickLine: { + style: { + stroke: '#d0d0d0', + lineWidth: 1 + } + } + } +} + +export default { + category, + version, + title, + chartType, + name, + option, + setting, + optionHandler, + dataHandler +} diff --git a/data-room-ui/packages/G2Plots/柱状图/分组柱状图.js b/data-room-ui/packages/G2Plots/柱状图/分组柱状图.js index d01d62ac..c49adb24 100644 --- a/data-room-ui/packages/G2Plots/柱状图/分组柱状图.js +++ b/data-room-ui/packages/G2Plots/柱状图/分组柱状图.js @@ -668,6 +668,7 @@ const option = { } }, label: { + offsetY: 20, // 可手动配置 label 数据标签位置 position: 'middle', // 'top', 'middle', 'bottom' // 配置样式 diff --git a/data-room-ui/packages/G2Plots/柱状图/圆角柱状图.js b/data-room-ui/packages/G2Plots/柱状图/圆角柱状图.js index c5e87322..e37cfa9e 100644 --- a/data-room-ui/packages/G2Plots/柱状图/圆角柱状图.js +++ b/data-room-ui/packages/G2Plots/柱状图/圆角柱状图.js @@ -593,6 +593,7 @@ const option = { type: '' }, label: { + offsetY: 20, // 可手动配置 label 数据标签位置 position: 'bottom', // 'top', 'bottom', 'middle' // 配置样式 diff --git a/data-room-ui/packages/G2Plots/柱状图/基础柱状图.js b/data-room-ui/packages/G2Plots/柱状图/基础柱状图.js index 8db16f1d..b6caa87f 100644 --- a/data-room-ui/packages/G2Plots/柱状图/基础柱状图.js +++ b/data-room-ui/packages/G2Plots/柱状图/基础柱状图.js @@ -105,6 +105,39 @@ const setting = [ tabName: 'custom', groupName: 'graph' }, + { + label: '柱最小宽度', + // 设置组件类型 + type: 'inputNumber', + // 字段 + field: 'minColumnWidth', + // 对应options中的字段 + optionField: 'minColumnWidth', + value: 0, + tabName: 'custom', + groupName: 'graph' + }, + { + label: '柱最大宽度', + // 设置组件类型 + type: 'inputNumber', + // 字段 + field: 'maxColumnWidth', + // 对应options中的字段 + optionField: 'maxColumnWidth', + value: 100, + tabName: 'custom', + groupName: 'graph' + }, + { + label: '柱背景颜色', + type: 'colorPicker', + field: 'columnBackground_style_fill', + optionField: 'columnBackground.style.fill', + value: 'rgba(255,255,255,0)', + tabName: 'custom', + groupName: 'graph' + }, // 网格线 grid { label: '虚线', @@ -446,6 +479,7 @@ const option = { fill: 'l(90) 0:#5AA6AB 1:#217AB1' }, label: { + offsetY: 13, // 可手动配置 label 数据标签位置 position: 'middle', // 'top', 'bottom', 'middle', // 配置样式 @@ -530,12 +564,11 @@ const option = { } }, // 背景图设置 - // columnBackground: { - // style: { - // fill: '#569EA4', - // fillOpacity: 0.1 - // } - // }, + columnBackground: { + style: { + fill: 'rgba(255,255,255,0)', + } + }, meta: { type: { alias: '类别' diff --git a/data-room-ui/packages/G2Plots/面积图/堆叠面积图.js b/data-room-ui/packages/G2Plots/面积图/堆叠面积图.js index 99424571..5f92692a 100644 --- a/data-room-ui/packages/G2Plots/面积图/堆叠面积图.js +++ b/data-room-ui/packages/G2Plots/面积图/堆叠面积图.js @@ -83,6 +83,94 @@ const setting = [ tabName: 'custom', groupName: 'graph' }, + { + label: '折线点样式', + type: 'select', + field: 'point_shape', + optionField: 'point.shape', + // 是否多选 + multiple: false, + value: 'circle', + tabName: 'custom', + options: [ + { + label: '无', + value: false + }, + { + label: '空心圆', + value: 'hollow-circle' + }, + { + label: '圆形', + value: 'circle' + }, + { + label: '正方形', + value: 'square' + }, + { + label: '菱形', + value: 'diamond' + }, + { + label: '三角形', + value: 'triangle' + }, + { + label: '六边形', + value: 'hexagon' + }, + { + label: '菱形交叉', + value: 'bowtie' + }, + { + label: '十字形', + value: 'cross' + }, + { + label: 'I形', + value: 'tick' + }, + { + label: '加号', + value: 'plus' + }, + { + label: '连字号', + value: 'hyphen' + } + ], + groupName: 'graph' + }, + { + label: '折线点大小', + type: 'inputNumber', + field: 'point_size', + optionField: 'point.size', + value: 0, + tabName: 'custom', + groupName: 'graph' + }, + { + label: '数据标签字体大小', + type: 'inputNumber', + field: 'label_style_fontSize', + optionField: 'label.style.fontSize', + value: 0, + tabName: 'custom', + groupName: 'graph' + }, + { + label: '数据标签颜色', + type: 'colorPicker', + field: 'label_style_fill', + optionField: 'label.style.fill', + value: 'rgba(255,255,255,1)', + tabName: 'custom', + groupName: 'graph' + }, // 网格线 grid { label: '虚线', @@ -622,6 +710,16 @@ const option = { } }, startOnZero: true, + point: { + size: 5, + shape: 'circle', + }, + label: { + style: { + fill: '#8C8C8C', + fontSize: 12, + } + }, xAxis: { title: { text: '', diff --git a/data-room-ui/packages/G2Plots/面积图/渐变色面积图.js b/data-room-ui/packages/G2Plots/面积图/渐变色面积图.js index bcd3fc68..f1b118c3 100644 --- a/data-room-ui/packages/G2Plots/面积图/渐变色面积图.js +++ b/data-room-ui/packages/G2Plots/面积图/渐变色面积图.js @@ -93,7 +93,102 @@ const setting = [ tabName: 'custom', groupName: 'graph' }, - + { + label: '折线点大小', + type: 'inputNumber', + field: 'point_size', + optionField: 'point.size', + value: 0, + min: 0, + tabName: 'custom', + groupName: 'graph' + }, + { + label: '折线点颜色', + type: 'colorPicker', // 设置组件类型 + field: 'point_color', // 字段 + optionField: 'point.color', // 对应options中的字段 + value: '', + tabName: 'custom', + groupName: 'graph' + }, + { + label: '折线点样式', + type: 'select', // 设置组件类型 + field: 'point_shape', // 字段 + optionField: 'point.shape', // 对应options中的字段 + value: 'hollow-circle', + tabName: 'custom', + options: [ + { + label: '无', + value: false + }, + { + label: '空心圆', + value: 'hollow-circle' + }, + { + label: '圆形', + value: 'circle' + }, + { + label: '正方形', + value: 'square' + }, + { + label: '菱形', + value: 'diamond' + }, + { + label: '三角形', + value: 'triangle' + }, + { + label: '六边形', + value: 'hexagon' + }, + { + label: '菱形交叉', + value: 'bowtie' + }, + { + label: '十字形', + value: 'cross' + }, + { + label: 'I形', + value: 'tick' + }, + { + label: '加号', + value: 'plus' + }, + { + label: '连字号', + value: 'hyphen' + } + ], + groupName: 'graph' + }, + { + label: '数据标签字体大小', + type: 'inputNumber', + field: 'label_style_fontSize', + optionField: 'label.style.fontSize', + value: 0, + tabName: 'custom', + groupName: 'graph' + }, + { + label: '数据标签颜色', + type: 'colorPicker', + field: 'label_style_fill', + optionField: 'label.style.fill', + value: 'rgba(255,255,255,1)', + tabName: 'custom', + groupName: 'graph' + }, // 网格线 grid { label: '虚线', @@ -492,6 +587,17 @@ const option = { color: '#1890ff', size: 1 }, + point: { + color: '', + shape: 'hollow-circle', + size: 0 + }, + label: { + style: { + fill: 'rgba(255,255,255,1)', + fontSize: 0 + } + }, xAxis: { title: { text: '', @@ -558,9 +664,6 @@ const option = { } } } - // point: { - // color: '' - // } } export default { diff --git a/data-room-ui/packages/RemoteComponents/index.vue b/data-room-ui/packages/RemoteComponents/index.vue index 47991e30..0a250637 100644 --- a/data-room-ui/packages/RemoteComponents/index.vue +++ b/data-room-ui/packages/RemoteComponents/index.vue @@ -126,6 +126,8 @@ export default { let title = [] // eslint-disable-next-line prefer-const, no-unused-vars let data = [] + // eslint-disable-next-line prefer-const, no-unused-vars + let optionHandler = '' // eslint-disable-next-line prefer-const settingContent = settingContent.replaceAll('const ', '') // 去掉 export default及后面代码 @@ -147,7 +149,8 @@ export default { return { option, - setting + setting, + optionHandler } }, /** diff --git a/data-room-ui/packages/js/store/mutations.js b/data-room-ui/packages/js/store/mutations.js index 17f8fa02..21d00dde 100644 --- a/data-room-ui/packages/js/store/mutations.js +++ b/data-room-ui/packages/js/store/mutations.js @@ -205,11 +205,23 @@ export default { }, // 改变锁定状态 changeLocked (state, config) { - const index = state.pageInfo.chartList.findIndex( - item => item.code === config.code - ) - Vue.set(state.pageInfo.chartList[index], 'locked', !config.locked) - saveTimeLineFunc(state, !config.locked ? `解锁${config?.title}` : `锁定${config?.title}`) + // 如果是多选，则改变框选中的所有组件的锁定状态 + if (state.activeCodes && state.activeCodes.length) { + state.pageInfo.chartList = state.pageInfo.chartList?.map(chart => { + return { + ...chart, + locked: state.activeCodes.includes(chart.code) ? !config.locked : config.locked + } + }) + saveTimeLineFunc(state, config.locked ? '解锁选中组件' : '锁定选中组件') + } else { + // 如果不是多选，则只改变当前一个 + const index = state.pageInfo.chartList.findIndex( + item => item.code === config.code + ) + Vue.set(state.pageInfo.chartList[index], 'locked', !config.locked) + saveTimeLineFunc(state, !config.locked ? `解锁${config?.title}` : `锁定${config?.title}`) + } }, // 改变网格显示状态 changeGridShow (state, isShow) {