diff --git a/core/core-frontend/src/custom-component/de-tree/Component.vue b/core/core-frontend/src/custom-component/de-tree/Component.vue
index da4869c..69915c2 100644
--- a/core/core-frontend/src/custom-component/de-tree/Component.vue
+++ b/core/core-frontend/src/custom-component/de-tree/Component.vue
@@ -1,14 +1,13 @@
 <template>
-    <div>
-       <div v-if="element.propValue.length > 0">
-        <el-tree :data="element.propValue"
-         :props="element.defaultProps"
-         />
+    <div style="width: 100%;height: 100%;overflow: auto;"> 
+       <div v-if="state.data.length > 0">
+        <el-tree :data="state.data"
+         :props="state.defaultProps"
+        />
        </div> 
        <div v-else>
-          <span>树暂无数据11353451{{element.propValue}}{{element.defaultProps}}</span>
+          <span>树暂无数据</span>
        </div>
-       <div>232</div>
     </div>
   </template>
   
@@ -92,552 +91,105 @@
     default: 'common'
   }
   })
-//   const {
-//     element,
-//     isEdit,
-//     showPosition,
-//     canvasStyleData,
-//     canvasViewInfo,
-//     dvInfo,
-//     scale,
-//     searchCount
-//   } = toRefs(props)
-//   const defaultProps = {
-//       children: 'children',
-//       label: 'label',
-//     }
-//     const data = [
-//   {
-//     label: 'Level one 1',
-//     children: [
-//       {
-//         label: 'Level two 1-1',
-//         children: [
-//           {
-//             label: 'Level three 1-1-1',
-//           },
-//         ],
-//       },
-//     ],
-//   },
-//   {
-//     label: 'Level one 2',
-//     children: [
-//       {
-//         label: 'Level two 2-1',
-//         children: [
-//           {
-//             label: 'Level three 2-1-1',
-//           },
-//         ],
-//       },
-//       {
-//         label: 'Level two 2-2',
-//         children: [
-//           {
-//             label: 'Level three 2-2-1',
-//           },
-//         ],
-//       },
-//     ],
-//   },
-//   {
-//     label: 'Level one 3',
-//     children: [
-//       {
-//         label: 'Level two 3-1',
-//         children: [
-//           {
-//             label: 'Level three 3-1-1',
-//           },
-//         ],
-//       },
-//       {
-//         label: 'Level two 3-2',
-//         children: [
-//           {
-//             label: 'Level three 3-2-1',
-//           },
-//         ],
-//       },
-//     ],
-//   },
-// ]
-
-//   const titleBackgroundActiveSvgInner = computed(() => {
-//     return element.value.titleBackground.active.innerImage.replace('board/', '').replace('.svg', '')
-//   })
-  
-//   const titleBackgroundInActiveSvgInner = computed(() => {
-//     return element.value.titleBackground.inActive.innerImage.replace('board/', '').replace('.svg', '')
-//   })
-  
-//   const svgInnerInActiveEnable = itemName => {
-//     const { backgroundImageEnable, backgroundType, innerImage } =
-//       element.value.titleBackground.inActive
-//     return (
-//       editableTabsValue.value !== itemName &&
-//       !element.value.titleBackground.multiply &&
-//       element.value.titleBackground?.enable &&
-//       backgroundImageEnable &&
-//       backgroundType === 'innerImage' &&
-//       typeof innerImage === 'string'
-//     )
-//   }
-  
-//   const svgInnerActiveEnable = itemName => {
-//     const { backgroundImageEnable, backgroundType, innerImage } = element.value.titleBackground.active
-//     return (
-//       (editableTabsValue.value === itemName || element.value.titleBackground.multiply) &&
-//       element.value.titleBackground?.enable &&
-//       backgroundImageEnable &&
-//       backgroundType === 'innerImage' &&
-//       typeof innerImage === 'string'
-//     )
-//   }
-  
-//   // tooltips 轮播会影响tab 展示
-//   const viewToolTipsChange = () => {
-//     element.value.propValue?.forEach(tabItem => {
-//       const tMethod =
-//         editableTabsValue.value === tabItem.name
-//           ? ChartCarouselTooltip.resume
-//           : ChartCarouselTooltip.paused
-//       tabItem.componentData?.forEach(componentItem => {
-//         tMethod(componentItem.id)
-//         if (componentItem.component === 'Group')
-//           componentItem.propValue.forEach(groupItem => {
-//             tMethod(groupItem.id)
-//           })
-//       })
-//     })
-//   }
-  
-//   const handleMouseEnter = () => {
-//     state.hoverFlag = true
-//   }
-  
-//   const handleMouseLeave = () => {
-//     state.hoverFlag = false
-//   }
-//   const state = reactive({
-//     activeTabName: '',
-//     curItem: {},
-//     textarea: '',
-//     dialogVisible: false,
-//     tabShow: true,
-//     hoverFlag: false
-//   })
-//   const tabsAreaScroll = ref(false)
-//   const editableTabsValue = ref(null)
-  
-//   // 无边框
-//   const noBorderColor = ref('none')
-//   let currentInstance
-  
-//   const showTabTitleFlag = computed(() => {
-//     debugger
-//     if (element.value && element.value.style && element.value.style?.showTabTitle === false) {
-//       return false
-//     } else {
-//       return element.value.style?.showTabTitle
-//     }
-//   })
-  
-//   const isEditMode = computed(() => editMode.value === 'edit' && isEdit.value && !mobileInPc.value)
-//   const curThemes = isDashboard() ? 'light' : 'dark'
-//   const calcTabLength = () => {
-//     setTimeout(() => {
-//       if (element.value.propValue.length > 1) {
-//         const containerDom = document.getElementById(
-//           'tab-' + element.value.propValue[element.value.propValue.length - 1].name
-//         )
-//         tabsAreaScroll.value =
-//           containerDom.parentNode.clientWidth > tabComponentRef.value.clientWidth - 100
-//       } else {
-//         tabsAreaScroll.value = false
-//       }
-//     })
-//   }
-  
-//   const beforeHandleCommand = (item, param) => {
-//     return {
-//       command: item,
-//       param: param
-//     }
-//   }
-//   const curPreviewGap = computed(() =>
-//     dvInfo.value.type === 'dashboard' && canvasStyleData.value['dashboard'].gap === 'yes'
-//       ? canvasStyleData.value['dashboard'].gapSize
-//       : 0
-//   )
-  
-//   function sureCurTitle() {
-//     state.curItem.title = state.textarea
-//     state.dialogVisible = false
-//     snapshotStore.recordSnapshotCache('sureCurTitle')
-//   }
-  
-//   function addTab() {
-//     const newName = guid()
-//     const newTab = {
-//       name: newName,
-//       title: t('visualization.new_tab'),
-//       componentData: [],
-//       closable: true
-//     }
-//     element.value.propValue.push(newTab)
-//     editableTabsValue.value = newTab.name
-//     snapshotStore.recordSnapshotCache('addTab')
-//   }
-  
-//   function deleteCur(param) {
-//     state.curItem = param
-//     let len = element.value.propValue.length
-//     while (len--) {
-//       if (element.value.propValue[len].name === param.name) {
-//         element.value.propValue.splice(len, 1)
-//         const activeIndex =
-//           (len - 1 + element.value.propValue.length) % element.value.propValue.length
-//         editableTabsValue.value = element.value.propValue[activeIndex].name
-//         state.tabShow = false
-//         nextTick(() => {
-//           state.tabShow = true
-//         })
-//       }
-//     }
-//   }
-//   function copyCur(param) {
-//     addTab()
-//     const newTabItem = element.value.propValue[element.value.propValue.length - 1]
-//     const idMap = {}
-//     const newCanvasId = element.value.id + '--' + newTabItem.name
-//     newTabItem.componentData = deepCopyTabItemHelper(newCanvasId, param.componentData, idMap)
-//     dvMainStore.updateCopyCanvasView(idMap)
-//   }
-  
-//   function editCurTitle(param) {
-//     state.activeTabName = param.name
-//     state.curItem = param
-//     state.textarea = param.title
-//     state.dialogVisible = true
-//   }
-  
-//   function handleCommand(command) {
-//     switch (command.command) {
-//       case 'editTitle':
-//         editCurTitle(command.param)
-//         break
-//       case 'deleteCur':
-//         deleteCur(command.param)
-//         snapshotStore.recordSnapshotCache('deleteCur')
-//         break
-//       case 'copyCur':
-//         copyCur(command.param)
-//         snapshotStore.recordSnapshotCache('copyCur')
-//         break
-//     }
-//   }
-  
-//   const reloadLinkage = () => {
-//     // 刷新联动信息
-//     if (dvInfo.value.id) {
-//       const resourceTable = ['canvas', 'canvasDataV', 'edit'].includes(showPosition.value)
-//         ? 'snapshot'
-//         : 'core'
-//       getPanelAllLinkageInfo(dvInfo.value.id, resourceTable).then(rsp => {
-//         dvMainStore.setNowPanelTrackInfo(rsp.data)
-//       })
-//     }
-//   }
-  
-//   const componentMoveIn = component => {
-//     element.value.propValue.forEach((tabItem, index) => {
-//       if (editableTabsValue.value === tabItem.name) {
-//         //获取主画布当前组件的index
-//         if (isDashboard()) {
-//           eventBus.emit('removeMatrixItemById-canvas-main', component.id)
-//           dvMainStore.setCurComponent({ component: null, index: null })
-//           component.canvasId = element.value.id + '--' + tabItem.name
-//           const refInstance = currentInstance.refs['tabCanvas_' + index][0]
-//           if (refInstance) {
-//             const matrixBase = refInstance.getBaseMatrixSize() //矩阵基础大小
-//             canvasChangeAdaptor(component, matrixBase)
-//             component.x = 1
-//             component.y = 200
-//             component.style.left = 0
-//             component.style.top = 0
-//             tabItem.componentData.push(component)
-//             refInstance.addItemBox(component) //在适当的时候初始化布局组件
-//             nextTick(() => {
-//               refInstance.canvasInitImmediately()
-//             })
-//           }
-//         } else {
-//           const curIndex = findComponentIndexById(component.id)
-//           // 从主画布删除
-//           dvMainStore.deleteComponent(curIndex)
-//           dvMainStore.setCurComponent({ component: null, index: null })
-//           component.canvasId = element.value.id + '--' + tabItem.name
-//           dataVTabComponentAdd(component, element.value)
-//           tabItem.componentData.push(component)
-//         }
-//       }
-//     })
-  
-//     reloadLinkage()
-//   }
-  
-//   const componentMoveOut = component => {
-//     if (isDashboard()) {
-//       canvasChangeAdaptor(component, bashMatrixInfo.value, true)
-//     }
-//     // 从Tab画布中移除
-//     eventBus.emit('removeMatrixItemById-' + component.canvasId, component.id)
-//     dvMainStore.setCurComponent({ component: null, index: null })
-//     // 主画布中添加
-//     if (isDashboard()) {
-//       eventBus.emit('moveOutFromTab-canvas-main', component)
-//     } else {
-//       addToMain(component)
-//     }
-//     reloadLinkage()
-//   }
-  
-//   const addToMain = component => {
-//     const { left, top } = element.value.style
-//     component.style.left = component.style.left + left
-//     component.style.top = component.style.top + top
-//     component.canvasId = 'canvas-main'
-//     dvMainStore.addComponent({
-//       component,
-//       index: undefined,
-//       isFromGroup: true
-//     })
-//   }
-  
-//   const moveActive = computed(() => {
-//     return tabMoveInActiveId.value && tabMoveInActiveId.value === element.value.id
-//   })
-  
-//   const headClass = computed(() => {
-//     if (tabsAreaScroll.value) {
-//       return 'tab-head-left'
-//     } else {
-//       return 'tab-head-' + element.value.style.headHorizontalPosition
-//     }
-//   })
-  
-//   const backgroundStyle = backgroundParams => {
-//     if (backgroundParams) {
-//       const {
-//         backdropFilterEnable,
-//         backdropFilter,
-//         backgroundColorSelect,
-//         backgroundColor,
-//         backgroundImageEnable,
-//         backgroundType,
-//         outerImage,
-//         innerPadding,
-//         borderRadius
-//       } = backgroundParams
-//       let style = {
-//         padding: innerPadding * scale.value + 'px',
-//         borderRadius: borderRadius + 'px'
-//       }
-//       let colorRGBA = ''
-//       if (backgroundColorSelect && backgroundColor) {
-//         colorRGBA = backgroundColor
-//       }
-//       if (backgroundImageEnable) {
-//         if (backgroundType === 'outerImage' && typeof outerImage === 'string') {
-//           style['background'] = `url(${imgUrlTrans(outerImage)}) no-repeat ${colorRGBA}`
-//         } else {
-//           style['background-color'] = colorRGBA
-//         }
-//       } else {
-//         style['background-color'] = colorRGBA
-//       }
-//       if (backdropFilterEnable) {
-//         style['backdrop-filter'] = 'blur(' + backdropFilter + 'px)'
-//       }
-//       return style
-//     }
-//     return {}
-//   }
-  
-//   const titleStyle = itemName => {
-//     let style = {}
-//     if (editableTabsValue.value === itemName) {
-//       style = {
-//         textDecoration: element.value.style.textDecoration,
-//         fontStyle: element.value.style.fontStyle,
-//         fontWeight: element.value.style.fontWeight,
-//         fontSize: (element.value.style.activeFontSize || 18) + 'px',
-//         lineHeight: (element.value.style.activeFontSize || 18) + 'px'
-//       }
-//       if (element.value.titleBackground?.enable) {
-//         style = {
-//           ...style,
-//           ...backgroundStyle(element.value.titleBackground.active)
-//         }
-//       }
-//     } else {
-//       style = {
-//         textDecoration: element.value.style.textDecoration,
-//         fontStyle: element.value.style.fontStyle,
-//         fontWeight: element.value.style.fontWeight,
-//         fontSize: (element.value.style.fontSize || 16) + 'px',
-//         lineHeight: (element.value.style.fontSize || 16) + 'px'
-//       }
-//       if (element.value.titleBackground?.enable) {
-//         style = {
-//           ...style,
-//           ...backgroundStyle(
-//             element.value.titleBackground.multiply
-//               ? element.value.titleBackground.active
-//               : element.value.titleBackground.inActive
-//           )
-//         }
-//       }
-//     }
-//     return style
-//   }
-  
-//   const fontColor = computed(() => {
-//     if (
-//       element.value &&
-//       element.value.style &&
-//       element.value.style.headFontColor &&
-//       typeof element.value.style.headFontColor === 'string'
-//     ) {
-//       return element.value.style.headFontColor
-//     } else {
-//       return 'none'
-//     }
-//   })
-  
-//   const activeColor = computed(() => {
-//     if (
-//       element.value &&
-//       element.value.style &&
-//       element.value.style.headFontActiveColor &&
-//       typeof element.value.style.headFontActiveColor === 'string'
-//     ) {
-//       return element.value.style.headFontActiveColor
-//     } else {
-//       return 'none'
-//     }
-//   })
-  
-//   const borderActiveColor = computed(() => {
-//     if (
-//       element.value &&
-//       element.value.style &&
-//       element.value.style.headBorderActiveColor &&
-//       typeof element.value.style.headBorderActiveColor === 'string'
-//     ) {
-//       return element.value.style.headBorderActiveColor
-//     } else {
-//       return 'none'
-//     }
-//   })
-  
-//   const titleValid = computed(() => {
-//     return !!state.textarea && !!state.textarea.trim()
-//   })
-  
-//   watch(
-//     () => element.value,
-//     () => {
-//       calcTabLength()
-//     },
-//     { deep: true }
-//   )
-  
-//   const reShow = () => {
-//     state.tabShow = false
-//     nextTick(() => {
-//       state.tabShow = true
-//     })
-//   }
-  
-//   watch(
-//     () => isEditMode.value,
-//     () => {
-//       initCarousel()
-//     }
-//   )
-  
-//   watch(
-//     () => editableTabsValue.value,
-//     () => {
-//       viewToolTipsChange()
-//     }
-//   )
-//   const initCarousel = () => {
-//     carouselTimer && clearInterval(carouselTimer)
-//     carouselTimer = null
-//     if (!isEditMode.value) {
-//       if (element.value.carousel?.enable) {
-//         const switchTime = (element.value.carousel.time || 5) * 1000
-//         let switchCount = 1
-//         // 轮播定时器
-//         carouselTimer = setInterval(() => {
-//           // 鼠标移入时 停止轮播
-//           if (!state.hoverFlag) {
-//             const nowIndex = switchCount % element.value.propValue.length
-//             switchCount++
-//             nextTick(() => {
-//               editableTabsValue.value = element.value.propValue[nowIndex].name
-//             })
-//           }
-//         }, switchTime)
-//       }
-//     }
-//   }
-  
-  onMounted(() => {
-    console.log(props.view)
-    initview()
-    // if (element.value.propValue.length > 0) {
-    //   editableTabsValue.value = element.value.propValue[0].name
-    // }
-    // calcTabLength()
-    // if (['canvas', 'canvasDataV', 'edit'].includes(showPosition.value) && !mobileInPc.value) {
-    //   eventBus.on('onTabMoveIn-' + element.value.id, componentMoveIn)
-    //   eventBus.on('onTabMoveOut-' + element.value.id, componentMoveOut)
-    //   eventBus.on('onTabSortChange-' + element.value.id, reShow)
-    // }
-    // currentInstance = getCurrentInstance()
-    // initCarousel()
-    // nextTick(() => {
-    //   groupSizeStyleAdaptor(element.value)
-    // })
-    // setTimeout(() => {
-    //   viewToolTipsChange()
-    // }, 1000)
+  const state = reactive({
+    data:[],
+    defaultProps:{ children: 'children', label: 'name' }
   })
-  function initview(){
-    debugger
-    getData(props.view).then(res => {
-      console.log(res,378923749234)
-    })
-  }
-  // onBeforeUnmount(() => {
-  //   if (['canvas', 'canvasDataV', 'edit'].includes(showPosition.value) && !mobileInPc.value) {
-  //     eventBus.off('onTabMoveIn-' + element.value.id, componentMoveIn)
-  //     eventBus.off('onTabMoveOut-' + element.value.id, componentMoveOut)
-  //     eventBus.off('onTabSortChange-' + element.value.id, reShow)
-  //   }
-  // })
-  // onBeforeMount(() => {
-  //   if (carouselTimer) {
-  //     clearInterval(carouselTimer)
-  //     carouselTimer = null
-  //   }
-  // })
-
+  const initReady = ref(false)
+  const calcData = (view: Chart, callback) => {
+  const v = JSON.parse(JSON.stringify(view))
+  getData(v)
+      .then(res => {
+        if (res.code && res.code !== 0) {
+        } else {
+          console.log(res,6575)
+          const resdata:any = res
+          const flatData = convertToFlatData(resdata.data.fields,resdata.data.tableRow)
+          state.data = convertToTree(flatData)
+          debugger
+          if(resdata?.drillFields.length > 0){
+            state.defaultProps.label = resdata.drillFields[0].originName
+          }
+          // originName
+          // 钻取维度drillFields
+          // state.data = res?.data?.fields ?? []
+          initReady.value = true
+        }
+        callback?.()
+        nextTick(() => {
+          initReady.value = true
+        })
+      })
+      .catch(() => {
+        nextTick(() => {
+          initReady.value = true
+        })
+        callback?.()
+      })
+  // getData(props.view).then(res => {
+  //     console.log(res,378923749234)
+  //   })
+  nextTick(() => {
+          initReady.value = true
+        })
+        callback?.()
+}
+function convertToFlatData(fields:any, tableRow:any) {
+  // 查找需要的字段
+  const idField = fields.find(field => field.originName === 'id');
+  const parentIdField = fields.find(field => field.originName === 'parentid');
+  const orgNameField = fields.find(field => field.originName === 'orgname');
+  const orgTypeField = fields.find(field => field.originName === 'orgtype');
+  const managerField = fields.find(field => field.originName === 'manager');
+  
+  // 转换数据
+  return tableRow.map(row => {
+    return {
+      id: row[idField.gisbiName],
+      parentid: row[parentIdField.gisbiName],
+      orgname: row[orgNameField.gisbiName],
+      orgtype: row[orgTypeField.gisbiName],
+      manager: row[managerField.gisbiName]
+    };
+  });
+}
+function convertToTree(data, rootId = '0') {
+  // 创建一个映射表，用于快速查找节点
+  const nodeMap = {};
+  // 存储根节点
+  const roots = [];
+  
+  // 初始化所有节点，添加children属性
+  data.forEach(item => {
+    nodeMap[item.id] = { ...item, children: [] };
+  });
+  
+  // 构建树形结构
+  data.forEach(item => {
+    const node = nodeMap[item.id];
+    if (item.parentid === rootId || item.parentid === '') {
+      // 如果是根节点，添加到根节点数组
+      roots.push(node);
+    } else {
+      // 如果有父节点，将其添加到父节点的children中
+      const parent = nodeMap[item.parentid];
+      if (parent) {
+        parent.children.push(node);
+      } else {
+        // 如果找不到父节点，也当作根节点处理
+        roots.push(node);
+      }
+    }
+  });
+  
+  return roots;
+}
+onMounted(() => {
+    console.log(props.view)
+  })
+defineExpose({
+  calcData
+})
   </script>
   <style lang="less" scoped>
   .title-hidde-tab {
diff --git a/core/core-frontend/src/models/chart/editor.d.ts b/core/core-frontend/src/models/chart/editor.d.ts
index b1ea3fb..b501e5e 100644
--- a/core/core-frontend/src/models/chart/editor.d.ts
+++ b/core/core-frontend/src/models/chart/editor.d.ts
@@ -34,6 +34,7 @@ declare type EditorProperty =
   | 'summary-selector'
   | 'bullet-graph-selector'
   | 'graphic-text-selector'
+  | 'basic-attributes-selector'
 declare type EditorPropertyInner = {
   [key in EditorProperty]?: string[]
 }
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
index 4b92aba..67906e5 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
@@ -16,6 +16,7 @@ import { storeToRefs } from 'pinia'
 import CollapseSwitchItem from '@/components/collapse-switch-item/src/CollapseSwitchItem.vue'
 import { ElCollapse, ElCollapseItem } from 'element-plus-secondary'
 import BasicStyleSelector from '@/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue'
+import BasicAttributesSelector from '@/views/chart/components/editor/editor-style/components/BasicAttributesSelector.vue'
 import SymbolicStyleSelector from '@/views/chart/components/editor/editor-style/components/SymbolicStyleSelector.vue'
 import DualBasicStyleSelector from '@/views/chart/components/editor/editor-style/components/DualBasicStyleSelector.vue'
 import ComponentPosition from '@/components/visualization/common/ComponentPosition.vue'
@@ -273,6 +274,22 @@ watch(
           >
             <component-position :themes="themes" />
           </el-collapse-item>
+          
+          <el-collapse-item
+            :effect="themes"
+            name="basicStyle"
+            :title="t('chart.basic_style')"
+            v-if="showProperties('basic-attributes-selector')"
+          >
+            <basic-attributes-selector
+              :property-inner="propertyInnerAll['basic-attributes-selector']"
+              :themes="themes"
+              :chart="chart"
+              :allGraphcs = "props.allGraphcs"
+              @onBasicStyleChange="onBasicStyleChange"
+              @onMiscChange="onMiscChange"
+            />
+          </el-collapse-item>
           <el-collapse-item
             :effect="themes"
             name="basicStyle"
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicAttributesSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicAttributesSelector.vue
new file mode 100644
index 0000000..9643f00
--- /dev/null
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicAttributesSelector.vue
@@ -0,0 +1,468 @@
+<script lang="ts" setup>
+import icon_letterSpacing_outlined from '@/assets/svg/icon_letter-spacing_outlined.svg'
+import icon_bold_outlined from '@/assets/svg/icon_bold_outlined.svg'
+import icon_italic_outlined from '@/assets/svg/icon_italic_outlined.svg'
+import icon_leftAlignment_outlined from '@/assets/svg/icon_left-alignment_outlined.svg'
+import icon_centerAlignment_outlined from '@/assets/svg/icon_center-alignment_outlined.svg'
+import icon_rightAlignment_outlined from '@/assets/svg/icon_right-alignment_outlined.svg'
+import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
+import { PropType, computed, onMounted, reactive, toRefs, watch, nextTick, ref } from 'vue'
+import { useAppearanceStoreWithOut } from '@/store/modules/appearance'
+import { useI18n } from '@/hooks/web/useI18n'
+import {
+    COLOR_PANEL,
+    CHART_FONT_FAMILY,
+    CHART_FONT_LETTER_SPACE,
+    DEFAULT_TITLE_STYLE
+} from '@/views/chart/components/editor/util/chart'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { storeToRefs } from 'pinia'
+import { cloneDeep, defaultsDeep } from 'lodash-es'
+import { ElButton, ElIcon } from 'element-plus-secondary'
+import Icon from '@/components/icon-custom/src/Icon.vue'
+const dvMainStore = dvMainStoreWithOut()
+const { batchOptStatus, mobileInPc } = storeToRefs(dvMainStore)
+
+const { t } = useI18n()
+
+const props = defineProps({
+    chart: {
+        type: Object,
+        required: true
+    },
+    themes: {
+        type: String as PropType<EditorTheme>,
+        default: 'dark'
+    },
+    propertyInner: {
+        type: Array<string>
+    }
+})
+const appearanceStore = useAppearanceStoreWithOut()
+const emit = defineEmits(['onTextChange'])
+const toolTip = computed(() => {
+    return props.themes === 'dark' ? 'light' : 'dark'
+})
+const predefineColors = COLOR_PANEL
+const fontFamily = CHART_FONT_FAMILY.concat(
+    appearanceStore.fontList.map(ele => ({
+        name: ele.name,
+        value: ele.name
+    }))
+)
+const fontLetterSpace = CHART_FONT_LETTER_SPACE
+
+const state = reactive({
+    titleForm: JSON.parse(JSON.stringify(DEFAULT_TITLE_STYLE))
+})
+
+const { chart } = toRefs(props)
+
+const fontSizeList = computed(() => {
+    const arr = []
+    for (let i = 10; i <= 40; i = i + 2) {
+        arr.push({
+            name: i + '',
+            value: i
+        })
+    }
+    for (let i = 50; i <= 200; i = i + 10) {
+        arr.push({
+            name: i + '',
+            value: i
+        })
+    }
+    return arr
+})
+
+const changeTitleStyle = prop => {
+    emit('onTextChange', state.titleForm, prop)
+}
+
+const init = () => {
+    const customText = defaultsDeep(
+        cloneDeep(props.chart?.customStyle?.text),
+        cloneDeep(DEFAULT_TITLE_STYLE)
+    )
+
+    state.titleForm = cloneDeep(customText)
+
+    //第一次颜色可能赋值失败，单独赋值一次
+    nextTick(() => {
+        state.titleForm.color = customText.color
+    })
+}
+
+const showEditRemark = ref<boolean>(false)
+const tempRemark = ref<string>('')
+
+const openEditRemark = () => {
+    tempRemark.value = cloneDeep(state.titleForm.remark)
+    showEditRemark.value = true
+}
+
+const closeEditRemark = () => {
+    showEditRemark.value = false
+    tempRemark.value = ''
+}
+
+const saveEditRemark = () => {
+    showEditRemark.value = false
+    state.titleForm.remark = tempRemark.value
+    changeTitleStyle('remark')
+}
+
+onMounted(() => {
+    init()
+})
+
+watch(
+    () => props.chart?.customStyle?.text,
+    () => {
+        init()
+    },
+    { deep: true }
+)
+</script>
+
+<template>
+    <div>
+        <el-form ref="titleForm" :disabled="!state.titleForm.show" :model="state.titleForm" label-position="top"
+            size="small">
+            <el-form-item class="form-item" :class="'form-item-' + themes">
+                <el-checkbox size="small" :effect="themes" v-model="state.titleForm.remarkShow"
+                    @change="changeTitleStyle('remarkShow')">
+                    <!-- {{ t('chart.remark_show') }} -->
+                    是否全部展开
+                </el-checkbox>
+            </el-form-item>
+            <el-form-item class="form-item" :class="'form-item-' + themes">
+                <el-checkbox size="small" :effect="themes" v-model="state.titleForm.remarkShow"
+                    @change="changeTitleStyle('remarkShow')">
+                    <!-- {{ t('chart.remark_show') }} -->
+                    是否高亮节点
+                </el-checkbox>
+            </el-form-item>
+            <!-- 高亮设置 -->
+            <div>
+                <div class="formtitle">高亮样式</div>
+                <el-form-item label="背景色" class="form-item" :class="'form-item-' + themes" style="padding-right: 4px">
+                    <el-color-picker :effect="themes" v-model="state.titleForm.color" class="color-picker-style"
+                        :predefine="predefineColors" @change="changeTitleStyle('remarkShow')" is-custom />
+                </el-form-item>
+                <div class="formtitle">高亮文本</div>
+                <div style="display: flex">
+                    <el-form-item class="form-item" :class="'form-item-' + themes" style="padding-right: 4px">
+                        <el-color-picker :effect="themes" v-model="state.titleForm.color" class="color-picker-style"
+                            :predefine="predefineColors" @change="changeTitleStyle('color')" is-custom />
+                    </el-form-item>
+                    <el-form-item class="form-item" :class="'form-item-' + themes" style="padding: 0 4px">
+                        <el-tooltip :content="t('chart.font_size')" :effect="toolTip" placement="top">
+                            <el-select style="width: 56px" :effect="themes" v-model="state.titleForm.fontSize"
+                                :placeholder="t('chart.text_fontsize')" size="small"
+                                @change="changeTitleStyle('fontSize')">
+                                <el-option v-for="option in fontSizeList" :key="option.value" :label="option.name"
+                                    :value="option.value" />
+                            </el-select>
+                        </el-tooltip>
+                    </el-form-item>
+
+                    <el-form-item class="form-item" :class="'form-item-' + themes"
+                        style="width: 106px; padding-left: 4px">
+                        <el-select :effect="themes" v-model="state.titleForm.letterSpace"
+                            :placeholder="t('chart.quota_letter_space')" @change="changeTitleStyle('letterSpace')">
+                            <template #prefix>
+                                <el-icon size="16">
+                                    <Icon name="icon_letter-spacing_outlined">
+                                        <icon_letterSpacing_outlined class="svg-icon" />
+                                    </Icon>
+                                </el-icon>
+                            </template>
+                            <el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name"
+                                :value="option.value" />
+                        </el-select>
+                    </el-form-item>
+                </div>
+                <el-space>
+                    <el-form-item class="form-item" :class="'form-item-' + themes">
+                        <el-checkbox :effect="themes" class="icon-checkbox" v-model="state.titleForm.isBolder"
+                            @change="changeTitleStyle('isBolder')">
+                            <el-tooltip :effect="toolTip" placement="top">
+                                <template #content>
+                                    {{ t('chart.bolder') }}
+                                </template>
+                                <div class="icon-btn"
+                                    :class="{ dark: themes === 'dark', active: state.titleForm.isBolder }">
+                                    <el-icon>
+                                        <Icon name="icon_bold_outlined">
+                                            <icon_bold_outlined class="svg-icon" />
+                                        </Icon>
+                                    </el-icon>
+                                </div>
+                            </el-tooltip>
+                        </el-checkbox>
+                    </el-form-item>
+
+                    <el-form-item class="form-item" :class="'form-item-' + themes">
+                        <el-checkbox :effect="themes" class="icon-checkbox" v-model="state.titleForm.isItalic"
+                            @change="changeTitleStyle('isItalic')">
+                            <el-tooltip :effect="toolTip" placement="top">
+                                <template #content>
+                                    {{ t('chart.italic') }}
+                                </template>
+                                <div class="icon-btn"
+                                    :class="{ dark: themes === 'dark', active: state.titleForm.isItalic }">
+                                    <el-icon>
+                                        <Icon name="icon_italic_outlined">
+                                            <icon_italic_outlined class="svg-icon" />
+                                        </Icon>
+                                    </el-icon>
+                                </div>
+                            </el-tooltip>
+                        </el-checkbox>
+                    </el-form-item>
+                </el-space>
+            </div>
+            <el-form-item class="form-item" :class="'form-item-' + themes" :effect="themes" :label="t('chart.text')">
+                <el-select :effect="themes" v-model="state.titleForm.fontFamily" :placeholder="t('chart.font_family')"
+                    @change="changeTitleStyle('fontFamily')">
+                    <el-option v-for="option in fontFamily" :key="option.value" :label="option.name"
+                        :value="option.value" />
+                </el-select>
+            </el-form-item>
+        <!-- 正常节点文本设置 -->
+            <div style="display: flex">
+                <el-form-item class="form-item" :class="'form-item-' + themes" style="padding-right: 4px">
+                    <el-color-picker :effect="themes" v-model="state.titleForm.color" class="color-picker-style"
+                        :predefine="predefineColors" @change="changeTitleStyle('color')" is-custom />
+                </el-form-item>
+                <el-form-item class="form-item" :class="'form-item-' + themes" style="padding: 0 4px">
+                    <el-tooltip :content="t('chart.font_size')" :effect="toolTip" placement="top">
+                        <el-select style="width: 56px" :effect="themes" v-model="state.titleForm.fontSize"
+                            :placeholder="t('chart.text_fontsize')" size="small" @change="changeTitleStyle('fontSize')">
+                            <el-option v-for="option in fontSizeList" :key="option.value" :label="option.name"
+                                :value="option.value" />
+                        </el-select>
+                    </el-tooltip>
+                </el-form-item>
+
+                <el-form-item class="form-item" :class="'form-item-' + themes" style="width: 106px; padding-left: 4px">
+                    <el-select :effect="themes" v-model="state.titleForm.letterSpace"
+                        :placeholder="t('chart.quota_letter_space')" @change="changeTitleStyle('letterSpace')">
+                        <template #prefix>
+                            <el-icon size="16">
+                                <Icon name="icon_letter-spacing_outlined">
+                                    <icon_letterSpacing_outlined class="svg-icon" />
+                                </Icon>
+                            </el-icon>
+                        </template>
+                        <el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name"
+                            :value="option.value" />
+                    </el-select>
+                </el-form-item>
+            </div>
+
+            <el-space>
+                <el-form-item class="form-item" :class="'form-item-' + themes">
+                    <el-checkbox :effect="themes" class="icon-checkbox" v-model="state.titleForm.isBolder"
+                        @change="changeTitleStyle('isBolder')">
+                        <el-tooltip :effect="toolTip" placement="top">
+                            <template #content>
+                                {{ t('chart.bolder') }}
+                            </template>
+                            <div class="icon-btn"
+                                :class="{ dark: themes === 'dark', active: state.titleForm.isBolder }">
+                                <el-icon>
+                                    <Icon name="icon_bold_outlined">
+                                        <icon_bold_outlined class="svg-icon" />
+                                    </Icon>
+                                </el-icon>
+                            </div>
+                        </el-tooltip>
+                    </el-checkbox>
+                </el-form-item>
+
+                <el-form-item class="form-item" :class="'form-item-' + themes">
+                    <el-checkbox :effect="themes" class="icon-checkbox" v-model="state.titleForm.isItalic"
+                        @change="changeTitleStyle('isItalic')">
+                        <el-tooltip :effect="toolTip" placement="top">
+                            <template #content>
+                                {{ t('chart.italic') }}
+                            </template>
+                            <div class="icon-btn"
+                                :class="{ dark: themes === 'dark', active: state.titleForm.isItalic }">
+                                <el-icon>
+                                    <Icon name="icon_italic_outlined">
+                                        <icon_italic_outlined class="svg-icon" />
+                                    </Icon>
+                                </el-icon>
+                            </div>
+                        </el-tooltip>
+                    </el-checkbox>
+                </el-form-item>
+            </el-space>
+        </el-form>
+
+    </div>
+</template>
+
+<style lang="less" scoped>
+:deep(.ed-input .ed-select__prefix--light) {
+    padding-right: 6px;
+}
+.formtitle{
+    color: #A6A6A6;
+    font-size: 12px;
+    margin-bottom: 5px;
+}
+.icon-btn {
+    font-size: 16px;
+    line-height: 16px;
+    width: 24px;
+    height: 24px;
+    text-align: center;
+    border-radius: 4px;
+    padding-top: 4px;
+
+    color: #1f2329;
+
+    cursor: pointer;
+
+    &.dark {
+        color: #a6a6a6;
+
+        &.active {
+            color: var(--ed-color-primary);
+            background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
+        }
+
+        &:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+    }
+
+    &.active {
+        color: var(--ed-color-primary);
+        background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
+    }
+
+    &:hover {
+        background-color: rgba(31, 35, 41, 0.1);
+    }
+}
+
+.is-disabled {
+    .icon-btn {
+        color: #8f959e;
+        cursor: not-allowed;
+
+        &:hover {
+            background-color: inherit;
+        }
+
+        &.active {
+            background-color: #f5f7fa;
+
+            &:hover {
+                background-color: #f5f7fa;
+            }
+        }
+
+        &.dark {
+            color: #5f5f5f;
+
+            &.active {
+                background-color: #373737;
+
+                &:hover {
+                    background-color: #373737;
+                }
+            }
+        }
+    }
+}
+
+.icon-checkbox {
+    :deep(.ed-checkbox__input) {
+        display: none;
+    }
+
+    :deep(.ed-checkbox__label) {
+        padding: 0;
+    }
+}
+
+.icon-radio-group {
+    :deep(.ed-radio) {
+        margin-right: 8px;
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+
+    :deep(.ed-radio__input) {
+        display: none;
+    }
+
+    :deep(.ed-radio__label) {
+        padding: 0;
+    }
+}
+
+.position-divider {
+    width: 1px;
+    height: 18px;
+    margin-bottom: 16px;
+    background: rgba(31, 35, 41, 0.15);
+
+    &.position-divider--dark {
+        background: rgba(235, 235, 235, 0.15);
+    }
+}
+
+.remark-label {
+    color: var(--N600, #646a73);
+    font-family: var(--de-custom_font, 'PingFang');
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+
+    &.remark-label--dark {
+        color: var(--N600-Dark, #a6a6a6);
+    }
+}
+
+.dialog-footer .ed-button {
+    color: #F2F4F5;
+    background-color: #212121;
+    border: 1px solid #434343;
+}
+
+.dialog-footer .ed-button--primary {
+    background-color: #0089FF;
+    border: 1px solid #0089FF;
+}
+
+:deep(.ed-textarea__inner) {
+    background-color: #252424;
+    box-shadow: none;
+    border: 1px solid #434343;
+    color: #fff;
+}
+
+:deep(.ed-textarea__inner:hover) {
+    box-shadow: none;
+    border: 1px solid #5f5f5f;
+}
+
+:deep(.ed-textarea__inner:focus) {
+    box-shadow: none;
+    border: 1px solid #0089ff;
+}
+
+:deep(.ed-form-item__label) {
+    color: #D2D2D2 !important;
+}
+</style>
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/DeTree.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/DeTree.ts
index 450aae2..578214d 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/DeTree.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/DeTree.ts
@@ -3,22 +3,24 @@ import { useI18n } from '@/hooks/web/useI18n'
 
 const { t } = useI18n()
 /**
- * 富文本图表
+ * 树图表
  */
-export class RichTextChartView extends AbstractChartView {
+export class DeTreeChartView extends AbstractChartView {
   properties: EditorProperty[] = [
     'background-overall-component',
     'border-style',
     'threshold',
-    'function-cfg'
+    'function-cfg',
+    'linkage',
+    'basic-attributes-selector'
   ]
   propertyInner: EditorPropertyInner = {
     'background-overall-component': ['all'],
     'border-style': ['all'],
-    threshold: ['tableThreshold'],
+    'threshold': ['tableThreshold'],
     'function-cfg': ['emptyDataStrategy']
   }
-  axis: AxisType[] = ['xAxis', 'filter']
+  axis: AxisType[] = ['xAxis', 'filter','drill']
   axisConfig: AxisConfig = {
     xAxis: {
       name: `${t('chart.drag_block_table_data_column')} / ${t('chart.dimension_or_quota')}`
diff --git a/core/core-frontend/src/views/chart/components/views/index.vue b/core/core-frontend/src/views/chart/components/views/index.vue
index 261540b..e267335 100644
--- a/core/core-frontend/src/views/chart/components/views/index.vue
+++ b/core/core-frontend/src/views/chart/components/views/index.vue
@@ -577,13 +577,8 @@ const queryData = (firstLoad = false) => {
 }
 
 const calcData = params => {
-  debugger
   dvMainStore.setLastViewRequestInfo(params.id, params.chartExtRequest)
   if (chartComponent?.value) {
-    if (['DeTree'].includes(view.value.type)) {
-      loading.value = false
-      return
-    }
     loading.value = true
     if (view.value.isPlugin) {
       chartComponent?.value?.invokeMethod({
@@ -596,7 +591,7 @@ const calcData = params => {
         ]
       })
     } else {
-      console.log(chartComponent,'23213')
+      console.log(chartComponent.value,'23213')
       chartComponent?.value?.calcData?.(params, () => {
         loading.value = false
       })