diff --git a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenTimePickerChart.java b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenTimePickerChart.java index cd58ce10..9d6514ce 100644 --- a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenTimePickerChart.java +++ b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenTimePickerChart.java @@ -23,6 +23,39 @@ public class ScreenTimePickerChart extends Chart { @Data public static class Customize { + @ApiModelProperty(notes = "值") + private String value; + + @ApiModelProperty(notes = "选择框背景颜色") + private String backgroundColor; + + @ApiModelProperty(notes = "选择框文字颜色") + private String fontColor; + + @ApiModelProperty(notes = "选择框文字大小") + private Integer fontSize; + + @ApiModelProperty(notes = "下拉框背景颜色") + private String dropDownBackgroundColor; + + @ApiModelProperty(notes = "下拉框字体颜色") + private String dropDownFontColor; + + @ApiModelProperty(notes = "下拉项hover背景颜色") + private String dropDownHoverBackgroundColor; + + @ApiModelProperty(notes = "下拉项hover字体颜色") + private String dropDownHoverFontColor; + + @ApiModelProperty(notes = "下拉项激活文字颜色") + private String dropDownSelectedFontColor; + + @ApiModelProperty(notes = "时间格式化类型:Date 对象(default),时间戳(timestamp),自定义(custom)") + private String formatType; + + @ApiModelProperty(notes = "绑定值的格式") + private String valueFormat; + } diff --git a/data-room-ui/packages/BigScreenDesign/RightSetting/GradualSetting/index.vue b/data-room-ui/packages/BigScreenDesign/RightSetting/GradualSetting/index.vue index 1a35f0bd..c721e67d 100644 --- a/data-room-ui/packages/BigScreenDesign/RightSetting/GradualSetting/index.vue +++ b/data-room-ui/packages/BigScreenDesign/RightSetting/GradualSetting/index.vue @@ -34,7 +34,6 @@ export default { endColor: '', // 终止颜色 position: '', // 渐变方向 colorsValue: ''// 拼接后的符合g2语法的颜色值 - } }, computed: { diff --git a/data-room-ui/packages/Echarts/3D图/3D基础柱状图.js b/data-room-ui/packages/Echarts/3D图/3D基础柱状图.js index 41ec928d..8e30b265 100644 --- a/data-room-ui/packages/Echarts/3D图/3D基础柱状图.js +++ b/data-room-ui/packages/Echarts/3D图/3D基础柱状图.js @@ -38,23 +38,68 @@ const setting = [ groupName: 'graph' }, { - label: '数据标签', - type: 'switch', // 设置组件类型 - field: 'label_style_opacity', // 字段 - // optionField: 'series', // 对应options中的字段 - value: 0, - active: 1, - inactive: 0, + label: '柱子顶部颜色', + type: 'colorPicker', // 设置组件类型 + field: 'seriesCustom_barTopColor', // 字段 + optionField: 'seriesCustom.barTopColor', // 对应options中的字段 + value: '#2DB1EF', + tabName: 'custom', + groupName: 'graph' + }, + { + label: '柱子颜色', + type: 'colorPicker', // 设置组件类型 + field: 'seriesCustom_barColor', // 字段 + optionField: 'seriesCustom.barColor', // 对应options中的字段 + value: '#115ba6', + tabName: 'custom', + groupName: 'graph' + }, + { + label: '柱子底部颜色', + type: 'colorPicker', // 设置组件类型 + field: 'seriesCustom_barBottomColor', // 字段 + optionField: 'seriesCustom.barBottomColor', // 对应options中的字段 + value: '#187dcb', + tabName: 'custom', + groupName: 'graph' + }, + { + label: '柱子背景顶部颜色', + type: 'colorPicker', // 设置组件类型 + field: 'seriesCustom_shadowTopColor', // 字段 + optionField: 'seriesCustom.shadowTopColor', // 对应options中的字段 + value: '#142f5a', tabName: 'custom', groupName: 'graph' }, + { + label: '阴影柱子颜色', + type: 'colorPicker', // 设置组件类型 + field: 'seriesCustom_shadowColor', // 字段 + optionField: 'seriesCustom.shadowColor', // 对应options中的字段 + value: '#041133', + tabName: 'custom', + groupName: 'graph' + }, + // { + // label: '数据标签', + // type: 'switch', // 设置组件类型 + // field: 'label_style_opacity', // 字段 + // // optionField: 'series', // 对应options中的字段 + // value: 0, + // active: 1, + // inactive: 0, + // tabName: 'custom', + // groupName: 'graph' + // }, // x轴 xAxis { label: '显示', type: 'switch', field: 'xAxis_show', optionField: 'xAxis.show', - value: 1, + value: 0, active: 1, inactive: 0, tabName: 'custom', @@ -65,20 +110,20 @@ const setting = [ type: 'switch', field: 'xAxis_axisLine_show', optionField: 'xAxis.axisLine.show', - value: 1, + value: 0, active: 1, inactive: 0, tabName: 'custom', groupName: 'xAxis' }, { - label: '刻度显示', - type: 'switch', - field: 'xAxis_axisTick_show', - optionField: 'xAxis.axisTick.show', - value: 0, - active: 1, - inactive: 0, + label: '轴线颜色', + type: 'colorPicker', + field: 'xAxis_axisLine_lineStyle_color', + optionField: 'xAxis.axisLine.lineStyle.color', + // 是否多选 + multiple: false, + value: '#333', tabName: 'custom', groupName: 'xAxis' }, @@ -87,7 +132,7 @@ const setting = [ type: 'switch', field: 'xAxis_axisLabel_show', optionField: 'xAxis.axisLabel.show', - value: 0, + value: 1, active: 1, inactive: 0, tabName: 'custom', @@ -104,6 +149,24 @@ const setting = [ tabName: 'custom', groupName: 'xAxis' }, + { + label: '标签大小', + type: 'inputNumber', + field: 'xAxis_axisLabel_textStyle_fontSize', + optionField: 'xAxis.axisLabel.textStyle.fontSize', + value: 14, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签距离', + type: 'inputNumber', + field: 'xAxis_axisLabel_margin', + optionField: 'xAxis.axisLabel.margin', + value: 30, + tabName: 'custom', + groupName: 'xAxis' + }, { label: '标题', type: 'input', @@ -168,7 +231,69 @@ const setting = [ groupName: 'yAxis' }, { - label: '名称', + label: '轴线显示', + type: 'switch', + field: 'yAxis_axisLine_show', + optionField: 'yAxis.axisLine.show', + value: 1, + active: 1, + inactive: 0, + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '轴线颜色', + type: 'colorPicker', + field: 'yAxis_axisLine_lineStyle_color', + optionField: 'yAxis.axisLine.lineStyle.color', + // 是否多选 + multiple: false, + value: '#333', + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '标签显示', + type: 'switch', + field: 'yAxis_axisLabel_show', + optionField: 'yAxis.axisLabel.show', + value: 1, + active: 1, + inactive: 0, + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '标签颜色', + type: 'colorPicker', + field: 'yAxis_axisLabel_textStyle_color', + optionField: 'yAxis.axisLabel.textStyle.color', + // 是否多选 + multiple: false, + value: '#8C8C8C', + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '标签大小', + type: 'inputNumber', + field: 'yAxis_axisLabel_textStyle_fontSize', + optionField: 'yAxis.axisLabel.textStyle.fontSize', + value: 14, + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '标签距离', + type: 'inputNumber', + field: 'yAxis_axisLabel_margin', + optionField: 'yAxis.axisLabel.margin', + value: 10, + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '标题', type: 'input', field: 'yAxis_name', optionField: 'yAxis.name', @@ -177,7 +302,7 @@ const setting = [ groupName: 'yAxis' }, { - label: '名称颜色', + label: '标题颜色', type: 'colorPicker', field: 'yAxis_nameTextStyle_color', optionField: 'yAxis.nameTextStyle.color', @@ -188,7 +313,7 @@ const setting = [ groupName: 'yAxis' }, { - label: '名称大小', + label: '标题大小', type: 'inputNumber', field: 'yAxis_nameTextStyle_fontSize', optionField: 'yAxis.nameTextStyle.fontSize', @@ -197,7 +322,7 @@ const setting = [ groupName: 'yAxis' }, { - label: '名称位置', + label: '标题位置', type: 'select', field: 'yAxis_nameLocation', optionField: 'yAxis.nameLocation', @@ -217,17 +342,6 @@ const setting = [ value: 'end' }], groupName: 'yAxis' - }, - { - label: '刻度颜色', - type: 'colorPicker', - field: 'yAxis_axisLabel_textStyle', - optionField: 'yAxis.axisLabel.textStyle.color', - // 是否多选 - multiple: false, - value: '#d0d0d0', - tabName: 'custom', - groupName: 'yAxis' } ] @@ -256,7 +370,7 @@ const option = { }, graphic: { type: 'group', - bottom: '8%', + bottom: '5%', left: '10%', z: 100, children: [ @@ -265,7 +379,7 @@ const option = { left: 0, bottom: 0, shape: { - width: 400, + width: 418 * 0.9, height: 10 }, style: { @@ -278,7 +392,7 @@ const option = { bottom: 10, shape: { // 左上、右上、右下、左下 - points: [[40, -50], [360, -50], [400, 0], [0, 0]] + points: [[418 / 10, -320 / 6], [418 - 418 / 6, -320 / 6], [418 * 0.9, 0], [0, 0]] }, style: { fill: '#303256' @@ -297,14 +411,17 @@ const option = { fontSize: 12 }, nameLocation: '', - // 坐标轴刻度设置:x轴数据展示 + // 坐标轴刻度设置 axisTick: { show: false, alignWithLabel: true }, // 是否显示坐标轴的轴线 axisLine: { - show: false + show: false, + lineStyle: { + color: '#333' + } }, // 坐标轴刻度标签 axisLabel: { @@ -344,12 +461,15 @@ const option = { fontSize: 12 }, nameLocation: 'end', - show: true, // y轴文本标签显示 + show: true, type: 'value', axisLabel: { + show: true, textStyle: { - color: 'rgb(40, 129, 170)' - } + color: '#333', + fontSize: 12 + }, + margin: 10 }, // 分隔线 splitLine: { @@ -357,16 +477,24 @@ const option = { }, // y轴轴线是否显示 axisLine: { - show: true + show: true, + lineStyle: { + color: '#333' + } + } }, seriesCustom: { barWidth: 30, + // 顶部菱形颜色 barTopColor: '#2DB1EF', + // 底部菱形颜色 barBottomColor: '#187dcb', - barColor1: '#115ba6', - barColor2: '#1db0dd', + // 柱子颜色 + barColor: '#1db0dd', + // 阴影柱子颜色 shadowColor: '#041133', + // 阴影柱子顶部颜色 shadowTopColor: '#142f5a' }, series: [ @@ -416,23 +544,24 @@ const option = { type: 'bar', barWidth: 30, z: 10, - itemStyle: { - normal: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: '#115ba6' - }, - { - offset: 1, - color: '#1db0dd' - } - ]), - opacity: 0.8, - shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色 - shadowBlur: 0 // 阴影模糊值 - } - }, + color: '#115ba6', + // itemStyle: { + // normal: { + // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + // { + // offset: 0, + // color: '#115ba6' + // }, + // { + // offset: 1, + // color: '#1db0dd' + // } + // ]), + // opacity: 0.8, + // shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色 + // shadowBlur: 0 // 阴影模糊值 + // } + // }, data: yData }, // 阴影柱子 diff --git a/data-room-ui/packages/EchartsRender/index.vue b/data-room-ui/packages/EchartsRender/index.vue index d2a22031..5989be20 100644 --- a/data-room-ui/packages/EchartsRender/index.vue +++ b/data-room-ui/packages/EchartsRender/index.vue @@ -213,6 +213,7 @@ export default { return config }, dataFormatting (config, data) { + console.log('dataFormatting') // 数据返回成功则赋值 if (data.success) { data = data.data @@ -256,6 +257,7 @@ export default { }, // 格式化echarts的配置 echartsOptionFormatting (config, data) { + console.log('echartsOptionFormatting'); const option = config.option // 分组字段 const xField = config.setting.find(item => item.optionField === 'xField')?.value @@ -501,9 +503,25 @@ export default { // 对series里面的样式进行配置 seriesStyle (config) { const _config = CloneDeep(config) - // 如果 - // const ids = Object.keys(config.option.seriesCustom) - const ids = ['barTopColor', 'barBottomColor', 'shadowColor', 'shadowTopColor'] + const seriesCustom = _config.option.seriesCustom + const ids = Object.keys(config.option.seriesCustom) + // const ids = ['barTopColor', 'barBottomColor', 'shadowColor', 'shadowTopColor'] + const hasSeries = _config.setting.find(item => item.optionField === 'seriesField' && item.value !== '') + // 如果是基础柱状图 + if (!hasSeries) { + _config.option.series.forEach(item => { + // 配置颜色 + if (ids.includes(item.id)) { + item.color = seriesCustom[item.id] + } + // 配置宽度 + if (item.type === 'pictorialBar') { + item.symbolSize = [seriesCustom.barWidth, seriesCustom.barWidth / 2] + } else if (item.type === 'bar') { + item.barWidth = seriesCustom.barWidth + } + }) + } _config.option.series.forEach((item) => { if (ids.includes(item.id)) { item.color = _config.option.seriesCustom[item.id] @@ -524,6 +542,7 @@ export default { }, // 组件的样式改变,返回改变后的config changeStyle (config, isUpdateTheme) { + console.log('changeStyle'); config = { ...this.config, ...config } config = this.transformSettingToOption(config, 'custom') // 这里定义了option和setting是为了保证在执行eval时,optionHandler、dataHandler里面可能会用到, @@ -537,6 +556,7 @@ export default { console.error(e) } } + // 此时,setting中的部分变量映射到了option.seriesCustom中,但未映射到series的具体配置中 config = this.seriesStyle(config) // 只有样式改变时更新主题配置,切换主题时不需要保存 if (!isUpdateTheme) {