Merge branch 'master' of github.com:gcpaas/DataRoom

data-room-ui/packages/BasicComponents/CurrentTime/index.vue

@@ -117,7 +117,7 @@ export default {
   color: #000000;
 }
 .dark-theme {
-  background-color: #000000;
+  background-color:transparent;
   color: #ffffff;
 }
 .auto-theme {

data-room-ui/packages/BasicComponents/CurrentTime/settingConfig.js

@@ -21,7 +21,7 @@ const customConfig = {
   customize: {
     fontSize: 28,
     fontWeight: 700,
-    color: '#ffffff'
+    color: 'rgb(155 159 172)'
   }
 
 }

data-room-ui/packages/BasicComponents/FlyMap/index.vue

@@ -3,6 +3,7 @@
     style="width: 100%; height: 100%"
     class="bs-design-wrap bs-bar"
   >
+  <el-button class="button" v-if="this.level=='province'&&config.customize.down" @click="jumpTo(config)" type='text' > 返回上一级</el-button>
     <div
       :id="`chart${config.code}`"
       style="width: 100%; height: 100%"
@@ -33,7 +34,8 @@ export default {
     return {
       charts: null,
       hasData: false,
-      level:''
+      level:'',
+      option:{}
     }
   },
   computed: {
@@ -85,6 +87,15 @@ export default {
       }
       return config
     },
+    async jumpTo(config){
+      this.level='country'
+      const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/country/中华人民共和国.json`
+      const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
+      this.option.geo.map = '中华人民共和国';
+      this.changeData({...config,customize:{...config.customize,level:'country',scope:'中国'}})
+      echarts.registerMap('中华人民共和国', map);
+      this.charts.setOption(this.option, true);
+    },
     async newChart (config) {
       this.charts = echarts.init(
         document.getElementById(`chart${this.config.code}`)
@@ -106,10 +117,10 @@ export default {
           }
         })
         echarts.registerMap(config.customize.scope, res)
-        const option = {
+        this.option = {
           nameMap:config.customize.level=='world'?nameMap:'',
-          graphic: [
-          ],
+          // graphic: [
+          // ],
           geo: {
             map: config.customize.scope,
             zlevel: 10,
@@ -228,7 +239,7 @@ export default {
           ]
         }
         if (config.customize.visual) {
-          option.visualMap = {
+          this.option.visualMap = {
             show: false,
             min: config.customize.range[0],
             max: config.customize.range[1],
@@ -238,69 +249,17 @@ export default {
             }
           }
         }
-        if(config.customize.down){
-            // config?.customize?.graphic?.forEach((item,index)=>{
-            option.graphic.push({
-              type: "text",
-              left: `250px`,
-              top: "5%",
-              style: {
-                  text: '中国',
-                  font: `bolder ${config.customize.fontSize}px "Microsoft YaHei", sans-serif`,
-                  fill: config.customize.fontGraphicColor,
-              },
-              onclick:async()=>{
-                this.level='country'
-                const index = option.graphic.findIndex(i => i.style.text === '中国');
-                // 点击元素之后的所有元素全部删除
-                option.graphic.splice(index + 1);
-                const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/country/中华人民共和国.json`
-                const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
-                option.geo.map = '中华人民共和国'
-                this.changeData({...config,customize:{...config.customize,level:'country',scope:'中国'}})
-                echarts.registerMap('中华人民共和国', map);
-                this.charts.setOption(option, true);
-
-              }
-            },)
-          // })
-          }
-        this.charts.setOption(option)
+        this.charts.setOption(this.option)
          this.charts.on('click',  async(params)=> {
-          const index = option.graphic.findIndex(i => i.style.text === params.name);
-          if(params.name=='' || index !== -1) return
+          if(params.name=='') return
           if(config.customize.down===false||this.level==='province') return
-          const idx = option.graphic.length + 1;
-          option.graphic.push({
-            type: "text",
-            left: `${idx * 250}px`,
-            top: "5%",
-            style: {
-                text: params.name,
-                font: `bolder ${config.customize.fontSize}px "Microsoft YaHei", sans-serif`,
-                fill: config.customize.fontGraphicColor,
-            },
-            onclick: async() => {
-                const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/${params.name=='中华人民共和国'?'country':'province'}/${params.name}.json`
-                const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
-                // 利用函数的作用域，可以直接拿上面的name来用
-                const index = option.graphic.findIndex(i => i.style.text === params.name);
-                // 点击元素之后的所有元素全部删除
-                option.graphic.splice(index + 1);
-                // 很多操作重复了，你可以将公共部分抽离出来
-                option.geo.map = params.name;
-                this.changeData({...config,customize:{...config.customize,level:'province',scope:params.name}})
-                echarts.registerMap(params.name, map);
-                this.charts.setOption(option, true);
-            },
-        });
           this.level='province'
           const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/province/${params.name}.json`
           const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
           this.changeData({...config,customize:{...config.customize,level:'province',scope:params.name}})
-          option.geo.map = params.name
+          this.option.geo.map = params.name
           echarts.registerMap(params.name, map);
-          this.charts.setOption(option, true);
+          this.charts.setOption(this.option, true);
           });
       })
     }
@@ -317,4 +276,11 @@ export default {
 .auto-theme {
   background-color: rgba(0, 0, 0, 0);
 }
+.bs-design-wrap{
+  position: relative;
+  .button{
+    position: absolute;
+    z-index: 999;
+  }
+}
 </style>

data-room-ui/packages/BasicComponents/FlyMap/setting.vue

@@ -69,6 +69,7 @@
             v-model="config.customize.dataMap"
             popper-class="bs-el-select"
             class="bs-el-select"
+            @change="changeMap"
           >
             <el-option
               v-for="map in mapList"
@@ -89,7 +90,7 @@
             active-color="#007aff"
           />
         </el-form-item>
-        <el-form-item
+        <!-- <el-form-item
           v-if="config.customize.down"
           label="头部字体颜色"
           label-width="100px"
@@ -110,7 +111,7 @@
             controls-position="right"
             :step="1"
           />
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item
           label="地图分割线颜色"
           label-width="100px"
@@ -369,15 +370,21 @@ export default {
       this.$dataRoomAxios.get(`${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/design/map/list/${this.config.customize.level}`).then((res) => {
         this.mapList = res
       })
+    },
+     changeMap(val){
+      this.config.customize.scope=val.slice(0,-5)
     },
     changeLevel () {
       if (this.config.customize.level === 'country') {
         this.config.customize.dataMap = '中华人民共和国.json'
+        this.config.customize.scope='中国'
       } else if (this.config.customize.level === 'province') {
         this.getMapList()
         this.config.customize.dataMap = '安徽省.json'
+        this.config.customize.scope='安徽省'
         this.config.customize.down=false
       }else{
+        this.config.customize.scope='世界'
         this.config.customize.down=false
       }
     },

data-room-ui/packages/BasicComponents/Map/index.vue

@@ -3,6 +3,7 @@
     style="width: 100%; height: 100%"
     class="bs-design-wrap bs-bar"
   >
+  <el-button class="button" v-if="this.level=='province'&&config.customize.down" @click="jumpTo(config)" type='text' > 返回上一级</el-button>
     <div
       :id="`chart${config.code}`"
       style="width: 100%; height: 100%"
@@ -32,7 +33,8 @@ export default {
     return {
       charts: null,
       hasData: false,
-      level:''
+      level:'',
+      option:{}
     }
   },
   computed: {
@@ -88,11 +90,20 @@ export default {
       }
       return config
     },
+    async jumpTo(config){
+      this.level='country'
+      const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/country/中华人民共和国.json`
+      const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
+      this.option.geo.map = '中华人民共和国';
+      this.changeData({...config,customize:{...config.customize,level:'country',scope:'中国'}})
+      echarts.registerMap('中华人民共和国', map);
+      this.charts.setOption(this.option, true);
+    },
     async newChart (config) {
       this.charts = echarts.init(
         document.getElementById(`chart${this.config.code}`)
       )
-      const option = {
+      this.option = {
         // 背景颜色
         backgroundColor: config.customize.backgroundColor,
         graphic: [
@@ -252,7 +263,7 @@ export default {
             ]
       }
       if (config.customize.visual) {
-        option.visualMap = {
+        this.option.visualMap = {
           show: true,
           min: config.customize.range[0],
           max: config.customize.range[1],
@@ -262,72 +273,20 @@ export default {
           }
         }
       }
-      if(config.customize.down){
-            // config?.customize?.graphic?.forEach((item,index)=>{
-            option.graphic.push({
-              type: "text",
-              left: `220px`,
-              top: "5%",
-              style: {
-                  text: '中国',
-                  font: `bolder ${config.customize.fontSize}px "Microsoft YaHei", sans-serif`,
-                  fill: config.customize.fontGraphicColor,
-              },
-              onclick:async()=>{
-                this.level='country'
-                const index = option.graphic.findIndex(i => i.style.text === '中国');
-                // 点击元素之后的所有元素全部删除
-                option.graphic.splice(index + 1);
-                const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/country/中华人民共和国.json`
-                const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
-                option.geo.map = '中华人民共和国'
-                this.changeData({...config,customize:{...config.customize,level:'country',scope:'中国'}})
-                echarts.registerMap('中华人民共和国', map);
-                this.charts.setOption(option, true);
-
-              }
-            },)
-          // })
-          }
       const mapUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/${config.customize.level}/${config.customize.dataMap}`
       const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
       echarts.registerMap(config.customize.scope, map)
-      this.charts.setOption(option)
+      this.charts.setOption(this.option)
       this.charts.on('click',  async(params)=> {
-          const index = option.graphic.findIndex(i => i.style.text === params.name);
-          if(params.name=='' || index !== -1) return
+          if(params.name=='') return
           if(config.customize.down===false||this.level==='province') return
-          const idx = option.graphic.length + 1;
-          option.graphic.push({
-            type: "text",
-            left: `${idx * 220}px`,
-            top: "5%",
-            style: {
-                text: params.name,
-                font: `bolder ${config.customize.fontSize}px "Microsoft YaHei", sans-serif`,
-                fill: config.customize.fontGraphicColor,
-            },
-            onclick: async() => {
-                const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/${params.name=='中华人民共和国'?'country':'province'}/${params.name}.json`
-                const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
-                // 利用函数的作用域，可以直接拿上面的name来用
-                const index = option.graphic.findIndex(i => i.style.text === params.name);
-                // 点击元素之后的所有元素全部删除
-                option.graphic.splice(index + 1);
-                // 很多操作重复了，你可以将公共部分抽离出来
-                option.geo.map = params.name;
-                this.changeData({...config,customize:{...config.customize,level:'province',scope:params.name}})
-                echarts.registerMap(params.name, map);
-                this.charts.setOption(option, true);
-            },
-        });
           this.level='province'
           const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/province/${params.name}.json`
           const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
           this.changeData({...config,customize:{...config.customize,level:'province',scope:params.name}})
-          option.geo.map = params.name
+          this.option.geo.map = params.name
           echarts.registerMap(params.name, map);
-          this.charts.setOption(option, true);
+          this.charts.setOption(this.option, true);
           });
     }
   }
@@ -343,4 +302,11 @@ export default {
 .auto-theme {
   background-color: rgba(0, 0, 0, 0);
 }
+.bs-design-wrap{
+  position: relative;
+  .button{
+    position: absolute;
+    z-index: 999;
+  }
+}
 </style>

data-room-ui/packages/BasicComponents/Map/setting.vue

@@ -65,6 +65,7 @@
             v-model="config.customize.dataMap"
             popper-class="bs-el-select"
             class="bs-el-select"
+            @change="changeMap()"
           >
             <el-option
               v-for="map in mapList"
@@ -307,14 +308,20 @@ export default {
         this.mapList = res
       })
     },
+    changeMap(val){
+      this.config.customize.scope=val.slice(0,-5)
+    },
     changeLevel () {
       this.getMapList()
       if (this.config.customize.level === 'country') {
         this.config.customize.dataMap = '中华人民共和国.json'
+        this.config.customize.scope='中国'
       } else if (this.config.customize.level === 'province') {
         this.config.customize.dataMap = '安徽省.json'
+        this.config.customize.scope='安徽省'
         this.config.customize.down=false
       }else{
+        this.config.customize.scope='世界'
         this.config.customize.down=false
       }
     },

data-room-ui/packages/BasicComponents/ScreenScrollBoard/index.vue

@@ -5,7 +5,7 @@
   >
     <dv-scroll-board
       :key="updateKey"
-      :class="{'light-theme':customTheme === 'light','auto-theme':customTheme =='auto','dark-theme':customTheme =='dark'}"
+      :class="{'light-theme':customTheme === 'light','auto-theme':customTheme =='dark'}"
       :config="option"
       @click="rowClick"
     />

data-room-ui/packages/BasicComponents/ScreenScrollRanking/index.vue

@@ -6,7 +6,7 @@
     <dv-scroll-ranking-board
       :key="updateKey"
       class="ranking-box"
-      :class="{'light-theme':customTheme === 'light','auto-theme':customTheme =='auto','dark-theme':customTheme =='dark'}"
+      :class="{'light-theme':customTheme === 'light','auto-theme':customTheme =='dark'}"
       :config="option"
       @click="rowClick"
     />

data-room-ui/packages/BasicComponents/Tables/index.vue

@@ -68,9 +68,8 @@ export default {
   computed: {
     headerCellStyle () {
       const headerBackgroundColor = {
-        dark: '#141414',
         light: '#ffffff',
-        auto: 'transparent'
+        dark: 'transparent'
       }
       if (document.getElementById(this.config.code)?.querySelector('tr')) {
         document
@@ -124,9 +123,8 @@ export default {
 
     cellStyle ({ row, column, rowIndex, columnIndex }) {
       const bodyBackgroundColor = {
-        dark: '#141414',
         light: '#ffffff',
-        auto: 'transparent'
+        dark: 'transparent'
       }
       const initColor = this.customTheme === 'light' ? '#000000' : '#ffffff'
       const style = {

data-room-ui/packages/BasicComponents/Tables/settingConfig.js

@@ -41,13 +41,13 @@ const customConfig = {
     // 表格头部背景颜色
     headerBackgroundColor: '#232832',
     // 表格头部字体颜色
-    headerFontColor: '#ffffff',
+    headerFontColor: '#fff',
     // 表格头部字体大小
     headerFontSize: 14,
     // 表格主体背景颜色
     bodyBackgroundColor: '',
     // 表格主体字体颜色
-    bodyFontColor: '#ffffff',
+    bodyFontColor: 'rgb(155 159 172)',
     // 表格主体字体大小
     bodyFontSize: 14,
     // 表格是否需要斑马纹

data-room-ui/packages/BasicComponents/TimeCountDown/index.vue

@@ -176,7 +176,7 @@ export default {
   color: #000000;
 }
 .dark-theme {
-  background-color: #000000;
+  background-color: transparent;
   color: #ffffff;
 }
 .auto-theme {

data-room-ui/packages/BasicComponents/TimeCountDown/settingConfig.js

@@ -20,7 +20,7 @@ const customConfig = {
   customize: {
     fontSize: 28,
     fontWeight: 700,
-    color: '#ffffff'
+    color: 'rgb(155 159 172)'
   }
 
 }

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

@@ -361,7 +361,8 @@ export default {
       'changePageConfig',
       'changeLayout',
       'changeChartKey',
-      'changeRefreshConfig'
+      'changeRefreshConfig',
+      'changePageInfo'
     ]),
     // 切换主题时更新主题配置
     changeTheme (theme) {
@@ -440,18 +441,18 @@ export default {
       }
     },
     // 改变
-    changeChart (themeName) {
-      // 统一改变组件的主题
-      const newChartList = cloneDeep(this.pageInfo.chartList)
-      const chartList = newChartList.map(chart => {
-        chart.option.theme = themeName
-        chart.key = new Date().getTime()
-        // this.changeChartKey(chart.code)
-        return chart
-      })
-      // 可能需要强制性更新chartList
-      this.changeLayout(chartList)
-    },
+    // changeChart (themeName) {
+    //   // 统一改变组件的主题
+    //   const newChartList = cloneDeep(this.pageInfo.chartList)
+    //   const chartList = newChartList.map(chart => {
+    //     chart.option.theme = themeName
+    //     chart.key = new Date().getTime()
+    //     // this.changeChartKey(chart.code)
+    //     return chart
+    //   })
+    //   // 可能需要强制性更新chartList
+    //   this.changeLayout(chartList)
+    // },
 
     // 新增数据集
     addCacheDataSet () {

data-room-ui/packages/BigScreenDesign/PageDesignTop.vue

@@ -10,33 +10,31 @@
       <span class="logo-text name-span">{{ pageInfo.name }}</span>
     </div>
     <div class="head-btn-group">
-      <el-switch
-        v-model="pageInfo.pageConfig.customTheme"
-        active-text="暗黑"
-        inactive-text="明亮"
-        class="bs-el-switch theme-switch"
-        active-color="#007aff"
-        active-value="dark"
-        inactive-value="light"
-        @change="changeTheme"
-      />
-      <el-tooltip
-        v-for="(mode,index) in alignList"
-        :key="mode.value"
-        popper-class="bs-el-tooltip-dark"
-        effect="dark"
-        :content="mode.label"
-        placement="top"
+      <el-dropdown
+        trigger="click"
+        class="align-list-dropdown"
       >
         <CusBtn
-          class="align-btn"
-          @click="setAlign(mode.value)"
+          type="primary"
         >
-          <icon-svg
-            :name="iconList[index]"
-          />
+          对齐<i class="el-icon-arrow-down el-icon--right" />
         </CusBtn>
-      </el-tooltip>
+        <el-dropdown-menu
+          slot="dropdown"
+          class="align-dropdown-menu"
+        >
+          <el-dropdown-item
+            v-for="(mode,index) in alignList"
+            :key="mode.value"
+            @click.native="setAlign(mode.value)"
+          >
+            <icon-svg
+              style="padding:3px 20px"
+              :name="iconList[index]"
+            />
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
 
       <CusBtn
         :loading="saveAndPreviewLoading"
@@ -600,5 +598,22 @@ export default {
       color: var(--bs-el-color-primary)!important;
     }
   }
+  .align-list-dropdown{
+    color: #ffffff!important;
+  }
+
+}
+// 自定义dropdown的样式
+.align-dropdown-menu{
+  background-color: var(--bs-background-2)!important;
+  border: 1px solid var(--bs-border-1);
+  /deep/ .el-dropdown-menu__item{
+    background-color: var(--bs-background-2)!important;
+    &:hover {
+      color: var(--bs-el-color-primary) !important;
+      background-color: var(--bs-el-background-3) !important;
+    }
+  }
+
 }
 </style>

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/mixins/commonMixins.js

@@ -117,10 +117,20 @@ export default {
      * @description: 更新chart
      * @param {Object} config
      */
-    changeData (config, filterList) {
+    changeData(config, filterList) {
+      const list = config?.paramsList?.map((item) => {
+        if (item.value === '${level}') {
+          return {...item,value:config.customize.level}
+        } else if (item.value === '${name}') {
+          return {...item,value:config.customize.scope}
+        } else {
+          return item
+        }
+      })
       const params = {
         chart: {
           ...config,
+          paramsList:list?[...list]:[],
           option: undefined
         },
         current: 1,

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

@@ -1,5 +1,4 @@
 
-
 /**
 * @Description: 主题设置格式化
 * @author liu.shiyi
@@ -25,16 +24,16 @@ 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];
-          //如果包含二级属性
-          if (value && typeof value === 'object' &&  Object.keys(value).length){
+          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];
+              if (subKey.includes('color') || subKey.includes('Color') || subKey.includes('BGC')) {
+                theme[type][`${item}_${subKey}`] = value[subKey]
               }
             }
-          }else{
+          } else {
             // 如果只有一级属性
             if (item.includes('color') || item.includes('Color') || item.includes('BGC')) {
               theme[type][item] = config.customize[item]
@@ -45,7 +44,7 @@ export function settingToTheme (config, type) {
     }
     return theme
   } else {
-    return config?.theme || {dark:{}, light:{}}
+    return config?.theme || { dark: {}, light: {} }
   }
 }
 // 将保存的theme主题设置（颜色）存放到chartList
@@ -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,24 +66,23 @@ export function themeToSetting (chartList, type) {
         } else {
           // 如果是普通组件
           if (chart.customize && Object.keys(chart.customize).length) {
-            for(let key in chart.theme[type]){
-              const value = chart.theme[type][key];
+            for (const key in chart.theme[type]) {
+              const value = chart.theme[type][key]
               // 如果对应的是二级属性
-                if (key.includes('_')){
-                  const [propertyName, subPropertyName] = key.split('_');
-                  if (!chart.customize[propertyName]) {
-                    chart.customize[propertyName] = {}
-                  }else{
-                      chart.customize[propertyName][subPropertyName] = value;
-                  }
-                }else{
-                  // 对应的一级属性
-                  if (Object.prototype.hasOwnProperty.call(chart.customize, key)) {
-                    // 更新 customize 中对应项的值为 theme 中的属性值
-                    chart.customize[key] = chart.theme[type][key]
-                  }
+              if (key.includes('_')) {
+                const [propertyName, subPropertyName] = key.split('_')
+                if (!chart.customize[propertyName]) {
+                  chart.customize[propertyName] = {}
+                } else {
+                  chart.customize[propertyName][subPropertyName] = value
                 }
-
+              } else {
+                // 对应的一级属性
+                if (Object.prototype.hasOwnProperty.call(chart.customize, key)) {
+                  // 更新 customize 中对应项的值为 theme 中的属性值
+                  chart.customize[key] = chart.theme[type][key]
+                }
+              }
             }
             for (const item in chart.customize) {
               // 检查 obj 中是否存在与 customize 相对应的属性