From 67583af34079976b8eb9679e4352812ebac6225a Mon Sep 17 00:00:00 2001
From: "zhu.yawen" <zhu.yawen@ustcinfo.com>
Date: Thu, 21 Sep 2023 15:14:23 +0800
Subject: [PATCH 1/4] =?UTF-8?q?fix:=E4=BF=AE=E6=94=B93D=E5=9F=BA=E7=A1=80?=
=?UTF-8?q?=E6=9F=B1=E7=8A=B6=E5=9B=BE=E6=95=B0=E6=8D=AE=E9=85=8D=E7=BD=AE?=
=?UTF-8?q?=E5=90=8E=E4=B8=8D=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../Echarts/3D图/3D基础柱状图.js | 104 +++++++++----
data-room-ui/packages/EchartsRender/index.vue | 140 ++++--------------
2 files changed, 104 insertions(+), 140 deletions(-)
diff --git a/data-room-ui/packages/Echarts/3D图/3D基础柱状图.js b/data-room-ui/packages/Echarts/3D图/3D基础柱状图.js
index 8e30b265..73334756 100644
--- a/data-room-ui/packages/Echarts/3D图/3D基础柱状图.js
+++ b/data-room-ui/packages/Echarts/3D图/3D基础柱状图.js
@@ -1,4 +1,3 @@
-import * as echarts from 'echarts'
// 配置版本号
const version = '2023091901'
// 标题
@@ -65,7 +64,16 @@ const setting = [
groupName: 'graph'
},
{
- label: '柱子背景顶部颜色',
+ label: '阴影柱子颜色',
+ type: 'colorPicker', // 设置组件类型
+ field: 'seriesCustom_shadowColor', // 字段
+ optionField: 'seriesCustom.shadowColor', // 对应options中的字段
+ value: '#041133',
+ tabName: 'custom',
+ groupName: 'graph'
+ },
+ {
+ label: '阴影柱子顶部颜色',
type: 'colorPicker', // 设置组件类型
field: 'seriesCustom_shadowTopColor', // 字段
optionField: 'seriesCustom.shadowTopColor', // 对应options中的字段
@@ -74,25 +82,62 @@ const setting = [
groupName: 'graph'
},
{
- label: '阴影柱子颜色',
+ label: '数据标签',
+ type: 'switch', // 设置组件类型
+ field: 'series_barColor_label_show', // 字段
+ optionField: 'series.barColor.label.show', // 对应options中的字段
+ value: 0,
+ active: 1,
+ inactive: 0,
+ tabName: 'custom',
+ groupName: 'graph'
+ },
+ {
+ label: '数据标签位置',
+ type: 'select', // 设置组件类型
+ field: 'series_barColor_label_position', // 字段
+ optionField: 'series.barColor.label.position', // 对应options中的字段
+ // 是否多选
+ multiple: false,
+ value: 'inside',
+ tabName: 'custom',
+ options: [
+ {
+ label: '顶部',
+ value: 'top'
+ },
+ {
+ label: '居中',
+ value: 'inside'
+ },
+ {
+ label: '底部',
+ value: 'bottom'
+ }
+ ],
+ groupName: 'graph'
+ },
+ {
+ label: '数据标签颜色',
type: 'colorPicker', // 设置组件类型
- field: 'seriesCustom_shadowColor', // 字段
- optionField: 'seriesCustom.shadowColor', // 对应options中的字段
- value: '#041133',
+ field: 'series_barColor_label_color', // 字段
+ optionField: 'series.barColor.label.color', // 对应options中的字段
+ value: '#ffffff',
+ tabName: 'custom',
+ groupName: 'graph'
+ },
+ {
+ label: '数据标签大小',
+ // 设置组件类型
+ type: 'inputNumber',
+ // 字段
+ field: 'series_barColor_label_fontSize',
+ // 对应options中的字段
+ optionField: 'series.barColor.label.fontSize',
+ value: 12,
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: '显示',
@@ -509,13 +554,7 @@ const option = {
symbolPosition: 'end',
z: 12,
label: {
- normal: {
- show: false,
- position: 'top',
- fontSize: 15,
- fontWeight: 'bold',
- color: '#27a7ce'
- }
+ show: false
},
color: '#2DB1EF',
tooltip: {
@@ -536,6 +575,9 @@ const option = {
tooltip: {
show: false
},
+ label: {
+ show: false
+ },
data: yData
},
// 柱子
@@ -562,6 +604,12 @@ const option = {
// shadowBlur: 0 // 阴影模糊值
// }
// },
+ label: {
+ show: true,
+ position: 'inside',
+ color: '#fff',
+ fontSize: 12
+ },
data: yData
},
// 阴影柱子
@@ -597,13 +645,7 @@ const option = {
symbolPosition: 'end',
z: 12,
label: {
- normal: {
- show: false,
- position: 'top',
- fontSize: 15,
- fontWeight: 'bold',
- color: '#27a7ce'
- }
+ show: false
},
color: '#142f5a',
tooltip: {
diff --git a/data-room-ui/packages/EchartsRender/index.vue b/data-room-ui/packages/EchartsRender/index.vue
index 5989be20..9b36211b 100644
--- a/data-room-ui/packages/EchartsRender/index.vue
+++ b/data-room-ui/packages/EchartsRender/index.vue
@@ -75,7 +75,6 @@ export default {
'config.w': {
handler (val) {
if (val) {
- // console.log('this.config',this.config);
const chartDom = document.getElementById(this.chatId)
this.observeChart(chartDom, this.chart, this.config.option)
}
@@ -195,6 +194,30 @@ export default {
option = option[field]
}
})
+ } else if (optionField[0] === 'series') {
+ // 存储要修改的series对象
+ let changeObject = {}
+ // 存储改变后的series对象
+ let changedObject = {}
+ optionField.forEach((field, index) => {
+ if (index === 0) {
+ option = option[field]
+ } else if (index === 1) {
+ // 根据id找到对应的type
+ changeObject = option.find(obj => obj.id === field)
+ changedObject = changeObject
+ option = option.filter(obj => obj.id !== field)
+ } else if (index === optionField.length - 1) {
+ // 数据配置时，必须有值才更新
+ if ((set.tabName === type && type === 'data' && set.value) || (set.tabName === type && type === 'custom')) {
+ changeObject[field] = set.value
+ }
+ } else {
+ changeObject = changeObject[field]
+ }
+ })
+ changeObject = { ...changeObject, ...changedObject }
+ option.push(changeObject)
} else {
optionField.forEach((field, index) => {
if (index === optionField.length - 1) {
@@ -213,7 +236,6 @@ export default {
return config
},
dataFormatting (config, data) {
- console.log('dataFormatting')
// 数据返回成功则赋值
if (data.success) {
data = data.data
@@ -257,15 +279,12 @@ export default {
},
// 格式化echarts的配置
echartsOptionFormatting (config, data) {
- console.log('echartsOptionFormatting');
const option = config.option
// 分组字段
const xField = config.setting.find(item => item.optionField === 'xField')?.value
const yField = config.setting.find(item => item.optionField === 'yField')?.value
const hasSeries = config.setting.find(item => item.optionField === 'seriesField' && item.value !== '')
const { xData, yData } = this.getxDataAndYData(xField, yField, data, hasSeries)
- // const xData = [...new Set(data.map(item => item[xField]))]
- // const yData = data.map(item => item[yField])
const maxY = Math.max(...yData) + Math.max(...yData) * 0.2
// 生成阴影柱子的值
const shadowData = Array.from({ length: xData.length }, () => maxY)
@@ -393,110 +412,14 @@ export default {
option.series.push(...seriesItem)
}
} else {
- option.series = [
- {
- id: 'barTopColor', // 用于区分是图表的什么部分
- type: 'pictorialBar', // 象形柱图
- symbol: 'diamond',
- symbolOffset: [0, '-50%'], // 上部菱形
- symbolSize: [30, 15],
- // symbolOffset: [0, -6], // 上部椭圆
- symbolPosition: 'end',
- z: 12,
- label: {
- normal: {
- show: true,
- position: 'top',
- fontSize: 15,
- fontWeight: 'bold',
- color: '#27a7ce'
- }
- },
- color: option.seriesCustom.barTopColor,
- data: yData
- },
- {
- id: 'barBottomColor', // 用于区分是图表的什么部分
- type: 'pictorialBar',
- symbol: 'diamond',
- symbolSize: [30, 15],
- symbolOffset: ['0%', '50%'], // 下部菱形
- // symbolOffset: [0, 7], // 下部椭圆
- z: 12,
- color: option.seriesCustom.barBottomColor,
- data: yData
- },
- {
- id: 'barColor', // 用于区分是图表的什么部分
- type: 'bar',
- barWidth: 30,
- z: 10,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: option.seriesCustom.barColor1
- },
- {
- offset: 1,
- color: option.seriesCustom.barColor2
- }
- ]),
- opacity: 0.8,
- shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
- shadowBlur: 0 // 阴影模糊值
- }
- },
- data: yData
- },
- {
- id: 'shadowColor', // 用于区分是图表的什么部分
- type: 'bar',
- barWidth: 30,
- xAxisIndex: 1,
- itemStyle: {
- normal: {
- color: option.seriesCustom.shadowColor,
- opacity: 0.8,
- shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
- shadowBlur: 0 // 阴影模糊值
- }
- },
- label: {
- show: false
- },
- tooltip: {
- show: false
- },
- data: shadowData
- },
- {
- id: 'shadowTopColor', // 用于区分是图表的什么部分
- type: 'pictorialBar', // 象形柱图
- xAxisIndex: 1,
- symbol: 'diamond',
- symbolOffset: [0, '-50%'], // 上部菱形
- symbolSize: [30, 15],
- // symbolOffset: [0, -6], // 上部椭圆
- symbolPosition: 'end',
- z: 12,
- label: {
- normal: {
- show: false,
- position: 'top',
- fontSize: 15,
- fontWeight: 'bold',
- color: '#27a7ce'
- }
- },
- color: option.seriesCustom.shadowTopColor,
- tooltip: {
- show: false
- },
- data: shadowData
+ // 没有分组，不需要修改配置，直接修改series中每个对象的series
+ option.series.forEach(item => {
+ if (item.id.includes('shadow')) {
+ item.data = shadowData
+ } else {
+ item.data = yData
}
- ]
+ })
}
return option
},
@@ -542,7 +465,6 @@ export default {
},
// 组件的样式改变，返回改变后的config
changeStyle (config, isUpdateTheme) {
- console.log('changeStyle');
config = { ...this.config, ...config }
config = this.transformSettingToOption(config, 'custom')
// 这里定义了option和setting是为了保证在执行eval时,optionHandler、dataHandler里面可能会用到，
From 0831e6dd8f09a5d0da202469f5bfa2fe264cd421 Mon Sep 17 00:00:00 2001
From: "hong.yang" <hong.yang@ustcinfo.com>
Date: Thu, 21 Sep 2023 15:18:20 +0800
Subject: [PATCH 2/4] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E5=A4=A7=E5=B1=8F?=
=?UTF-8?q?=E9=A2=84=E8=A7=88=E6=95=B0=E6=8D=AE=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
优化大屏预览数据处理
---
.../manage/service/impl/DataRoomPagePreviewServiceImpl.java | 2 ++
1 file changed, 2 insertions(+)
diff --git a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/manage/service/impl/DataRoomPagePreviewServiceImpl.java b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/manage/service/impl/DataRoomPagePreviewServiceImpl.java
index 1448abeb..8cd8b082 100644
--- a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/manage/service/impl/DataRoomPagePreviewServiceImpl.java
+++ b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/manage/service/impl/DataRoomPagePreviewServiceImpl.java
@@ -6,6 +6,7 @@ import com.gccloud.common.exception.GlobalException;
import com.gccloud.common.utils.BeanConvertUtils;
import com.gccloud.dataroom.core.module.basic.dao.DataRoomPagePreviewDao;
import com.gccloud.dataroom.core.module.basic.entity.PagePreviewEntity;
+import com.gccloud.dataroom.core.module.chart.bean.Chart;
import com.gccloud.dataroom.core.module.manage.dto.DataRoomPageDTO;
import com.gccloud.dataroom.core.module.manage.service.IDataRoomPagePreviewService;
import com.gccloud.dataroom.core.utils.CodeGenerateUtils;
@@ -32,6 +33,7 @@ public class DataRoomPagePreviewServiceImpl extends ServiceImpl<DataRoomPagePrev
if (list != null && !list.isEmpty()) {
// 有则直接更新
PagePreviewEntity pagePreviewEntity = list.get(0);
+ bigScreenPageDTO.setCode(code);
pagePreviewEntity.setConfig(bigScreenPageDTO);
pagePreviewEntity.setCreateDate(new Date());
this.updateById(pagePreviewEntity);
From 09da0edadab4d9b7f6d3003e31df1eadfdd3b022 Mon Sep 17 00:00:00 2001
From: "zhu.yawen" <zhu.yawen@ustcinfo.com>
Date: Thu, 21 Sep 2023 15:56:31 +0800
Subject: [PATCH 3/4] =?UTF-8?q?feat:3D=E5=9F=BA=E7=A1=80=E6=9F=B1=E7=8A=B6?=
=?UTF-8?q?=E5=9B=BE=E6=B7=BB=E5=8A=A0=E7=BD=91=E6=A0=BC=E7=BA=BF=E9=85=8D?=
=?UTF-8?q?=E7=BD=AE=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../Echarts/3D图/3D基础柱状图.js | 76 ++++++++++++++++++-
1 file changed, 75 insertions(+), 1 deletion(-)
diff --git a/data-room-ui/packages/Echarts/3D图/3D基础柱状图.js b/data-room-ui/packages/Echarts/3D图/3D基础柱状图.js
index 73334756..72a8a45e 100644
--- a/data-room-ui/packages/Echarts/3D图/3D基础柱状图.js
+++ b/data-room-ui/packages/Echarts/3D图/3D基础柱状图.js
@@ -138,6 +138,36 @@ const setting = [
tabName: 'custom',
groupName: 'graph'
},
+ // 网格线
+ {
+ label: '分隔线',
+ type: 'switch',
+ field: 'yAxis_splitLine_show',
+ optionField: 'yAxis.splitLine.show',
+ value: 0,
+ active: 1,
+ inactive: 0,
+ tabName: 'custom',
+ groupName: 'grid'
+ },
+ {
+ label: '宽度',
+ type: 'inputNumber',
+ field: 'yAxis_splitLine_lineStyle_width',
+ optionField: 'yAxis.splitLine.lineStyle.width',
+ value: 2,
+ tabName: 'custom',
+ groupName: 'grid'
+ },
+ {
+ label: '颜色',
+ type: 'colorPicker',
+ field: 'yAxis_splitLine_lineStyle_color',
+ optionField: 'yAxis.splitLine.lineStyle.color',
+ value: '#fff',
+ tabName: 'custom',
+ groupName: 'grid'
+ },
// x轴 xAxis
{
label: '显示',
@@ -297,6 +327,39 @@ const setting = [
tabName: 'custom',
groupName: 'yAxis'
},
+ {
+ label: '刻度显示',
+ type: 'switch',
+ field: 'yAxis_axisTick_show',
+ optionField: 'yAxis.axisTick.show',
+ value: 1,
+ active: 1,
+ inactive: 0,
+ tabName: 'custom',
+ groupName: 'yAxis'
+ },
+ {
+ label: '刻度颜色',
+ type: 'colorPicker',
+ field: 'yAxis_axisTick_lineStyle_color',
+ optionField: 'yAxis.axisTick.lineStyle.color',
+ // 是否多选
+ multiple: false,
+ value: '#fff',
+ tabName: 'custom',
+ groupName: 'yAxis'
+ },
+ {
+ label: '刻度宽度',
+ type: 'inputNumber',
+ field: 'yAxis_axisTick_lineStyle_width',
+ optionField: 'yAxis.axisTick.lineStyle.width',
+ // 是否多选
+ multiple: false,
+ value: 1,
+ tabName: 'custom',
+ groupName: 'yAxis'
+ },
{
label: '标签显示',
type: 'switch',
@@ -516,9 +579,20 @@ const option = {
},
margin: 10
},
+ axisTick: {
+ show: true,
+ lineStyle: {
+ color: '#fff',
+ width: 1
+ }
+ },
// 分隔线
splitLine: {
- show: false // yAxis.show配置为true时，该配置才有效
+ show: true, // yAxis.show配置为true时，该配置才有效
+ lineStyle: {
+ color: '#fff',
+ width: 2
+ }
},
// y轴轴线是否显示
axisLine: {
From 70a218b03f75f5cffdda0ef282811cc1a72c51a0 Mon Sep 17 00:00:00 2001
From: "liu.shiyi" <liu.shiyi@ustcinfo.com>
Date: Thu, 21 Sep 2023 16:01:55 +0800
Subject: [PATCH 4/4] =?UTF-8?q?fix:=E4=BF=AE=E6=94=B9=E4=B8=BB=E9=A2=98?=
=?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=E7=9A=84=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../BasicComponents/ThemeSelect/index.vue | 17 ++++++++++++-----
1 file changed, 12 insertions(+), 5 deletions(-)
diff --git a/data-room-ui/packages/BasicComponents/ThemeSelect/index.vue b/data-room-ui/packages/BasicComponents/ThemeSelect/index.vue
index 9bdc46e3..7e755abc 100644
--- a/data-room-ui/packages/BasicComponents/ThemeSelect/index.vue
+++ b/data-room-ui/packages/BasicComponents/ThemeSelect/index.vue
@@ -111,13 +111,20 @@ export default {
}
// 自定义dropdown的样式
.theme-dropdown-menu{
- //background-color: var(--bs-background-2)!important;
- //border: 1px solid var(--bs-border-1);
+ background-color: var(--bs-background-2)!important;
+ border: 1px solid var(--bs-border-1);
+ /deep/ .popper__arrow{
+ background-color: var(--bs-background-2)!important;
+ &:after{
+ border-bottom-color: var(--bs-background-2)!important;
+ }
+ }
/deep/ .el-dropdown-menu__item{
- //background-color: var(--bs-background-2)!important;
+ background-color: var(--bs-background-2)!important;
+ color: rgb(188, 201, 212)!important;
&:hover {
- //color: var(--bs-el-color-primary) !important;
- //background-color: var(--bs-el-background-3) !important;
+ color: var(--bs-el-color-primary) !important;
+ background-color: var(--bs-el-background-3) !important;
}
}