feat:修复3D柱状图拖拽卡顿问题、3D分组柱状图颜色配置问题

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

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: '柱子顶部颜色',
+    label: '柱子顶部颜色',
-  //   type: 'colorPicker', // 设置组件类型
+    // 设置组件类型
-  //   field: 'seriesCustom_barTopColor', // 字段
+    type: 'colorSelect',
-  //   optionField: 'seriesCustom.barTopColor', // 对应options中的字段
+    // 字段
-  //   value: '#2DB1EF',
+    field: 'seriesCustom_barTopColor',
-  //   tabName: 'custom',
+    // 对应options中的字段
-  //   groupName: 'graph'
+    optionField: 'seriesCustom.barTopColor',
-  // },
+    value: ['#0e4481', '#1e637b', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
-  // {
+    tabName: 'custom',
-  //   label: '柱子颜色1',
+    groupName: 'graph'
-  //   type: 'colorPicker', // 设置组件类型
+  },
-  //   field: 'seriesCustom_barColor1', // 字段
+  {
-  //   optionField: 'seriesCustom.barColor1', // 对应options中的字段
+    label: '柱子颜色',
-  //   value: '#115ba6',
+    // 设置组件类型
-  //   tabName: 'custom',
+    type: 'colorSelect',
-  //   groupName: 'graph'
+    // 字段
-  // },
+    field: 'seriesCustom_barColor',
-  // {
+    // 对应options中的字段
-  //   label: '柱子颜色2',
+    optionField: 'seriesCustom.barColor',
-  //   type: 'colorPicker', // 设置组件类型
+    value: ['#1370a7', '#4ebebe', '#3864ab', '#9c9c46', '#a6404b', '#ac582c', '#719c33', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
-  //   field: 'seriesCustom_barColor2', // 字段
+    tabName: 'custom',
-  //   optionField: 'seriesCustom.barColor2', // 对应options中的字段
+    groupName: 'graph'
-  //   value: '#1db0dd',
+  },
-  //   tabName: 'custom',
+  {
-  //   groupName: 'graph'
+    label: '柱子底部颜色',
-  // },
+    // 设置组件类型
-  // {
+    type: 'colorSelect',
-  //   label: '柱子底部颜色',
+    // 字段
-  //   type: 'colorPicker', // 设置组件类型
+    field: 'seriesCustom_barBottomColor',
-  //   field: 'seriesCustom_barBottomColor', // 字段
+    // 对应options中的字段
-  //   optionField: 'seriesCustom.barBottomColor', // 对应options中的字段
+    optionField: 'seriesCustom.barBottomColor',
-  //   value: '#187dcb',
+    value: ['#0998d9', '#2ec6ad', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3', '#5B8FF9', '#61DDAA'],
-  //   tabName: 'custom',
+    tabName: 'custom',
-  //   groupName: 'graph'
+    groupName: 'graph'
-  // },
+  },
-  // {
+  {
-  //   label: '柱子背景顶部颜色',
+    label: '阴影柱子颜色',
-  //   type: 'colorPicker', // 设置组件类型
+    // 设置组件类型
-  //   field: 'seriesCustom_shadowTopColor', // 字段
+    type: 'colorSelect',
-  //   optionField: 'seriesCustom.shadowTopColor', // 对应options中的字段
+    // 字段
-  //   value: '#142f5a',
+    field: 'seriesCustom_shadowColor',
-  //   tabName: 'custom',
+    // 对应options中的字段
-  //   groupName: 'graph'
+    optionField: 'seriesCustom.shadowColor',
-  // },
+    value: ['#082442', '#0e2e3c', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
-  // {
+    tabName: 'custom',
-  //   label: '柱子背景颜色',
+    groupName: 'graph'
-  //   type: 'colorPicker', // 设置组件类型
+  },
-  //   field: 'seriesCustom_shadowColor', // 字段
+  {
-  //   optionField: 'seriesCustom.shadowColor', // 对应options中的字段
+    label: '阴影柱子顶部颜色',
-  //   value: '#041133',
+    // 设置组件类型
-  //   tabName: 'custom',
+    type: 'colorSelect',
-  //   groupName: 'graph'
+    // 字段
-  // },
+    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: {
+      color: '#115ba6',
-        normal: {
+      // itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+      //   normal: {
-            {
+      //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              offset: 0,
+      //       {
-              color: '#115ba6'
+      //         offset: 0,
-            },
+      //         color: '#115ba6'
-            {
+      //       },
-              offset: 1,
+      //       {
-              color: '#1db0dd'
+      //         offset: 1,
-            }
+      //         color: '#1db0dd'
-          ]),
+      //       }
-          opacity: 0.8,
+      //     ]),
-          shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
+      //     opacity: 0.8,
-          shadowBlur: 0 // 阴影模糊值
+      //     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: {
+      color: '#73eccd',
-        normal: {
+      // itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+      //   normal: {
-            {
+      //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              offset: 0,
+      //       {
-              color: '#73eccd'
+      //         offset: 0,
-            },
+      //         color: '#73eccd'
-            {
+      //       },
-              offset: 1,
+      //       {
-              color: '#4dd9e5'
+      //         offset: 1,
-            }
+      //         color: '#4dd9e5'
-          ]),
+      //       }
-          opacity: 0.8,
+      //     ]),
-          shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
+      //     opacity: 0.8,
-          shadowBlur: 0 // 阴影模糊值
+      //     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: {
+      color: 'rgba(9, 44, 76,.8)'
-        normal: {
-          color: 'rgba(9, 44, 76,.8)'
-        }
-      }
     },
     {
       id: 'shadowColor2',
@@ -774,11 +782,7 @@ const option = {
       data: maxData2,
       zlevel: 1,
       barWidth: 30,
-      itemStyle: {
+      color: 'rgba(16, 56, 70,.8)'
-        normal: {
-          color: 'rgba(16, 56, 70,.8)'
-        }
-      }
     },
     {
       id: 'shadowTopColor1',

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: {
+              color: '#115ba6',
-                normal: {
+              // itemStyle: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              //   normal: {
-                    {
+              //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                      offset: 0,
+              //       {
-                      color: '#115ba6'
+              //         offset: 0,
-                    },
+              //         color: '#115ba6'
-                    {
+              //       },
-                      offset: 1,
+              //       {
-                      color: '#1db0dd'
+              //         offset: 1,
-                    }
+              //         color: '#1db0dd'
-                  ]),
+              //       }
-                  opacity: 0.8,
+              //     ]),
-                  shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
+              //     opacity: 0.8,
-                  shadowBlur: 0 // 阴影模糊值
+              //     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 isGroup = _config.option.series.length !== 5
-      const hasSeries = _config.setting.find(item => item.optionField === 'seriesField' && item.value !== '')
+      // 宽度配置
+      _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') {
+      } else {
-            item.symbolSize = [seriesCustom.barWidth, seriesCustom.barWidth / 2]
+        // 如果是分组柱状图
-          } else if (item.type === 'bar') {
+        ids.forEach(id => {
-            item.barWidth = seriesCustom.barWidth
+          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