From 6165797939da586a8aac047e4c9d3e82690b4438 Mon Sep 17 00:00:00 2001
From: "zhu.yawen" <zhu.yawen@ustcinfo.com>
Date: Mon, 25 Sep 2023 17:40:45 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=E4=BF=AE=E5=A4=8D3D=E6=9F=B1=E7=8A=B6?=
 =?UTF-8?q?=E5=9B=BE=E6=8B=96=E6=8B=BD=E5=8D=A1=E9=A1=BF=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=E3=80=813D=E5=88=86=E7=BB=84=E6=9F=B1=E7=8A=B6=E5=9B=BE?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2=E9=85=8D=E7=BD=AE=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RightSetting/G2CustomSetting.vue          |   2 +-
 .../Echarts/3D图/3D分组柱状图.js        | 214 +++++++++---------
 data-room-ui/packages/EchartsRender/index.vue | 134 +++++------
 3 files changed, 177 insertions(+), 173 deletions(-)

diff --git a/data-room-ui/packages/BigScreenDesign/RightSetting/G2CustomSetting.vue b/data-room-ui/packages/BigScreenDesign/RightSetting/G2CustomSetting.vue
index eaf1f8b2..9e947535 100644
--- a/data-room-ui/packages/BigScreenDesign/RightSetting/G2CustomSetting.vue
+++ b/data-room-ui/packages/BigScreenDesign/RightSetting/G2CustomSetting.vue
@@ -73,7 +73,7 @@
                 </el-select>
                 <template v-else-if="setting.type === 'colorSelect'">
                   <color-select
-                    v-model="colorScheme"
+                    v-model="setting.value"
                     @update="updateColorScheme"
                   />
                   <div
diff --git a/data-room-ui/packages/Echarts/3D图/3D分组柱状图.js b/data-room-ui/packages/Echarts/3D图/3D分组柱状图.js
index 6a7c25d6..d2301d1d 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'
 // 标题
@@ -47,60 +46,66 @@ const setting = [
     tabName: 'custom',
     groupName: 'graph'
   },
-  // {
-  //   label: '柱子顶部颜色',
-  //   type: 'colorPicker', // 设置组件类型
-  //   field: 'seriesCustom_barTopColor', // 字段
-  //   optionField: 'seriesCustom.barTopColor', // 对应options中的字段
-  //   value: '#2DB1EF',
-  //   tabName: 'custom',
-  //   groupName: 'graph'
-  // },
-  // {
-  //   label: '柱子颜色1',
-  //   type: 'colorPicker', // 设置组件类型
-  //   field: 'seriesCustom_barColor1', // 字段
-  //   optionField: 'seriesCustom.barColor1', // 对应options中的字段
-  //   value: '#115ba6',
-  //   tabName: 'custom',
-  //   groupName: 'graph'
-  // },
-  // {
-  //   label: '柱子颜色2',
-  //   type: 'colorPicker', // 设置组件类型
-  //   field: 'seriesCustom_barColor2', // 字段
-  //   optionField: 'seriesCustom.barColor2', // 对应options中的字段
-  //   value: '#1db0dd',
-  //   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: 'colorSelect',
+    // 字段
+    field: 'seriesCustom_barTopColor',
+    // 对应options中的字段
+    optionField: 'seriesCustom.barTopColor',
+    value: ['#0e4481', '#1e637b', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '柱子颜色',
+    // 设置组件类型
+    type: 'colorSelect',
+    // 字段
+    field: 'seriesCustom_barColor',
+    // 对应options中的字段
+    optionField: 'seriesCustom.barColor',
+    value: ['#1370a7', '#4ebebe', '#3864ab', '#9c9c46', '#a6404b', '#ac582c', '#719c33', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '柱子底部颜色',
+    // 设置组件类型
+    type: 'colorSelect',
+    // 字段
+    field: 'seriesCustom_barBottomColor',
+    // 对应options中的字段
+    optionField: 'seriesCustom.barBottomColor',
+    value: ['#0998d9', '#2ec6ad', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3', '#5B8FF9', '#61DDAA'],
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '阴影柱子颜色',
+    // 设置组件类型
+    type: 'colorSelect',
+    // 字段
+    field: 'seriesCustom_shadowColor',
+    // 对应options中的字段
+    optionField: 'seriesCustom.shadowColor',
+    value: ['#082442', '#0e2e3c', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '阴影柱子顶部颜色',
+    // 设置组件类型
+    type: 'colorSelect',
+    // 字段
+    field: 'seriesCustom_shadowTopColor',
+    // 对应options中的字段
+    optionField: 'seriesCustom.shadowTopColor',
+    value: ['#0e4481', '#1e637b', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
+    tabName: 'custom',
+    groupName: 'graph'
+  },
   {
     label: '数据标签',
     type: 'switch', // 设置组件类型
@@ -627,15 +632,20 @@ const option = {
   seriesCustom: {
     barWidth: 30,
     // 顶部菱形颜色
-    barTopColor: ['#2DB1EF'],
+    barTopColor: ['#2DB1EF', '#2DB1EF'],
+    // barTopColor: '#2DB1EF',
     // 底部菱形颜色
-    barBottomColor: ['#187dcb'],
+    barBottomColor: ['#187dcb', '#187dcb'],
+    // barBottomColor: '#187dcb',
     // 柱子颜色
-    barColor: ['#1db0dd'],
+    barColor: ['#1db0dd', '#1db0dd'],
+    // barColor: '#1db0dd',
     // 阴影柱子颜色
-    shadowColor: ['#041133'],
+    shadowColor: ['#041133', '#041133'],
+    // shadowColor: '#041133',
     // 阴影柱子顶部颜色
-    shadowTopColor: ['#142f5a']
+    shadowTopColor: ['#142f5a', '#142f5a']
+    // shadowTopColor: '#142f5a'
   },
   series: [
     {
@@ -669,23 +679,24 @@ const option = {
       type: 'bar',
       barGap: '20%',
       barWidth: 30,
-      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 // 阴影模糊值
+      //   }
+      // },
       label: {
         show: true,
         position: 'inside',
@@ -700,23 +711,24 @@ const option = {
       type: 'bar',
       // barGap: '60%',
       barWidth: 30,
-      itemStyle: {
-        normal: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: '#73eccd'
-            },
-            {
-              offset: 1,
-              color: '#4dd9e5'
-            }
-          ]),
-          opacity: 0.8,
-          shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
-          shadowBlur: 0 // 阴影模糊值
-        }
-      },
+      color: '#73eccd',
+      // itemStyle: {
+      //   normal: {
+      //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+      //       {
+      //         offset: 0,
+      //         color: '#73eccd'
+      //       },
+      //       {
+      //         offset: 1,
+      //         color: '#4dd9e5'
+      //       }
+      //     ]),
+      //     opacity: 0.8,
+      //     shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
+      //     shadowBlur: 0 // 阴影模糊值
+      //   }
+      // },
       label: {
         show: true,
         position: 'inside',
@@ -747,7 +759,7 @@ const option = {
       symbolOffset: ['60%', 5],
       zlevel: 2,
       z: 15,
-      color: 'rgba(45, 206, 177,0.9)',
+      color: 'S',
       data: yData2
     },
     {
@@ -759,11 +771,7 @@ const option = {
       data: maxData1,
       zlevel: 1,
       barWidth: 30,
-      itemStyle: {
-        normal: {
-          color: 'rgba(9, 44, 76,.8)'
-        }
-      }
+      color: 'rgba(9, 44, 76,.8)'
     },
     {
       id: 'shadowColor2',
@@ -774,11 +782,7 @@ const option = {
       data: maxData2,
       zlevel: 1,
       barWidth: 30,
-      itemStyle: {
-        normal: {
-          color: 'rgba(16, 56, 70,.8)'
-        }
-      }
+      color: 'rgba(16, 56, 70,.8)'
     },
     {
       id: 'shadowTopColor1',
diff --git a/data-room-ui/packages/EchartsRender/index.vue b/data-room-ui/packages/EchartsRender/index.vue
index ba92cbd3..4da44175 100644
--- a/data-room-ui/packages/EchartsRender/index.vue
+++ b/data-room-ui/packages/EchartsRender/index.vue
@@ -71,25 +71,10 @@ export default {
           this.changeStyle(this.config, true)
         }
       }
-    },
-    'config.w': {
-      handler (val) {
-        if (val) {
-          const chartDom = document.getElementById(this.chatId)
-          this.observeChart(chartDom, this.chart, this.config.option)
-        }
-      }
-    },
-    'config.h': {
-      handler (val) {
-        if (val) {
-          const chartDom = document.getElementById(this.chatId)
-          this.observeChart(chartDom, this.chart, this.config.option)
-        }
-      }
     }
   },
   mounted () {
+
   },
   beforeDestroy () {
     if (this.chart) {
@@ -133,6 +118,7 @@ export default {
       const chartDom = document.getElementById(this.chatId)
       this.chart = echarts.init(chartDom)
       config.option && this.chart.setOption(config.option)
+      this.observeChart(chartDom, this.chart, config.option)
     },
     /**
      * 控制底部阴影大小
@@ -266,9 +252,10 @@ export default {
         // 数据返回失败则赋前端的模拟数据
         // config.option.data = this.plotList?.find(plot => plot.name === config.name)?.option?.data || config?.option?.data
       }
+      config = this.seriesStyle(config)
       return config
     },
-    getxDataAndYData (xField, yField, data, hasSeries) {
+    getxDataAndYData (xField, yField, data) {
       let list = []
       let xData = []
       let yData = []
@@ -280,7 +267,6 @@ export default {
         // 使用城市名称作为键，覆盖旧数据，始终保留最后一条数据
         uniqueData[item[xField]] = item
       })
-
       // 将唯一数据对象的值（即去重后的数据）转换回数组
       list = Object.values(uniqueData)
       xData = list.map(item => item[xField])
@@ -293,8 +279,9 @@ export default {
       // 分组字段
       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, yData } = this.getxDataAndYData(xField, yField, data)
       const maxY = Math.max(...yData) + Math.max(...yData) * 0.2
       // 生成阴影柱子的值
       const shadowData = Array.from({ length: xData.length }, () => maxY)
@@ -304,14 +291,15 @@ export default {
           data: xData
         }
       })
-      // 判断是否存在分组字段
+      // 存在分组字段
       if (hasSeries) {
         const seriesField = config.setting.find(item => item.optionField === 'seriesField')?.value
         const seriesFieldList = [...new Set(data.map(item => item[seriesField]))]
         option.series = []
+        const barWidth = option.seriesCustom.barWidth
+        // 偏移量数组
         const offsetArr = []
         let index = 0
-        let barWidth = 10
         if (seriesFieldList.length % 2 === 0) {
           const length = seriesFieldList.length / 2
           for (let i = 0; i < length; i++) {
@@ -335,7 +323,7 @@ export default {
           const seriesData = (data.filter(item => item[seriesField] === seriesFieldItem))?.map(item => item[yField])
           const seriesItem = [
             {
-              name: seriesFieldItem + '柱子顶部',
+              id: 'barTopColor' + seriesFieldItem,
               type: 'pictorialBar',
               tooltip: { show: false },
               symbol: 'diamond',
@@ -348,27 +336,28 @@ export default {
               data: seriesData
             },
             {
-              name: seriesFieldItem,
+              id: 'barColor' + seriesFieldItem,
               type: 'bar',
               barGap: '20%',
               barWidth: barWidth,
-              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 // 阴影模糊值
+              //   }
+              // },
               label: {
                 show: false
 
@@ -378,7 +367,7 @@ export default {
               data: seriesData
             },
             {
-              name: seriesFieldItem + '柱子底部',
+              id: 'barBottomColor' + seriesFieldItem,
               type: 'pictorialBar',
               tooltip: { show: false },
               symbol: 'diamond',
@@ -390,7 +379,7 @@ export default {
               data: seriesData
             },
             {
-              name: seriesFieldItem + '背景柱子',
+              id: 'shadowColor' + seriesFieldItem,
               type: 'bar',
               tooltip: { show: false },
               xAxisIndex: 1,
@@ -405,7 +394,7 @@ export default {
               }
             },
             {
-              name: seriesFieldItem + '背景柱子顶部',
+              id: 'shadowTopColor' + seriesFieldItem,
               type: 'pictorialBar',
               tooltip: { show: false },
               symbol: 'diamond',
@@ -437,40 +426,51 @@ export default {
     seriesStyle (config) {
       const _config = CloneDeep(config)
       const seriesCustom = _config.option.seriesCustom
+      // const ids = ['barTopColor', 'barColor', 'barBottomColor', 'shadowColor', 'shadowTopColor']
       const ids = Object.keys(config.option.seriesCustom)
-      // const ids = ['barTopColor', 'barBottomColor', 'shadowColor', 'shadowTopColor']
-      const hasSeries = _config.setting.find(item => item.optionField === 'seriesField' && item.value !== '')
+      const isGroup = _config.option.series.length !== 5
+      // 宽度配置
+      _config.option.series.forEach(item => {
+        if (item.type === 'pictorialBar') {
+          item.symbolSize = [seriesCustom.barWidth, seriesCustom.barWidth / 2]
+        } else if (item.type === 'bar') {
+          item.barWidth = seriesCustom.barWidth
+        }
+      })
+      // 颜色配置
+      // ids.forEach(id => {
+      //   if (id !== 'barWidth') {
+      //     let index = 0
+      //     _config.option.series.forEach(item => {
+      //       if (item.id.includes(id)) {
+      //         item.color = _config.option.seriesCustom[id][index]
+      //         index++
+      //       }
+      //     })
+      //   }
+      // })
       // 如果是基础柱状图
-      if (!hasSeries) {
+      if (!isGroup) {
         _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
+        })
+      } else {
+        // 如果是分组柱状图
+        ids.forEach(id => {
+          if (id !== 'barWidth') {
+            let index = 0
+            _config.option.series.forEach(item => {
+              if (item.id.includes(id)) {
+                item.color = _config.option.seriesCustom[id][index]
+                index++
+              }
+            })
           }
         })
       }
-      _config.option.series.forEach((item) => {
-        if (ids.includes(item.id)) {
-          item.color = _config.option.seriesCustom[item.id]
-        } else {
-        //   item.itemStyle.normal.color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-        //     {
-        //       offset: 0,
-        //       color: _config.option.seriesCustom.barColor1
-        //     },
-        //     {
-        //       offset: 1,
-        //       color: _config.option.seriesCustom.barColor2
-        //     }
-        //   ])
-        }
-      })
       return _config
     },
     // 组件的样式改变，返回改变后的config

From 5d9f86aa134fb190364b4a6ff78dc9326a6c11d1 Mon Sep 17 00:00:00 2001
From: "liu.tao3" <liu.tao3@ustcinfo.com>
Date: Mon, 25 Sep 2023 17:45:01 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:dataV=E8=BE=B9=E6=A1=86=E5=85=BC?=
 =?UTF-8?q?=E5=AE=B9=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 data-room-ui/packages/BorderComponents/GcBorder1/index.vue | 7 ++++---
 data-room-ui/packages/BorderComponents/GcBorder9/index.vue | 4 ++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/data-room-ui/packages/BorderComponents/GcBorder1/index.vue b/data-room-ui/packages/BorderComponents/GcBorder1/index.vue
index ae90bb29..09efc2d5 100644
--- a/data-room-ui/packages/BorderComponents/GcBorder1/index.vue
+++ b/data-room-ui/packages/BorderComponents/GcBorder1/index.vue
@@ -49,8 +49,8 @@ export default {
       return this.config.border.borderMainColor ||
         this.config.border.borderSecondaryColor
         ? [
-            this.config.border.borderMainColor,
-            this.config.border.borderSecondaryColor
+            this.config.border.borderMainColor||this.config.border.borderSecondaryColor,
+            this.config.border.borderSecondaryColor||this.config.border.borderMainColor
           ]
         : null
     },
@@ -68,7 +68,7 @@ export default {
       },
       deep: true
     },
-    'config.border.gradientColor':{
+     'config.border.gradientColor':{
          handler (val) {
           this.changeColor()
       },immediate: true
@@ -149,6 +149,7 @@ export default {
   position: absolute;
   width: 100%;
   height: 100%;
+  // padding: 0 16px;
   background-color: transparent;
   border-radius: 4px;
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
diff --git a/data-room-ui/packages/BorderComponents/GcBorder9/index.vue b/data-room-ui/packages/BorderComponents/GcBorder9/index.vue
index dfb16510..c1eaf88b 100644
--- a/data-room-ui/packages/BorderComponents/GcBorder9/index.vue
+++ b/data-room-ui/packages/BorderComponents/GcBorder9/index.vue
@@ -49,8 +49,8 @@ export default {
       return this.config.border.borderMainColor ||
         this.config.border.borderSecondaryColor
         ? [
-            this.config.border.borderMainColor,
-            this.config.border.borderSecondaryColor
+            this.config.border.borderMainColor||this.config.border.borderSecondaryColor,
+            this.config.border.borderSecondaryColor||this.config.border.borderMainColor
           ]
         : null
     },