feat:修改G2组件的暗黑主题背景色透明

data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue

@@ -441,18 +441,18 @@ export default {
       }
     },
     // 改变
-    changeChart (themeName) {
+    // changeChart (themeName) {
-      // 统一改变组件的主题
+    //   // 统一改变组件的主题
-      const newChartList = cloneDeep(this.pageInfo.chartList)
+    //   const newChartList = cloneDeep(this.pageInfo.chartList)
-      const chartList = newChartList.map(chart => {
+    //   const chartList = newChartList.map(chart => {
-        chart.option.theme = themeName
+    //     chart.option.theme = themeName
-        chart.key = new Date().getTime()
+    //     chart.key = new Date().getTime()
-        // this.changeChartKey(chart.code)
+    //     // this.changeChartKey(chart.code)
-        return chart
+    //     return chart
-      })
+    //   })
-      // 可能需要强制性更新chartList
+    //   // 可能需要强制性更新chartList
-      this.changeLayout(chartList)
+    //   this.changeLayout(chartList)
-    },
+    // },
 
     // 新增数据集
     addCacheDataSet () {

data-room-ui/packages/PlotRender/index.vue

@@ -211,7 +211,7 @@ export default {
   color: #000000;
 }
 .auto-theme{
-  background-color: rgba(0,0,0,0);
+  background-color: transparent;
 }
 
 </style>

data-room-ui/packages/Render/index.vue

@@ -313,7 +313,7 @@ export default {
       if (_chart.type === 'customComponent') {
         option = {
           ...this.plotList?.find((plot) => plot.name === _chart.name)?.option,
-          theme: this.pageConfig.customTheme
+          theme: this.pageConfig.customTheme === 'dark' ? 'transparent' : 'light'
         }
       }
       const config = {
@@ -345,7 +345,7 @@ export default {
       if (_chart.type === 'customComponent') {
         option = {
           ...this.plotList?.find((plot) => plot.name === _chart.name)?.option,
-          theme: this.pageConfig.customTheme
+          theme: this.pageConfig.customTheme === 'dark' ? 'transparent' : 'light'
         }
       }
       const config = {

data-room-ui/packages/js/utils/themeFormatting.js

@@ -1,5 +1,4 @@
 
-
 /**
 * @Description: 主题设置格式化
 * @author liu.shiyi
@@ -25,13 +24,13 @@ export function settingToTheme (config, type) {
       if (config.customize && Object.keys(config.customize).length) {
         // customize属性存在层级
         for (const item in config.customize) {
-          const value = config.customize[item];
+          const value = config.customize[item]
           // 如果包含二级属性
           if (value && typeof value === 'object' && Object.keys(value).length) {
             // 对于二级属性
             for (const subKey in value) {
               if (subKey.includes('color') || subKey.includes('Color') || subKey.includes('BGC')) {
-                theme[type][`${item}_${subKey}`] = value[subKey];
+                theme[type][`${item}_${subKey}`] = value[subKey]
               }
             }
           } else {
@@ -53,7 +52,7 @@ export function themeToSetting (chartList, type) {
   // 排除掉主题非暗黑非明亮的情况
   if (['dark', 'light'].includes(type)) {
     chartList.forEach(chart => {
-      chart.option.theme = type
+      chart.option.theme = type === 'dark' ? 'transparent' : 'light'
       if (chart.theme && chart.theme[type]) {
         // 如果是g2组件或者远程组件
         if (['customComponent', 'remoteComponent'].includes(chart.type)) {
@@ -67,15 +66,15 @@ export function themeToSetting (chartList, type) {
         } else {
           // 如果是普通组件
           if (chart.customize && Object.keys(chart.customize).length) {
-            for(let key in chart.theme[type]){
+            for (const key in chart.theme[type]) {
-              const value = chart.theme[type][key];
+              const value = chart.theme[type][key]
               // 如果对应的是二级属性
               if (key.includes('_')) {
-                  const [propertyName, subPropertyName] = key.split('_');
+                const [propertyName, subPropertyName] = key.split('_')
                 if (!chart.customize[propertyName]) {
                   chart.customize[propertyName] = {}
                 } else {
-                      chart.customize[propertyName][subPropertyName] = value;
+                  chart.customize[propertyName][subPropertyName] = value
                 }
               } else {
                 // 对应的一级属性
@@ -84,7 +83,6 @@ export function themeToSetting (chartList, type) {
                   chart.customize[key] = chart.theme[type][key]
                 }
               }
-
             }
             for (const item in chart.customize) {
               // 检查 obj 中是否存在与 customize 相对应的属性