diff --git a/nezha-fronted/src/components/chart/chart/chartTreemapD3.vue b/nezha-fronted/src/components/chart/chart/chartTreemapD3.vue
index a2f127c20..0fefc7517 100644
--- a/nezha-fronted/src/components/chart/chart/chartTreemapD3.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTreemapD3.vue
@@ -1,20 +1,12 @@
 <template>
   <div
+   :class="legendPlacement"
     ref="pie-chart-box"
-    class="nz-chart__component"
+    class="nz-chart__component nz-chart__component--time-series"
   >
     <div :id="`chart-canvas-${chartId}`" class="chart__canvas" >
       <svg :id="`treemap-svg-${chartId}`" width="100%" height="100%">
       </svg>
-          <chart-legend
-      v-if="hasLegend"
-      :chart-data="chartData"
-      :chart-info="chartInfo"
-      :legends="legends"
-      :series="series"
-      :is-fullscreen="isFullscreen"
-      class="legends-flex"
-    ></chart-legend>
     </div>
     <div :class="`chart-canvas-tooltip-${chartId}`" :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show">
       <div class="chart-canvas-tooltip-title tooltip-title">
@@ -30,6 +22,15 @@
         </div>
       </div>
     </div>
+        <chart-legend
+      v-if="hasLegend"
+      :chart-data="chartData"
+      :chart-info="chartInfo"
+      :legends="legends"
+      :series="series"
+      :is-fullscreen="isFullscreen"
+      class="legends-flex"
+    ></chart-legend>
   </div>
 </template>
 
@@ -377,13 +378,22 @@ export default {
     display: inline-block;
     flex-wrap: wrap;
     flex-direction: column;
+    height:20px !important;
+    line-height: 20px;
+    align-self: stretch;
+    -webkit-box-align: stretch;
 }
 .theme-light .legend-container{
-  height:30px !important;
-    -ms-overflow-style: none;  /* Internet Explorer 10+ */
+  -ms-overflow-style: none;  /* Internet Explorer 10+ */
     scrollbar-width: none;     /* Firefox */
 }
 .container::-webkit-scrollbar {
     display: none;            /* Safari and Chrome */
 }
+
+.legends-flex{
+    width: 100%;
+    max-height: 80px;
+    min-height: 25px;
+}
 </style>